mirror of
https://github.com/Drop-OSS/drop-app.git
synced 2025-11-10 04:22:13 +10:00
83 lines
2.6 KiB
Vue
83 lines
2.6 KiB
Vue
<template>
|
|
<Menu as="div" class="relative inline-block">
|
|
<MenuButton>
|
|
<HeaderWidget>
|
|
<div class="inline-flex items-center text-zinc-300 hover:text-white">
|
|
<img :src="userData.image" class="w-5 h-5 rounded-sm" />
|
|
<span class="ml-2 text-sm font-bold">{{ userData.name }}</span>
|
|
<ChevronDownIcon class="ml-3 h-4" />
|
|
</div>
|
|
</HeaderWidget>
|
|
</MenuButton>
|
|
|
|
<transition
|
|
enter-active-class="transition ease-out duration-100"
|
|
enter-from-class="transform opacity-0 scale-95"
|
|
enter-to-class="transform opacity-100 scale-100"
|
|
leave-active-class="transition ease-in duration-75"
|
|
leave-from-class="transform opacity-100 scale-100"
|
|
leave-to-class="transform opacity-0 scale-95"
|
|
>
|
|
<MenuItems
|
|
class="absolute bg-zinc-900 right-0 top-10 z-10 w-56 origin-top-right focus:outline-none shadow-md"
|
|
>
|
|
<PanelWidget class="flex-col gap-y-2">
|
|
<NuxtLink
|
|
to="/id/me"
|
|
class="transition inline-flex items-center w-full py-3 px-4 hover:bg-zinc-800"
|
|
>
|
|
<div class="inline-flex items-center text-zinc-300">
|
|
<img :src="userData.image" class="w-5 h-5 rounded-sm" />
|
|
<span class="ml-2 text-sm font-bold">{{ userData.name }}</span>
|
|
</div>
|
|
</NuxtLink>
|
|
<div class="h-0.5 rounded-full w-full bg-zinc-800" />
|
|
<div class="flex flex-col mb-1">
|
|
<MenuItem v-for="(nav, navIdx) in navigation" v-slot="{ active }">
|
|
<NuxtLink
|
|
:href="nav.route"
|
|
:class="[
|
|
active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
|
|
'transition block px-4 py-2 text-sm',
|
|
]"
|
|
>
|
|
{{ nav.label }}</NuxtLink
|
|
>
|
|
</MenuItem>
|
|
</div>
|
|
</PanelWidget>
|
|
</MenuItems>
|
|
</transition>
|
|
</Menu>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
|
|
import { ChevronDownIcon } from "@heroicons/vue/16/solid";
|
|
import type { NavigationItem } from "./types";
|
|
import HeaderWidget from "./HeaderWidget.vue";
|
|
|
|
const userData = {
|
|
image: "https://avatars.githubusercontent.com/u/64579723?v=4",
|
|
name: "DecDuck",
|
|
};
|
|
|
|
const navigation: NavigationItem[] = [
|
|
{
|
|
label: "Admin Dashboard",
|
|
route: "/admin",
|
|
prefix: "",
|
|
},
|
|
{
|
|
label: "Account settings",
|
|
route: "/account",
|
|
prefix: "",
|
|
},
|
|
{
|
|
label: "Sign out",
|
|
route: "/signout",
|
|
prefix: "",
|
|
},
|
|
];
|
|
</script>
|