Fixed a bunch of issues with the navbar for different devices

ui/src/components/Navigation/Navbar.vue

@@ -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 v-if="isMobileMenuOpen" class="fixed inset-0 z-[70] flex flex-col overflow-hidden bg-background"
-                <div class="flex-1 overflow-y-auto px-2 py-3 space-y-0.5">
+                :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">