From 676e09aef5db065e11841401758fd457fda8f55f Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Sat, 21 Mar 2026 23:22:41 -0400
Subject: [PATCH] Updated navigation system for new stuff

---
 ui/src/components/Navigation/Navbar.vue | 312 ++++++++++++------------
 1 file changed, 161 insertions(+), 151 deletions(-)

diff --git a/ui/src/components/Navigation/Navbar.vue b/ui/src/components/Navigation/Navbar.vue
index 8b2a55a..d94bbf8 100644
--- a/ui/src/components/Navigation/Navbar.vue
+++ b/ui/src/components/Navigation/Navbar.vue
@@ -1,171 +1,180 @@
 <script setup lang="ts">
-import { RouterLink, useRouter } 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, ChevronDown, ChevronUp, CircleArrowOutUpRight, LogIn, LogOut, Menu, Settings, X } 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 { computed, nextTick, ref } from 'vue';
+    import { RouterLink, useRouter } 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, ChevronDown, ChevronUp, CircleArrowOutUpRight, LogIn, LogOut, Menu, Settings, X } 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 { computed, nextTick, ref } from 'vue';
 
-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();
+        });
+    }
 
-type NavItem = {
-    title: string;
-    to?: string;
-    href?: string;
-    status?: 'member' | 'guest';
-    isExternal?: boolean;
-    roles?: string[];
-    items?: NavItem[];
-};
+    type NavItem = {
+        title: string;
+        to?: string;
+        href?: string;
+        status?: 'member' | 'guest';
+        isExternal?: boolean;
+        roles?: string[];
+        items?: NavItem[];
+    };
 
-const navConfig: NavItem[] = [
-    {
-        title: 'Calendar',
-        to: '/calendar',
-    },
-    {
-        title: 'Documents',
-        href: 'https://docs.iceberg-gaming.com',
-        status: 'member',
-        isExternal: true
-    },
-    {
-        title: 'Forms',
-        status: 'member',
-        items: [
-            { title: 'Leave of Absence', to: '/loa' },
-            { title: 'Training Report', to: '/trainingReport' },
-        ]
-    },
-    {
-        title: 'Administration',
-        status: 'member',
-        roles: ['17th Administrator', '17th HQ', '17th Command', 'Recruiter'],
-        items: [
-            {
-                title: 'Leave of Absence',
-                to: '/administration/loa',
-                roles: ['17th Administrator', '17th HQ', '17th Command']
-            },
-            {
-                title: 'Promotions',
-                to: '/administration/rankChange',
-                roles: ['17th Administrator', '17th HQ', '17th Command']
-            },
-            {
-                title: 'Recruitment',
-                to: '/administration/applications',
-                roles: ['Recruiter']
-            },
-            {
-                title: 'Role Management',
-                to: '/administration/roles',
-                roles: ['17th Administrator']
-            },
-        ]
-    },
-    {
-        title: 'Join',
-        to: '/join',
-        status: 'guest',
-    },
-];
+    const navConfig: NavItem[] = [
+        {
+            title: 'Calendar',
+            to: '/calendar',
+        },
+        {
+            title: 'Documents',
+            href: 'https://docs.iceberg-gaming.com',
+            status: 'member',
+            isExternal: true
+        },
+        {
+            title: 'Forms',
+            status: 'member',
+            items: [
+                { title: 'Leave of Absence', to: '/loa' },
+                { title: 'Training Report', to: '/trainingReport' },
+            ]
+        },
+        {
+            title: 'Administration',
+            status: 'member',
+            roles: ['17th Administrator', '17th HQ', '17th Command', 'Recruiter'],
+            items: [
+                {
+                    title: 'Leave of Absence',
+                    to: '/administration/loa',
+                    roles: ['17th Administrator', '17th HQ', '17th Command']
+                },
+                {
+                    title: 'Promotions',
+                    to: '/administration/rankChange',
+                    roles: ['17th Administrator', '17th HQ', '17th Command']
+                },
+                {
+                    title: 'Recruitment',
+                    to: '/administration/applications',
+                    roles: ['Recruiter']
+                },
+                {
+                    title: 'Member Management',
+                    to: '/administration/members',
+                },
+                {
+                    title: 'Role Management',
+                    to: '/administration/roles',
+                    roles: ['17th Administrator']
+                },
+            ]
+        },
+        {
+            title: 'Developer',
+            to: '/developer',
+            roles: ['Dev']
+        },
+        {
+            title: 'Join',
+            to: '/join',
+            status: 'guest',
+        },
+    ];
 
