Toggle mobile menu on click

Sebstep · Oct 8, 2023 · f8a9aa9 · f8a9aa9
1 parent 13598bb
commit f8a9aa9
Showing 1 changed file with 36 additions and 1 deletion.
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
@@ -1,6 +1,14 @@
+"use client";
 import React from "react";
 import Link from "next/link";
 
+const toggleMobileMenu = () => {
+  const mobileMenu = document.querySelector(".mobile-menu");
+  if (mobileMenu) {
+    mobileMenu.classList.toggle("hidden");
+  }
+};
+
 export default function Navigation() {
   return (
     <nav className="bg-blue-500 p-4">
@@ -19,9 +27,36 @@ export default function Navigation() {
           </div>
           <div className="md:hidden">
             {/* Mobile menu button */}
-            {/* Add your mobile menu button here */}
+            <button
+              className="text-white p-2 focus:outline-none"
+              onClick={toggleMobileMenu}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            </button>
           </div>
         </div>
+        {/* Mobile menu */}
+        <div className="mobile-menu hidden md:hidden mt-2 space-y-2">
+          <Link href="/chat" className="text-white hover:text-gray-300 block">
+            Chat
+          </Link>
+          <Link href="/about" className="text-white hover:text-gray-300 block">
+            About
+          </Link>
+        </div>
       </div>
     </nav>
   );