Enhance NavbarComponent functionality: Add click outside detection to close the menu and improve responsiveness by adjusting styles for mobile view, ensuring better user experience and accessibility.

src/common/components/NavbarComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="navbar">
+  <nav class="navbar" ref="navRef">
     <button
       class="menu-toggle"
       type="button"
@@ -51,6 +51,7 @@ export default {
   name: 'NavbarComponent',
   setup() {
     const store = useStore();
+    const navRef = ref(null);
     const isMenuOpen = ref(false);
     const isSubmenuOpen = reactive({});
     const windowWidth = ref(window.innerWidth);
@@ -89,7 +90,16 @@ export default {
       Object.keys(isSubmenuOpen).forEach(key => {
         isSubmenuOpen[key] = false;
       });
-    }
+    };
+
+    const handleClickOutside = (event) => {
+      if (windowWidth.value > 768 || !isMenuOpen.value) {
+        return;
+      }
+      if (navRef.value && !navRef.value.contains(event.target)) {
+        closeMenu();
+      }
+    };
 
     const handleResize = () => {
       windowWidth.value = window.innerWidth;
@@ -103,13 +113,16 @@ export default {
 
     onMounted(() => {
       window.addEventListener('resize', handleResize);
+      document.addEventListener('click', handleClickOutside);
     });
 
     onBeforeUnmount(() => {
       window.removeEventListener('resize', handleResize);
+      document.removeEventListener('click', handleClickOutside);
     });
 
     return {
+      navRef,
       isMenuOpen,
       isSubmenuOpen,
       windowWidth,
@@ -254,12 +267,23 @@ export default {
 @media (max-width: 768px) {
   .navbar {
     flex-direction: column;
+    position: relative;
+    z-index: 20;
   }
 
   .navbar ul {
     flex-direction: column;
     align-items: stretch;
     gap: 0;
+    position: absolute;
+    top: calc(100% + var(--space-1));
+    left: 0;
+    right: 0;
+    max-height: min(70vh, 420px);
+    overflow-y: auto;
+    border-radius: 4px;
+    box-shadow: var(--shadow-dropdown);
+    background-color: var(--color-brand-primary);
   }
 
   .navbar li {