Updated navigation system for new stuff
This commit is contained in:
@@ -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">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user