home page mobile menu navigation added

amankumarconnect · Oct 3, 2024 · 96ecd80 · 96ecd80
1 parent a8465dd
commit 96ecd80
Showing 1 changed file with 26 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -98,11 +98,16 @@
     <nav class="bg-gray-800 p-4">
         <div class="container mx-auto flex justify-between items-center">
             <!-- Logo -->
-            <a class="text-green-500 text-2xl font-bold" href="#">Lisbook</a>
+            <a class="text-green-500 text-2xl font-bold" href="./index.html">Lisbook</a>
 
             <!-- Menu Links and Theme Toggle -->
-            <div class="flex items-center space-x-4">
-                <a href="#" class="text-gray-300 hover:text-green-500">Home</a>
+            <div id="menu" class="fixed inset-0 bg-gray-900 w-full h-full flex flex-col items-center justify-center space-y-8 transform scale-0 transition-transform duration-300 ease-in-out lg:relative lg:flex lg:items-end lg:justify-end lg:space-y-0 lg:bg-transparent lg:scale-100 lg:flex-row lg:space-x-4">
+                <div id="menu-close" class="text-gray-300 lg:hidden absolute top-5 right-5 cursor-pointer">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </div>
+                <a href="./index.html" class="text-gray-300 hover:text-green-500">Home</a>
                 <a href="./pbd.html" class="text-gray-300 hover:text-green-500">Next</a>
                 <a href="./index.html" class="text-gray-300 hover:text-green-500">Previous</a>
                 <button id="theme-toggle" class="text-gray-300 hover:text-green-500">
@@ -200,12 +205,22 @@ <h2 class="text-center text-2xl mb-6">Share Your Thoughts</h2>
             const playlistItems = document.querySelectorAll('#playlist li');
             const audioPlayer = document.getElementById('audio-player');
             const themeToggle = document.getElementById('theme-toggle');
+            const menuToggle = document.getElementById("menu-toggle");
+            const menuClose = document.getElementById("menu-close");
+            const menu = document.getElementById("menu");
             const body = document.body;
 
             // Theme toggle
             themeToggle.addEventListener('click', function() {
                 body.classList.toggle('light-theme');
                 body.classList.toggle('dark-theme');
+                if (body.classList.contains("light-theme")) {
+                  menu.classList.remove("bg-gray-900", "text-gray-300");
+                  menu.classList.add("bg-gray-100", "text-gray-800");
+                } else {
+                  menu.classList.remove("bg-gray-100", "text-gray-800");
+                  menu.classList.add("bg-gray-900", "text-gray-300");
+                }
             });
 
             // Playlist interaction
@@ -237,9 +252,14 @@ <h3 class="font-bold">${username}</h3>
             });
 
             // Mobile menu toggle
-            document.getElementById('menu-toggle').addEventListener('click', function () {
-                const menu = document.getElementById('menu');
-                menu.classList.toggle('hidden');
+            menuToggle.addEventListener("click", () => {
+                menu.classList.remove("scale-0");
+                menu.classList.add("scale-100");
+            });
+
+            menuClose.addEventListener("click", () => {
+                menu.classList.add("scale-0");
+                menu.classList.remove("scale-100");
             });
         });
     </script>