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

Fixed a bunch of issues with the navbar for different devices
All checks were successful
Pull Request CI / Merge Check (pull_request) Successful in 4m27s
Details

Browse Source
This commit is contained in:
ajdj100
2026-03-22 13:15:53 -04:00
parent 93c8f3a35c
commit 2db22f9955
1 changed files with 44 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,7 +22,7 @@
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 { computed, onBeforeUnmount, ref, watch } from 'vue';
const userStore = useUserStore();
const auth = useAuth();
@@ -175,6 +175,35 @@
closeMobileMenu();
router.push(to);
}
function lockDocumentScroll() {
document.documentElement.style.overflow = 'hidden';
document.documentElement.style.overscrollBehavior = 'none';
document.body.style.overflow = 'hidden';
document.body.style.overscrollBehavior = 'none';
document.body.style.touchAction = 'none';
}
function unlockDocumentScroll() {
document.documentElement.style.overflow = '';
document.documentElement.style.overscrollBehavior = '';
document.body.style.overflow = '';
document.body.style.overscrollBehavior = '';
document.body.style.touchAction = '';
}
watch(isMobileMenuOpen, (isOpen) => {
if (isOpen) {
lockDocumentScroll();
return;
}
unlockDocumentScroll();
});
onBeforeUnmount(() => {
unlockDocumentScroll();
});
</script>
<template>
@@ -339,7 +368,7 @@
</div>
<!-- mobile navigation -->
<div class="flex flex-col lg:hidden w-full" :class="isMobileMenuOpen ? 'h-screen' : ''">
<div class="flex flex-col lg:hidden w-full">
<div class="flex items-center justify-between w-full p-2">
<!-- <RouterLink to="/">
<img src="/17RBN_Logo.png" class="w-10 h-10 object-contain"></img>
@@ -355,8 +384,18 @@
<X class="size-7" />
</Button>
</div>
<div v-if="isMobileMenuOpen" class="flex flex-col h-[calc(100dvh-60px)] overflow-hidden">
<div class="flex-1 overflow-y-auto px-2 py-3 space-y-0.5">
<div v-if="isMobileMenuOpen" class="fixed inset-0 z-[70] flex flex-col overflow-hidden bg-background"
:style="{ paddingBottom: 'env(safe-area-inset-bottom)' }">
<div class="flex items-center justify-between w-full border-b bg-background p-2">
<button @click="mobileNavigateTo('/')">
<img src="/17RBN_Logo.png" class="w-10 h-10 object-contain"></img>
</button>
<Button variant="ghost" size="icon" @click="closeMobileMenu()">
<X class="size-7" />
</Button>
</div>
<div class="flex-1 overflow-y-auto overscroll-contain px-2 py-3 space-y-0.5">
<div v-for="navItem in filteredNav" :key="navItem.title" class="group">
<template v-if="!navItem.items">
@@ -394,7 +433,7 @@
</div>
</div>
<div class="p-3 border-t bg-background mt-auto">
<div class="p-3 border-t bg-background mt-auto" :style="{ paddingBottom: 'max(0.75rem, env(safe-area-inset-bottom))' }">
<div v-if="userStore.isLoggedIn" class="space-y-3">
<div class="flex items-center justify-between px-2">
<div class="flex gap-3">