fix: Position mobile menu above footer using CSS

This commit addresses the issue with the mobile menu in LayoutMobileMenu.vue by implementing a CSS-based solution to position the menu above the footer. The changes include:

Remove JavaScript-based height calculations
Add CSS positioning for the mobile menu to prevent footer overlap
Simplify component logic for toggling menu visibility
Ensure menu is scrollable when content exceeds available height
Maintain proper opening and closing functionality
The mobile menu now extends from the top of the screen to just above the footer, allowing users to close it by clicking the hamburger icon or selecting a menu item. The footer remains visible and accessible at all times.

Note: The CSS values for bottom spacing and max-height may need adjustment based on the actual footer height in the application.

This fix improves the user experience by ensuring the mobile menu is always accessible and doesn't interfere with the footer content.

Author: w3bdesign

components/Layout/LayoutMobileMenu.vue

@@ -1,32 +1,34 @@
 <template>
   <div class="relative">
-    <div
-      v-if="!firstRender"
-      class="fixed top-0 left-0 h-[580px] w-screen mt-4 z-0 bg-white animate__animated"
-      :class="{
-        animate__fadeInLeft: expandedMenu,
-        animate__fadeOutRight: !expandedMenu && !firstRender,
-      }"
+    <Transition
+      enter-active-class="animate__animated animate__fadeInLeft"
+      leave-active-class="animate__animated animate__fadeOutRight"
     >
-      <ul>
-        <li class="text-xl linkStyle">
-          <NuxtLink to="/" @click="displayMobileMenu"> Home </NuxtLink>
-        </li>
-        <li class="text-xl linkStyle">
-          <NuxtLink to="/products" @click="displayMobileMenu">
-            Products
-          </NuxtLink>
-        </li>
-        <li class="text-xl linkStyle">
-          <NuxtLink to="/categories" @click="displayMobileMenu">
-            Categories
-          </NuxtLink>
-        </li>
-        <li class="text-xl linkStyle">
-          <NuxtLink to="/search" @click="displayMobileMenu"> Search </NuxtLink>
-        </li>
-      </ul>
-    </div>
+      <div
+        v-if="expandedMenu"
+        ref="mobileMenu"
+        class="fixed left-0 w-screen z-10 bg-white overflow-y-auto mobile-menu"
+      >
+        <ul>
+          <li class="text-xl linkStyle">
+            <NuxtLink to="/" @click="displayMobileMenu"> Home </NuxtLink>
+          </li>
+          <li class="text-xl linkStyle">
+            <NuxtLink to="/products" @click="displayMobileMenu">
+              Products
+            </NuxtLink>
+          </li>
+          <li class="text-xl linkStyle">
+            <NuxtLink to="/categories" @click="displayMobileMenu">
+              Categories
+            </NuxtLink>
+          </li>
+          <li class="text-xl linkStyle">
+            <NuxtLink to="/search" @click="displayMobileMenu"> Search </NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </Transition>
     <div class="w-5/12 lg:hidden" />
     <div class="flex flex-row w-2/12 px-2 my-2 lg:hidden">
       <div class="self-center block w-full mr-4">
@@ -48,16 +50,24 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
+
 const expandedMenu = useState("expandedMenu", () => false);
-const firstRender = useState("firstRender", () => true);
+const mobileMenu = ref(null);
 
 const displayMobileMenu = () => {
   expandedMenu.value = !expandedMenu.value;
-  firstRender.value = false;
 };
 </script>
 
 <style scoped>
+/* Mobile menu positioning */
+.mobile-menu {
+  top: 0;
+  bottom: 80px; /* Adjust this value to match your footer height */
+  max-height: calc(100vh - 80px); /* Adjust this value to match your footer height */
+}
+
 /* Style for mobile menu links */
 .linkStyle {
   @apply w-auto p-4 m-4 font-bold text-center border border-gray-300 border-opacity-50 shadow-md rounded;