-const filteredNav = computed(() => {
-    return navConfig.flatMap(item => {
-        const filtered: NavItem[] = [];
+    const filteredNav = computed(() => {
+        return navConfig.flatMap(item => {
+            const filtered: NavItem[] = [];
 
-        // 1. Check Login Requirements
-        const isLoggedIn = userStore.isLoggedIn;
+            // 1. Check Login Requirements
+            const isLoggedIn = userStore.isLoggedIn;
 
-        // 2. Determine visibility based on status
-        let shouldShow = false;
+            // 2. Determine visibility based on status
+            let shouldShow = false;
 
-        if (!item.status) {
-            // Public items - always show
-            shouldShow = true;
-        } else if (item.status === 'guest') {
-            // Show if NOT logged in OR logged in as guest (but NOT a member)
-            shouldShow = !isLoggedIn || auth.accountStatus.value === 'guest';
-        } else if (item.status === 'member') {
-            // Show ONLY if logged in as member
-            shouldShow = isLoggedIn && auth.accountStatus.value === 'member';
-        }
-
-        // 3. Check Role Requirements (if status check passed)
-        if (shouldShow && item.roles) {
-            shouldShow = auth.hasAnyRole(item.roles);
-        }
-
-        if (shouldShow) {
-            if (item.items) {
-                const filteredItems = item.items.filter(subItem =>
-                    !subItem.roles || auth.hasAnyRole(subItem.roles)
-                );
-                filtered.push({ ...item, items: filteredItems });
-            } else {
-                filtered.push(item);
+            if (!item.status) {
+                // Public items - always show
+                shouldShow = true;
+            } else if (item.status === 'guest') {
+                // Show if NOT logged in OR logged in as guest (but NOT a member)
+                shouldShow = !isLoggedIn || auth.accountStatus.value === MemberState.Guest;
+            } else if (item.status === 'member') {
+                // Show ONLY if logged in as member
+                shouldShow = isLoggedIn && auth.accountStatus.value === MemberState.Member;
             }
-        }
 
-        return filtered;
-    });
-})
+            // 3. Check Role Requirements (if status check passed)
+            if (shouldShow && item.roles) {
+                shouldShow = auth.hasAnyRole(item.roles);
+            }
 
-const isMobileMenuOpen = ref(false);
-const expandedMenu = ref(null);
+            if (shouldShow) {
+                if (item.items) {
+                    const filteredItems = item.items.filter(subItem =>
+                        !subItem.roles || auth.hasAnyRole(subItem.roles)
+                    );
+                    filtered.push({ ...item, items: filteredItems });
+                } else {
+                    filtered.push(item);
+                }
+            }
 
-const router = useRouter();
+            return filtered;
+        });
+    })
 
-function openMobileMenu() {
-    expandedMenu.value = null;
-    isMobileMenuOpen.value = true;
-}
+    const isMobileMenuOpen = ref(false);
+    const expandedMenu = ref(null);
 
-function closeMobileMenu() {
-    isMobileMenuOpen.value = false;
-    expandedMenu.value = null;
-}
+    const router = useRouter();
 
-function mobileNavigateTo(to: string) {
-    closeMobileMenu();
-    router.push(to);
-}
+    function openMobileMenu() {
+        expandedMenu.value = null;
+        isMobileMenuOpen.value = true;
+    }
+
+    function closeMobileMenu() {
+        isMobileMenuOpen.value = false;
+        expandedMenu.value = null;
+    }
+
+    function mobileNavigateTo(to: string) {
+        closeMobileMenu();
+        router.push(to);
+    }
 </script>
 
 <template>
@@ -177,7 +186,8 @@ function mobileNavigateTo(to: string) {
                     <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">