i forgot

src/app/components/Navbar.js

@@ -1,10 +1,21 @@
+"use client"
+
+import { useState } from "react";
 import Image from "next/image";
-import Link from 'next/link'
+import Link from "next/link";
 import styles from "./Navbar.module.css";
 import logo from "../assets/logo.svg";
 import menu from "../assets/menu.svg";
+import close from "../assets/close.svg"
 
 export default function Navbar() {
+  const [isActive, setActive] = useState("false");
+
+  function handleToggle() {
+    setActive(!isActive);
+    console.log("asdhjiuashd")
+  }
+
   return (
     <nav className={`${styles.navbar} shadow`}>
       <div className={`${styles.container} container`}>
@@ -14,11 +25,11 @@ export default function Navbar() {
               <Image src={logo} width="32" height="32" alt="Logo" />
             </Link>
           </div>
-          <button className={styles.menuIcon} aria-label="Menu">
-            <Image src={menu} width="32" height="32" alt="Menu" />
+          <button className={styles.menuIcon} aria-label="Menu" onClick={handleToggle}>
+            <Image src={isActive ? menu : close} width="32" height="32" alt="Menu" />
           </button>
         </div>
-        <ul className={styles.links}>
+        <ul className={`${styles.links} ${isActive ? "" : styles.active }`}>
           <li>
             <Link href="/" className={styles.active}>
               Home
@@ -30,7 +41,7 @@ export default function Navbar() {
           <li>
             <a href="gallery.html">Gallery</a>
           </li>
-          <li>
+          <li className={styles.last}>
             <Link href="/contact">Contact Us</Link>
           </li>
         </ul>