From 1f8d10d5086c7b82d5b8cb2160d9f3529f2ace35 Mon Sep 17 00:00:00 2001
From: Saimanjari777 <psmanjari777@gmail.com>
Date: Tue, 14 May 2024 23:53:20 +0530
Subject: [PATCH] Hamburger issue solved

The hamburger menu is working perfectly when clicked on it.
---
 package-lock.json         | 19 -------------------
 src/components/Navbar.jsx | 40 +++++++++++++++++++++------------------
 2 files changed, 22 insertions(+), 37 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1f63512..654a2e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3026,19 +3026,6 @@
       "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
       "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ=="
     },
-    "node_modules/@types/three": {
-      "version": "0.164.0",
-      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.164.0.tgz",
-      "integrity": "sha512-SFDofn9dJVrE+1DKta7xj7lc4ru7B3S3yf10NsxOserW57aQlB6GxtAS1UK5To3LfEMN5HUHMu3n5v+M5rApgA==",
-      "peer": true,
-      "dependencies": {
-        "@tweenjs/tween.js": "~23.1.1",
-        "@types/stats.js": "*",
-        "@types/webxr": "*",
-        "fflate": "~0.8.2",
-        "meshoptimizer": "~0.18.1"
-      }
-    },
     "node_modules/@types/webxr": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.16.tgz",
@@ -5335,12 +5322,6 @@
         "jiti": "bin/jiti.js"
       }
     },
-    "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-      "peer": true
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 83134e1..5b1b008 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,38 +1,42 @@
- import React from "react";
+import React, { useState } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 
 const Navbar = () => {
     const location = useLocation();
+    const [isMenuOpen, setMenuOpen] = useState(false);  
 
     const isActive = (path) => location.pathname === path ? 'text-[#00bfff] underline' : 'text-white';
 
     return (
-        <nav className="z-50 h-16 flex justify-center sticky top-0 w-screen backdrop-filter backdrop-blur-lg bg-opacity-40 p-4">
+        <nav className="z-50 h-16 flex items-center justify-between sticky top-0 w-screen backdrop-filter backdrop-blur-lg bg-opacity-40 p-4">
             <style>
-                  @import url('https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css');
+                @import url('https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css');
             </style>
-            <ul className="flex flex-col md:flex-row justify-center items-center list-none m-0 p-4 gap-x-0 md:gap-x-10 text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-3xl">
-                <li className="hover:underline block md:hidden">
-                    <span className="fa fa-bars"></span>
+            <button 
+                className="block md:hidden p-2"
+                onClick={() => setMenuOpen(!isMenuOpen)}
+                aria-label="Toggle navigation menu"
+            >
+                <i className="ri-menu-line text-white text-2xl"></i>
+            </button>
+            <ul className={`absolute md:relative top-full left-0 md:left-auto md:top-auto w-full md:flex md:items-center md:justify-center  md:bg-transparent transition-all duration-300 ease-in-out ${isMenuOpen ? 'flex' : 'hidden'} flex-col md:flex-row list-none m-0 p-4 gap-x-10 text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-3xl`}>
+                <li className="hover:underline text-white md:text-black text-center md:text-left">
+                    <NavLink to="/" className={isActive('/')}><i className="ri-home-fill"></i> Home</NavLink>
                 </li>
-                <li className="hover:underline hidden md:block">
-                    <NavLink to="/" className={isActive('/')}><i class="ri-home-fill"></i> Home</NavLink>
+                <li className="hover:underline text-white md:text-black text-center md:text-left">
+                    <NavLink to="/AboutUs" className={isActive('/AboutUs')}><i className="ri-building-fill"></i> About Us</NavLink>
                 </li>
-                <li className="hover:underline hidden md:block">
-                    <NavLink to="/AboutUs" className={isActive('/AboutUs')}><i class="ri-building-fill"></i> About Us</NavLink>
+                <li className="hover:underline text-white md:text-black text-center md:text-left">
+                    <NavLink to="/DemoSection" className={isActive('/DemoSection')}><i className="ri-service-fill"></i> Demo Section</NavLink>
                 </li>
-                <li className="hover:underline hidden md:block">
-                    <NavLink to="/DemoSection" className={isActive('/DemoSection')}><i class="ri-service-fill"></i> Demo Section</NavLink>
+                <li className="hover:underline text-white md:text-black text-center md:text-left">
+                    <NavLink to="/Models" className={isActive('/Models')}><i className="ri-layout-2-fill"></i> Models</NavLink>
                 </li>
-                <li className="hover:underline hidden md:block">
-                    <NavLink to="/Models" className={isActive('/Models')}><i class="ri-layout-2-fill"></i> Models</NavLink>
-                </li>
-                <li className="hover:underline hidden md:block">
-                    <NavLink to="/ContactUs" className={isActive('/ContactUs')}><i class="ri-customer-service-2-fill"></i> Contact Us</NavLink>
+                <li className="hover:underline text-white md:text-black text-center md:text-left">
+                    <NavLink to="/ContactUs" className={isActive('/ContactUs')}><i className="ri-customer-service-2-fill"></i> Contact Us</NavLink>
                 </li>
             </ul>
         </nav>
-
     );
 };
 export default Navbar;