fix/fixed navbar pop-up element shadow

src/public/scripts/footer.js

@@ -25,3 +25,39 @@ factSubmitButton.addEventListener("click", () => {
         Swal.fire('Error fetching fact', 'Please try again later', 'error');
     });
 });
+
+document.addEventListener("DOMContentLoaded", () => {
+    const drawer = document.getElementById("drawer-navigation");
+    const toggle = document.getElementById("drawer-toggle");
+
+    function openDrawer() {
+        drawer.classList.remove("translate-x-full");
+
+        // Add backdrop
+        const backdrop = document.createElement("div");
+        backdrop.className = "fixed inset-0 bg-gray-900/50 z-30 drawer-backdrop";
+        document.body.appendChild(backdrop);
+
+        // Optional: prevent scroll
+        document.body.classList.add("overflow-hidden");
+
+        backdrop.addEventListener("click", closeDrawer);
+    }
+
+    function closeDrawer() {
+        drawer.classList.add("translate-x-full");
+
+        const backdrop = document.querySelector(".drawer-backdrop");
+        if (backdrop) backdrop.remove();
+
+        document.body.classList.remove("overflow-hidden");
+    }
+
+    toggle.addEventListener("click", openDrawer);
+
+    // Also close on X button if needed
+    const closeBtn = drawer.querySelector("[data-drawer-hide]");
+    if (closeBtn) {
+        closeBtn.addEventListener("click", closeDrawer);
+    }
+});

src/views/partials/footer.ejs

@@ -13,7 +13,7 @@
     </div>
 
     <footer class="mt-16">
-        <div class="fixed bottom-0 left-0 z-50 hidden lg:block w-full h-16 bg-gray-800 border-t border-gray-700 p-6 text-center text-gray-400 text-sm">
+        <div class="fixed bottom-0 left-0 z-30 hidden lg:block w-full h-16 bg-gray-800 border-t border-gray-700 p-6 text-center text-gray-400 text-sm">
             <div class="container mx-auto">
                 <p>&copy; 2025 RCalculator. All rights reserved.</p>
             </div>

src/views/partials/header.ejs

@@ -1,6 +1,6 @@
 
 <header>
-    <nav class="fixed bg-gray-800 border-b border-gray-700 z-50">
+    <nav class="fixed bg-gray-800 border-b border-gray-700 z-30">
         <div class="w-screen flex flex-col md:flex-row flex-wrap items-center justify-between p-3">
             <a href="/home" class="flex xl:w-[320px] items-center space-x-3 rtl:space-x-reverse">
                 <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/rekor.png" class="h-8" alt="Flowbite Logo" />
@@ -86,7 +86,7 @@
                     </li>
                     <li>
                         <div class="text-center">
-                            <button class="flex flex-row text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm focus:outline-none dark:focus:ring-blue-800" type="button" data-drawer-target="drawer-navigation" data-drawer-show="drawer-navigation" data-drawer-placement="right" aria-controls="drawer-navigation">
+                            <button class="flex flex-row text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm focus:outline-none dark:focus:ring-blue-800" type="button" id="drawer-toggle" data-drawer-target="drawer-navigation" data-drawer-placement="right" aria-controls="drawer-navigation">
                                 <svg class="w-[30px] h-[30px] text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                                     <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
                                 </svg>
@@ -101,7 +101,9 @@
             </div>
 
             <!-- drawer component -->
-            <div id="drawer-navigation" class="hidden lg:block fixed top-0 right-0 z-40 w-64 h-screen p-4 overflow-y-auto transition-transform translate-x-full bg-white dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-navigation-label">
+        </div>
+    </nav>
+    <div id="drawer-navigation" class="lg:block fixed top-0 right-0 z-60 w-64 h-screen p-4 overflow-y-auto transition-transform translate-x-full bg-white dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-navigation-label">
         <h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400"><%= user.name %></h5>
         <button type="button" data-drawer-hide="drawer-navigation" aria-controls="drawer-navigation" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 end-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" >
             <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
@@ -144,6 +146,4 @@
             </ul>
         </div>
     </div>
-        </div>
-    </nav>
 </header>