17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 36 Pull Requests 2 Actions Packages Projects 1 Releases 17 Wiki Activity

Updated navigation system for new stuff

Browse Source
This commit is contained in:
ajdj100
2026-03-21 23:22:41 -04:00
parent b40e4f3ec7
commit 676e09aef5
1 changed files with 161 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
ui/src/components/Navigation/Navbar.vue
View File

@@ -1,49 +1,49 @@
<script setup lang="ts"> <script setup lang="ts">
import { RouterLink, useRouter } from 'vue-router'; import { RouterLink, useRouter } from 'vue-router';
import Separator from '../ui/separator/Separator.vue'; import Separator from '../ui/separator/Separator.vue';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'; import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from '../ui/dropdown-menu'; } from '../ui/dropdown-menu';
import { useUserStore } from '@/stores/user'; import { useUserStore } from '@/stores/user';
import Button from '../ui/button/Button.vue'; import Button from '../ui/button/Button.vue';
import NavigationMenu from '../ui/navigation-menu/NavigationMenu.vue'; import NavigationMenu from '../ui/navigation-menu/NavigationMenu.vue';
import NavigationMenuList from '../ui/navigation-menu/NavigationMenuList.vue'; import NavigationMenuList from '../ui/navigation-menu/NavigationMenuList.vue';
import NavigationMenuItem from '../ui/navigation-menu/NavigationMenuItem.vue'; import NavigationMenuItem from '../ui/navigation-menu/NavigationMenuItem.vue';
import NavigationMenuLink from '../ui/navigation-menu/NavigationMenuLink.vue'; import NavigationMenuLink from '../ui/navigation-menu/NavigationMenuLink.vue';
import NavigationMenuTrigger from '../ui/navigation-menu/NavigationMenuTrigger.vue'; import NavigationMenuTrigger from '../ui/navigation-menu/NavigationMenuTrigger.vue';
import NavigationMenuContent from '../ui/navigation-menu/NavigationMenuContent.vue'; import NavigationMenuContent from '../ui/navigation-menu/NavigationMenuContent.vue';
import { navigationMenuTriggerStyle } from '../ui/navigation-menu/' import { navigationMenuTriggerStyle } from '../ui/navigation-menu/'
import { useAuth } from '@/composables/useAuth'; import { useAuth } from '@/composables/useAuth';
import { ArrowUpRight, ChevronDown, ChevronUp, CircleArrowOutUpRight, LogIn, LogOut, Menu, Settings, X } from 'lucide-vue-next'; import { ArrowUpRight, ChevronDown, ChevronUp, CircleArrowOutUpRight, LogIn, LogOut, Menu, Settings, X } from 'lucide-vue-next';
import DropdownMenuGroup from '../ui/dropdown-menu/DropdownMenuGroup.vue'; import DropdownMenuGroup from '../ui/dropdown-menu/DropdownMenuGroup.vue';
import DropdownMenuSeparator from '../ui/dropdown-menu/DropdownMenuSeparator.vue'; import DropdownMenuSeparator from '../ui/dropdown-menu/DropdownMenuSeparator.vue';
import { MemberState } from '@shared/types/member'; import { MemberState } from '@shared/types/member';
import { computed, nextTick, ref } from 'vue'; import { computed, nextTick, ref } from 'vue';
const userStore = useUserStore(); const userStore = useUserStore();
const auth = useAuth(); const auth = useAuth();
//@ts-ignore //@ts-ignore
const APIHOST = import.meta.env.VITE_APIHOST; const APIHOST = import.meta.env.VITE_APIHOST;
//@ts-ignore //@ts-ignore
const DOCHOST = import.meta.env.VITE_DOCHOST; const DOCHOST = import.meta.env.VITE_DOCHOST;
async function logout() { async function logout() {
userStore.user = null; userStore.user = null;
window.location.href = APIHOST + "/logout"; window.location.href = APIHOST + "/logout";
} }
function blurAfter() { function blurAfter() {
requestAnimationFrame(() => { requestAnimationFrame(() => {
(document.activeElement as HTMLElement)?.blur(); (document.activeElement as HTMLElement)?.blur();
}); });
} }
type NavItem = { type NavItem = {
title: string; title: string;
to?: string; to?: string;
href?: string; href?: string;
@@ -51,9 +51,9 @@ type NavItem = {
isExternal?: boolean; isExternal?: boolean;
roles?: string[]; roles?: string[];
items?: NavItem[]; items?: NavItem[];
}; };
const navConfig: NavItem[] = [ const navConfig: NavItem[] = [
{ {
title: 'Calendar', title: 'Calendar',
to: '/calendar', to: '/calendar',
@@ -92,6 +92,10 @@ const navConfig: NavItem[] = [
to: '/administration/applications', to: '/administration/applications',
roles: ['Recruiter'] roles: ['Recruiter']
}, },
{
title: 'Member Management',
to: '/administration/members',
},
{ {
title: 'Role Management', title: 'Role Management',
to: '/administration/roles', to: '/administration/roles',
@@ -99,14 +103,19 @@ const navConfig: NavItem[] = [
}, },
] ]
}, },
{
title: 'Developer',
to: '/developer',
roles: ['Dev']
},
{ {
title: 'Join', title: 'Join',
to: '/join', to: '/join',
status: 'guest', status: 'guest',
}, },
]; ];
const filteredNav = computed(() => { const filteredNav = computed(() => {
return navConfig.flatMap(item => { return navConfig.flatMap(item => {
const filtered: NavItem[] = []; const filtered: NavItem[] = [];
@@ -121,10 +130,10 @@ const filteredNav = computed(() => {
shouldShow = true; shouldShow = true;
} else if (item.status === 'guest') { } else if (item.status === 'guest') {
// Show if NOT logged in OR logged in as guest (but NOT a member) // Show if NOT logged in OR logged in as guest (but NOT a member)
shouldShow = !isLoggedIn || auth.accountStatus.value === 'guest'; shouldShow = !isLoggedIn || auth.accountStatus.value === MemberState.Guest;
} else if (item.status === 'member') { } else if (item.status === 'member') {
// Show ONLY if logged in as member // Show ONLY if logged in as member
shouldShow = isLoggedIn && auth.accountStatus.value === 'member'; shouldShow = isLoggedIn && auth.accountStatus.value === MemberState.Member;
} }
// 3. Check Role Requirements (if status check passed) // 3. Check Role Requirements (if status check passed)
@@ -145,27 +154,27 @@ const filteredNav = computed(() => {
return filtered; return filtered;
}); });
}) })
const isMobileMenuOpen = ref(false); const isMobileMenuOpen = ref(false);
const expandedMenu = ref(null); const expandedMenu = ref(null);
const router = useRouter(); const router = useRouter();
function openMobileMenu() { function openMobileMenu() {
expandedMenu.value = null; expandedMenu.value = null;
isMobileMenuOpen.value = true; isMobileMenuOpen.value = true;
} }
function closeMobileMenu() { function closeMobileMenu() {
isMobileMenuOpen.value = false; isMobileMenuOpen.value = false;
expandedMenu.value = null; expandedMenu.value = null;
} }
function mobileNavigateTo(to: string) { function mobileNavigateTo(to: string) {
closeMobileMenu(); closeMobileMenu();
router.push(to); router.push(to);
} }
</script> </script>
<template> <template>
@@ -177,7 +186,8 @@ function mobileNavigateTo(to: string) {
<img src="/17RBN_Logo.png" class="w-10 h-10 object-contain"></img> <img src="/17RBN_Logo.png" class="w-10 h-10 object-contain"></img>
</RouterLink> </RouterLink>
<!-- Member navigation --> <!-- 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> <NavigationMenu>
<NavigationMenuList class="gap-3"> <NavigationMenuList class="gap-3">