From 33679542d7b58794b64d096d7ee3ceeb24926e5d Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Sun, 1 Mar 2026 13:46:18 -0500
Subject: [PATCH] Added mod requests to the navbar

---
 ui/src/components/Navigation/Navbar.vue | 92 ++++++++++++++-----------
 1 file changed, 53 insertions(+), 39 deletions(-)

diff --git a/ui/src/components/Navigation/Navbar.vue b/ui/src/components/Navigation/Navbar.vue
index 8c83549..2932399 100644
--- a/ui/src/components/Navigation/Navbar.vue
+++ b/ui/src/components/Navigation/Navbar.vue
@@ -1,46 +1,46 @@
 <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 { ArrowUpRight, CircleArrowOutUpRight } from 'lucide-vue-next';
-import DropdownMenuGroup from '../ui/dropdown-menu/DropdownMenuGroup.vue';
-import DropdownMenuSeparator from '../ui/dropdown-menu/DropdownMenuSeparator.vue';
-import { MemberState } from '@shared/types/member';
+    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 { ArrowUpRight, CircleArrowOutUpRight } from 'lucide-vue-next';
+    import DropdownMenuGroup from '../ui/dropdown-menu/DropdownMenuGroup.vue';
+    import DropdownMenuSeparator from '../ui/dropdown-menu/DropdownMenuSeparator.vue';
+    import { MemberState } from '@shared/types/member';
 
-const userStore = useUserStore();
-const auth = useAuth();
+    const userStore = useUserStore();
+    const auth = useAuth();
 
-//@ts-ignore
-const APIHOST = import.meta.env.VITE_APIHOST;
-//@ts-ignore
-const DOCHOST = import.meta.env.VITE_DOCHOST;
+    //@ts-ignore
+    const APIHOST = import.meta.env.VITE_APIHOST;
+    //@ts-ignore
+    const DOCHOST = import.meta.env.VITE_DOCHOST;
 
-async function logout() {
-    userStore.user = null;
-    window.location.href = APIHOST + "/logout";
-}
+    async function logout() {
+        userStore.user = null;
+        window.location.href = APIHOST + "/logout";
+    }
 
-function blurAfter() {
-    requestAnimationFrame(() => {
-        (document.activeElement as HTMLElement)?.blur();
-    });
-}
+    function blurAfter() {
+        requestAnimationFrame(() => {
+            (document.activeElement as HTMLElement)?.blur();
+        });
+    }
 </script>
 
 <template>
@@ -52,7 +52,8 @@ function blurAfter() {
                     <img src="/17RBN_Logo.png" class="w-10 h-10 object-contain"></img>
                 </RouterLink>
                 <!-- Member navigation -->
-                <div v-if="auth.accountStatus.value == MemberState.Member" class="h-15 flex items-center justify-center">
+                <div v-if="auth.accountStatus.value == MemberState.Member"
+                    class="h-15 flex items-center justify-center">
                     <NavigationMenu>
                         <NavigationMenuList class="gap-3">
 
@@ -101,6 +102,19 @@ function blurAfter() {
                                 </NavigationMenuContent>
                             </NavigationMenuItem>
 
+                            <!-- Discussions (Dropdown) -->
+                            <NavigationMenuItem class="bg-none !focus:bg-none !active:bg-none">
+                                <NavigationMenuTrigger>Discussions</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="/discussions/mod-requests" @click="blurAfter">
+                                            Mod Requests
+                                        </RouterLink>
+                                    </NavigationMenuLink>
+                                </NavigationMenuContent>
+                            </NavigationMenuItem>
+
                             <!-- Administration (Dropdown) -->
                             <NavigationMenuItem
                                 v-if="auth.hasAnyRole(['17th Administrator', '17th HQ', '17th Command', 'Recruiter'])">