milsim-site-v4/ui/src/components/Navigation/Navbar.vue

<script setup lang="ts">
import { RouterLink } from 'vue-router';
import Separator from '../ui/separator/Separator.vue';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} 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/'
import { useAuth } from '@/composables/useAuth';
import { CircleArrowOutUpRight } from 'lucide-vue-next';

const userStore = useUserStore();
const auth = useAuth();

//@ts-ignore
const APIHOST = import.meta.env.VITE_APIHOST;

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-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="/">
                    <img src="/17RBN_Logo.png" class="w-10 h-10 object-contain"></img>
                </RouterLink>
                <!-- Member navigation -->
                <div v-if="auth.accountStatus.value == 'member'" class="h-15 flex items-center justify-center">
                    <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="/loa" @click="blurAfter">
                                            Leave of Absence
                                        </RouterLink>
                                    </NavigationMenuLink>

                                    <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>

                                </NavigationMenuContent>
                            </NavigationMenuItem>

                            <!-- Administration (Dropdown) -->
                            <NavigationMenuItem
                                v-if="auth.hasAnyRole(['17th Administrator', '17th HQ', '17th Command', 'Recruiter'])">
                                <NavigationMenuTrigger>Administration</NavigationMenuTrigger>
                                <NavigationMenuContent
                                    class="grid gap-1 p-2 text-left [&_a]:w-full [&_a]:block [&_a]:whitespace-nowrap *:bg-transparent">

                                    <NavigationMenuLink
                                        v-if="auth.hasAnyRole(['17th Administrator', '17th HQ', '17th Command'])"
                                        as-child :class="navigationMenuTriggerStyle()">
                                        <RouterLink to="/administration/rankChange" @click="blurAfter">
                                            Promotions
                                        </RouterLink>
                                    </NavigationMenuLink>

                                    <NavigationMenuLink
                                        v-if="auth.hasAnyRole(['17th Administrator', '17th HQ', '17th Command'])"
                                        as-child :class="navigationMenuTriggerStyle()">
                                        <RouterLink to="/administration/loa" @click="blurAfter">
                                            Leave of Absence
                                        </RouterLink>
                                    </NavigationMenuLink>

                                    <NavigationMenuLink
                                        v-if="auth.hasAnyRole(['17th Administrator', '17th HQ', '17th Command'])"
                                        as-child :class="navigationMenuTriggerStyle()">
                                        <RouterLink to="/administration/transfer" @click="blurAfter">
                                            Transfer Requests
                                        </RouterLink>
                                    </NavigationMenuLink>

                                    <NavigationMenuLink v-if="auth.hasRole('Recruiter')" as-child
                                        :class="navigationMenuTriggerStyle()">
                                        <RouterLink to="/administration/applications" @click="blurAfter">
                                            Recruitment
                                        </RouterLink>
                                    </NavigationMenuLink>

                                    <NavigationMenuLink v-if="auth.hasRole('17th Administrator')" as-child
                                        :class="navigationMenuTriggerStyle()">
                                        <RouterLink to="/administration/roles" @click="blurAfter">
                                            Role Management
                                        </RouterLink>
                                    </NavigationMenuLink>
                                </NavigationMenuContent>
                            </NavigationMenuItem>

                            <NavigationMenuItem as-child :class="navigationMenuTriggerStyle()">
                                <RouterLink to="/members" @click="blurAfter">
                                    Members (debug)
                                </RouterLink>
                            </NavigationMenuItem>

                        </NavigationMenuList>
                    </NavigationMenu>
                </div>
                <!-- Guest navigation -->
                <div v-else class="h-15 flex items-center justify-center">
                    <NavigationMenu>
                        <NavigationMenuList>
                            <NavigationMenuItem>
                                <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
                                    <RouterLink to="/join" @click="blurAfter">Join</RouterLink>
                                </NavigationMenuLink>
                            </NavigationMenuItem>
                            <!-- Calendar -->
                            <NavigationMenuItem>
                                <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
                                    <RouterLink to="/calendar" @click="blurAfter">Calendar</RouterLink>
                                </NavigationMenuLink>
                            </NavigationMenuItem>
                        </NavigationMenuList>
                    </NavigationMenu>
                </div>
            </div>
            <!-- right side -->
            <div>
                <DropdownMenu v-if="userStore.isLoggedIn">
                    <DropdownMenuTrigger class="cursor-pointer">
                        <p>{{ userStore.user.name }}</p>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent>
                        <!-- <DropdownMenuItem>My Profile</DropdownMenuItem> -->
                        <!-- <DropdownMenuItem>Settings</DropdownMenuItem> -->
                        <DropdownMenuItem @click="$router.push('/join')">My Application</DropdownMenuItem>
                        <DropdownMenuItem :variant="'destructive'" @click="logout()">Logout</DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
                <a v-else :href="APIHOST + '/login'">Login</a>
            </div>
        </div>
        <!-- <Separator></Separator> -->
    </div>
</template>