Ricardo Gonzalez
105 lines
2.8 KiB
Vue
105 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import {
|
|
LayoutDashboard,
|
|
Calendar,
|
|
Clock,
|
|
ChevronRight,
|
|
} from 'lucide-vue-next'
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarMenuSub,
|
|
SidebarMenuSubButton,
|
|
SidebarMenuSubItem,
|
|
SidebarRail,
|
|
} from '@/components/ui/sidebar'
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
|
|
import NavProjects from './NavProjects.vue'
|
|
import NavUser from './NavUser.vue'
|
|
|
|
defineProps<{
|
|
activeTab: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:activeTab': [value: string]
|
|
}>()
|
|
|
|
function setTab(tab: string) {
|
|
emit('update:activeTab', tab)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar collapsible="icon" variant="inset">
|
|
<SidebarHeader>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton size="lg" as="button" @click="setTab('dashboard')">
|
|
<div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
|
|
<span class="font-bold text-sm">A</span>
|
|
</div>
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<span class="truncate font-semibold">Alpha</span>
|
|
<span class="truncate text-xs">Alpha</span>
|
|
</div>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarHeader>
|
|
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>Navegación</SidebarGroupLabel>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
:is-active="activeTab === 'dashboard'"
|
|
:tooltip="'Diagnóstico'"
|
|
@click="setTab('dashboard')"
|
|
>
|
|
<LayoutDashboard />
|
|
<span>Diagnóstico</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
:is-active="activeTab === 'calendar'"
|
|
:tooltip="'Calendario'"
|
|
@click="setTab('calendar')"
|
|
>
|
|
<Calendar />
|
|
<span>Calendario</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton
|
|
:is-active="activeTab === 'scheduler'"
|
|
:tooltip="'Recetas'"
|
|
@click="setTab('scheduler')"
|
|
>
|
|
<Clock />
|
|
<span>Recetas</span>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
|
|
<NavProjects />
|
|
</SidebarContent>
|
|
|
|
<SidebarFooter>
|
|
<NavUser />
|
|
</SidebarFooter>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
</template>
|