Hamburger icon needs to be replaced with close icon #390

package.json

@@ -25,6 +25,7 @@
     "bcryptjs": "^2.4.3",
     "chart.js": "^4.4.3",
     "cookies-next": "^4.2.1",
+    "font-awesome": "^4.7.0",
     "framer-motion": "^11.2.6",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",

src/components/Navbar.tsx

@@ -285,23 +285,12 @@ function Navbar() {
           </div>
           <div className="lg:hidden">
             <button
-              className="btn btn-ghost btn-circle"
+              className={`btn btn-ghost btn-circle fa ${showHamburgerMenu?'fa-times':'fa-bars'}`}
+              // <i onClick={handleToggleHamburgerMenu}
+              // className={}
               onClick={handleToggleHamburgerMenu}
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M4 6h16M4 12h16m-7 6h7"
-                />
-              </svg>
+
             </button>
           </div>
         </div>

src/index.css

@@ -1,3 +1,4 @@
+@import 'font-awesome/css/font-awesome.min.css';
 @tailwind base;
 @tailwind components;
 @tailwind utilities;