80 lines
2.4 KiB
Vue
80 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
DropdownMenu, DropdownMenuContent,
|
|
DropdownMenuTrigger, DropdownMenuSeparator,
|
|
DropdownMenuItem, DropdownMenuLabel
|
|
} from '@/components/ui/dropdown-menu'
|
|
import { cn } from '@/lib/utils'
|
|
import { Settings } from 'lucide-vue-next'
|
|
import { RouterLink, useRoute } from 'vue-router'
|
|
|
|
const { customComponent } = defineProps<{ customComponent?: any }>()
|
|
|
|
const route = useRoute()
|
|
|
|
function isActive(prefix: string) {
|
|
const p = route.path.replace(/\/+$/, '')
|
|
const tgt = prefix.replace(/\/+$/, '')
|
|
return p === tgt || p.startsWith(tgt + '/')
|
|
}
|
|
|
|
function navLinkClass(prefix: string) {
|
|
return cn(
|
|
'text-sm font-medium transition-colors',
|
|
isActive(prefix) ? 'text-primary' : 'text-muted-foreground hover:text-primary'
|
|
)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col min-h-screen">
|
|
<div class="flex items-center justify-end space-x-6 p-4">
|
|
<nav :class="cn('flex items-center space-x-4 lg:space-x-6', $attrs.class ?? '')">
|
|
<RouterLink
|
|
to="/admin"
|
|
:class="navLinkClass('/admin')"
|
|
:aria-current="isActive('/admin') ? 'page' : undefined"
|
|
>
|
|
Admin
|
|
</RouterLink>
|
|
<RouterLink
|
|
to="/devices"
|
|
:class="navLinkClass('/devices')"
|
|
:aria-current="isActive('/devices') ? 'page' : undefined"
|
|
>
|
|
Devices
|
|
</RouterLink>
|
|
<RouterLink
|
|
to="/trackers"
|
|
:class="navLinkClass('/trackers')"
|
|
:aria-current="isActive('/trackers') ? 'page' : undefined"
|
|
>
|
|
Trackers
|
|
</RouterLink>
|
|
</nav>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button class="p-2 rounded hover:bg-muted">
|
|
<Settings />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent class="w-48">
|
|
<DropdownMenuLabel>Admin</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<RouterLink to="/settings">
|
|
<DropdownMenuItem>Settings</DropdownMenuItem>
|
|
</RouterLink>
|
|
<DropdownMenuSeparator />
|
|
<RouterLink to="/login">
|
|
<DropdownMenuItem>Logout</DropdownMenuItem>
|
|
</RouterLink>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<div class="flex flex-1 flex-col gap-4 p-4">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template> |