Update home menu menjadi lebih oke

Author: jujun-jamaludin

package.json

@@ -14,6 +14,7 @@
     "@astrojs/sitemap": "^3.3.0",
     "@tailwindcss/vite": "^4.1.4",
     "astro": "^5.7.2",
+    "simple-icons": "^16.0.0",
     "swiper": "^12.0.3",
     "tailwindcss": "^4.1.4"
   },

src/components/Header.astro

@@ -58,20 +58,86 @@ import { SITE_TITLE } from "../consts";
   </div>
 </header>
 
-<!-- Mobile Menu (Dropdown) -->
-<div id="mobile-menu" class="md:hidden hidden px-4 pb-4">
-  <nav class="flex flex-col space-y-2">
-    <a href="/" class="text-gray-700 hover:text-blue-600">Home</a>
-  </nav>
+<!-- Mobile Menu Overlay -->
+<div id="menu-overlay" class="fixed inset-0 bg-black bg-opacity-0 z-40 hidden transition-opacity duration-300"></div>
+
+<!-- Mobile Menu (Slide from Right) -->
+<div id="mobile-menu" class="fixed top-0 right-0 h-full w-full sm:w-80 bg-white dark:bg-gray-900 shadow-xl z-50 transform translate-x-full transition-transform duration-300 ease-in-out">
+  <div class="flex flex-col h-full">
+    <!-- Menu Header -->
+    <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+      <h2 class="text-xl font-bold text-gray-900 dark:text-white">Menu</h2>
+      <button id="menu-close" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
+        <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>
+      </button>
+    </div>
+
+    <!-- Menu Content -->
+    <nav class="flex-1 overflow-y-auto p-4">
+      <div class="flex flex-col space-y-4">
+        <a href="/" class="text-lg text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 py-2 border-b border-gray-200 dark:border-gray-700">Home</a>
+        <a href="/blog" class="text-lg text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 py-2 border-b border-gray-200 dark:border-gray-700">Blog</a>
+        <a href="/produk" class="text-lg text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 py-2 border-b border-gray-200 dark:border-gray-700">Produk</a>
+        <a href="/about" class="text-lg text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 py-2 border-b border-gray-200 dark:border-gray-700">About</a>
+      </div>
+    </nav>
+  </div>
 </div>
 
 <header>
   <script type="module">
     const menuToggle = document.getElementById("menu-toggle");
+    const menuClose = document.getElementById("menu-close");
     const mobileMenu = document.getElementById("mobile-menu");
+    const menuOverlay = document.getElementById("menu-overlay");
+
+    function openMenu() {
+      // Show overlay
+      menuOverlay.classList.remove("hidden");
+      // Trigger reflow for animation
+      menuOverlay.offsetHeight;
+      menuOverlay.classList.remove("bg-opacity-0");
+      menuOverlay.classList.add("bg-opacity-50");
+
+      // Slide menu in
+      mobileMenu.classList.remove("translate-x-full");
+
+      // Prevent body scroll
+      document.body.style.overflow = "hidden";
+    }
+
+    function closeMenu() {
+      // Slide menu out
+      mobileMenu.classList.add("translate-x-full");
+
+      // Hide overlay
+      menuOverlay.classList.remove("bg-opacity-50");
+      menuOverlay.classList.add("bg-opacity-0");
+
+      // Wait for animation to complete before hiding
+      setTimeout(() => {
+        menuOverlay.classList.add("hidden");
+      }, 300);
+
+      // Restore body scroll
+      document.body.style.overflow = "";
+    }
+
+    // Open menu
+    menuToggle.addEventListener("click", openMenu);
+
+    // Close menu via close button
+    menuClose.addEventListener("click", closeMenu);
+
+    // Close menu when clicking overlay
+    menuOverlay.addEventListener("click", closeMenu);
 
-    menuToggle.addEventListener("click", () => {
-      mobileMenu.classList.toggle("hidden");
+    // Close menu when clicking menu links
+    const menuLinks = mobileMenu.querySelectorAll("a");
+    menuLinks.forEach(link => {
+      link.addEventListener("click", closeMenu);
     });
   </script>