<template>

<v-card>
<v-toolbar color="primary">
<!-- ... (otros elementos de la barra de herramientas) ... -->
<router-link to="/">Home</router-link>
<router-link to="/events">Events</router-link>
<router-link to="/codelabs">Codelabs</router-link>
<!-- ... otros enlaces para el resto de las pestañas ... -->
</v-toolbar>
</v-card>
</template>

<template>
<v-card>
<v-toolbar color="primary">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>ML COMMUNITY</v-toolbar-title>
<v-spacer></v-spacer>

<!-- Enlaces de router para las pestañas -->

<router-link v-for="item in items" :key="item" :to="`/$
{item.toLowerCase().replace(/\s/g, '-')}`">{{ item }}</router-link>

<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>

<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>

<!-- Área donde se mostrará el contenido de la pestaña activa -->

<router-view></router-view>
</template>