From 6204480337c1af916058abb7bd0c245b06ef1368 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Thu, 5 Sep 2024 05:22:39 +0200 Subject: [PATCH] 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. --- components/Layout/LayoutMobileMenu.vue | 66 +++++++++++++++----------- 1 file changed, 38 insertions(+), 28 deletions(-) diff --git a/components/Layout/LayoutMobileMenu.vue b/components/Layout/LayoutMobileMenu.vue index 943d383b..91305ef4 100644 --- a/components/Layout/LayoutMobileMenu.vue +++ b/components/Layout/LayoutMobileMenu.vue @@ -1,32 +1,34 @@