navbar V2 hell yeah
This commit is contained in:
@@ -10,7 +10,13 @@ import {
|
||||
} from '../ui/dropdown-menu';
|
||||
import { useUserStore } from '@/stores/user';
|
||||
import Button from '../ui/button/Button.vue';
|
||||
|
||||
import NavigationMenu from '../ui/navigation-menu/NavigationMenu.vue';
|
||||
import NavigationMenuList from '../ui/navigation-menu/NavigationMenuList.vue';
|
||||
import NavigationMenuItem from '../ui/navigation-menu/NavigationMenuItem.vue';
|
||||
import NavigationMenuLink from '../ui/navigation-menu/NavigationMenuLink.vue';
|
||||
import NavigationMenuTrigger from '../ui/navigation-menu/NavigationMenuTrigger.vue';
|
||||
import NavigationMenuContent from '../ui/navigation-menu/NavigationMenuContent.vue';
|
||||
import { navigationMenuTriggerStyle } from '../ui/navigation-menu/'
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
@@ -21,59 +27,117 @@ async function logout() {
|
||||
userStore.user = null;
|
||||
window.location.href = APIHOST + "/logout";
|
||||
}
|
||||
|
||||
function blurAfter() {
|
||||
requestAnimationFrame(() => {
|
||||
(document.activeElement as HTMLElement)?.blur();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full border-b">
|
||||
<div class="max-w-screen-xl mx-auto flex items-center justify-between px-10">
|
||||
<div class="flex items-center">
|
||||
<div class="max-w-screen-3xl w-full mx-auto flex items-center justify-between pr-10 pl-7">
|
||||
<!-- left side -->
|
||||
<div class="flex items-center gap-7">
|
||||
<RouterLink to="/">
|
||||
<Button variant="link">Home</Button>
|
||||
<img src="/17RBN_Logo.png" class="w-10 h-10 object-contain"></img>
|
||||
</RouterLink>
|
||||
<div class="h-15 flex items-center justify-center">
|
||||
<RouterLink to="/calendar">
|
||||
<Button variant="link">Calendar</Button>
|
||||
</RouterLink>
|
||||
<RouterLink to="/members">
|
||||
<Button variant="link">Members</Button>
|
||||
</RouterLink>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="link">Forms</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="flex flex-col gap-4 items-center w-min">
|
||||
<RouterLink to="/transfer">
|
||||
<Button variant="link">Transfer Request</Button>
|
||||
</RouterLink>
|
||||
<RouterLink to="/trainingReport">
|
||||
<Button variant="link">Training Report</Button>
|
||||
</RouterLink>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="link">Administration</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="flex flex-col gap-4 items-center w-min">
|
||||
<RouterLink to="/administration/rankChange">
|
||||
<Button variant="link">Promotions</Button>
|
||||
</RouterLink>
|
||||
<RouterLink to="/administration/loa">
|
||||
<Button variant="link">Leave of Absence</Button>
|
||||
</RouterLink>
|
||||
<RouterLink to="/administration/transfer">
|
||||
<Button variant="link">Transfer Requests</Button>
|
||||
</RouterLink>
|
||||
<RouterLink to="/administration/applications">
|
||||
<Button variant="link">Recruitment</Button>
|
||||
</RouterLink>
|
||||
<RouterLink to="/administration/roles">
|
||||
<Button variant="link">Role Management</Button>
|
||||
</RouterLink>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList class="gap-3">
|
||||
|
||||
<!-- Calendar -->
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/calendar" @click="blurAfter">Calendar</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<!-- Members -->
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/" @click="blurAfter">Documents</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<!-- Forms (Dropdown) -->
|
||||
<NavigationMenuItem class="bg-none !focus:bg-none !active:bg-none">
|
||||
<NavigationMenuTrigger>Forms</NavigationMenuTrigger>
|
||||
<NavigationMenuContent
|
||||
class="grid gap-1 p-2 text-left [&_a]:w-full [&_a]:block [&_a]:whitespace-nowrap *:bg-transparent">
|
||||
|
||||
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/transfer" @click="blurAfter">
|
||||
Transfer Request
|
||||
</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
|
||||
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/trainingReport" @click="blurAfter">
|
||||
Training Report
|
||||
</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
|
||||
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/loa" @click="blurAfter">
|
||||
Submit LOA
|
||||
</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
<!-- Administration (Dropdown) -->
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>Administration</NavigationMenuTrigger>
|
||||
<NavigationMenuContent
|
||||
class="grid gap-1 p-2 text-left [&_a]:w-full [&_a]:block [&_a]:whitespace-nowrap *:bg-transparent">
|
||||
|
||||
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/administration/rankChange" @click="blurAfter">
|
||||
Promotions
|
||||
</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
|
||||
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/administration/loa" @click="blurAfter">
|
||||
Leave of Absence
|
||||
</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
|
||||
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/administration/transfer" @click="blurAfter">
|
||||
Transfer Requests
|
||||
</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
|
||||
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/administration/applications" @click="blurAfter">
|
||||
Recruitment
|
||||
</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
|
||||
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/administration/roles" @click="blurAfter">
|
||||
Role Management
|
||||
</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
|
||||
<NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
|
||||
<RouterLink to="/members" @click="blurAfter">
|
||||
Members (debug)
|
||||
</RouterLink>
|
||||
</NavigationMenuLink>
|
||||
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
</div>
|
||||
</div>
|
||||
<!-- right side -->
|
||||
<div>
|
||||
<DropdownMenu v-if="userStore.isLoggedIn">
|
||||
<DropdownMenuTrigger class="cursor-pointer">
|
||||
@@ -82,11 +146,6 @@ async function logout() {
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>My Profile</DropdownMenuItem>
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<RouterLink to="/loa">
|
||||
Submit LOA
|
||||
</RouterLink>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem :variant="'destructive'" @click="logout()">Logout</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
Reference in New Issue
Block a user