feat: implement mobile menu toggle functionality in Nav component

Author: mrepol742

src/app/components/Nav.tsx

@@ -1,7 +1,12 @@
+"use client"
+
 import Image from "next/image";
 import Link from "next/link";
+import { useState } from "react";
 
 export default function Nav() {
+  const [toggleMenu, setToggleMenu] = useState(false);
+
   return (
     <nav className="bg-white dark:bg-gray-900 max-w-full z-20 top-0 start-0">
       <div className="flex flex-wrap items-center justify-between mx-auto pt-5 pb-5 pl-4 pr-4">
@@ -51,6 +56,7 @@ export default function Nav() {
           </button>
 
           <button
+            onClick={() => setToggleMenu(!toggleMenu)}
             data-collapse-toggle="navbar-sticky"
             type="button"
             className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-900 dark:focus:ring-gray-600"
@@ -76,7 +82,7 @@ export default function Nav() {
           </button>
         </div>
         <div
-          className="items-center justify-between w-full md:flex md:w-auto md:order-1"
+          className={`${toggleMenu ? 'flex' : 'hidden'} items-center justify-between w-full md:flex md:w-auto md:order-1`}
           id="navbar-sticky"
         >
           <ul className="flex flex-col w-full p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-900 md:bg-gray-900 dark:border-gray-700">