From e2d9c4757d51107a9f270ee50f24cf14f77d8e43 Mon Sep 17 00:00:00 2001
From: amandeeep02 <amandeepsr02@gmail.com>
Date: Fri, 5 Jul 2024 00:15:02 +0530
Subject: [PATCH] Removed the extra portion of the navbar and aligned it

---
 src/components/Navbar.jsx | 146 ++++++++++++++++++++++++--------------
 1 file changed, 94 insertions(+), 52 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 3989c2a..68ad8ed 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,68 +1,110 @@
 import React, { useState, useRef, useEffect } from "react";
 import { NavLink, useLocation } from "react-router-dom";
-import ThemeToggle from './ThemeToggle';
-import './Navbar.css';
+import ThemeToggle from "./ThemeToggle";
+import "./Navbar.css";
 
 const Navbar = () => {
-    const location = useLocation();
-    const [isMenuOpen, setMenuOpen] = useState(false);
-    const menuRef = useRef(null);
+  const location = useLocation();
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef(null);
 
-    const isActive = (path) => location.pathname === path ? 'text-[#00bfff] underline' : '';
+  const isActive = (path) =>
+    location.pathname === path ? "text-[#00bfff] underline" : "";
 
-    const handleLinkClick = () => {
+  const handleLinkClick = () => {
+    setMenuOpen(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
         setMenuOpen(false);
+      }
     };
 
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (menuRef.current && !menuRef.current.contains(event.target)) {
-                setMenuOpen(false);
-            }
-        };
-
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, []);
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
 
   return (
-    <nav ref={menuRef} className="z-50 lg:h-[7rem] flex items-center justify-between sticky w-screen backdrop-filter backdrop-blur-lg bg-opacity-40 p-4 navbar">
-        <style>
-            {`@import url('https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css');`}
-        </style>
-        <button 
-            className="block md:hidden p-2 ml-auto"
-            onClick={() => setMenuOpen(!isMenuOpen)}
-            aria-label="Toggle navigation menu"
+    <nav
+      ref={menuRef}
+      className="z-50 lg:h-[7rem] flex items-center justify-between sticky w-screen backdrop-filter backdrop-blur-lg bg-opacity-40 p-4 navbar"
+    >
+      <style>
+        {`@import url('https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css');`}
+      </style>
+      <button
+        className="block md:hidden p-2 mx-0 my-0"
+        onClick={() => setMenuOpen(!isMenuOpen)}
+        aria-label="Toggle navigation menu"
+      >
+        <a
+          href="/"
+          className="mr-[12rem] md:hidden text-white text-2xl font-bold"
         >
-            <a href='/' className="mr-[12rem] md:hidden text-white text-2xl font-bold">TimeWarp</a>
-        { !isMenuOpen ? <i className="ri-menu-line text-white text-2xl"></i> : <i className="fa-solid fa-xmark text-2xl"></i>}                 
-        </button>
-        <ul className={`absolute bg-black opacity-80 gap-5 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-500 ease-in-out navbar-list ${isMenuOpen ? 'navbar-list-active' : ''} 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="text-center md:text-left">
-                <NavLink to="/" className={isActive('/')} onClick={handleLinkClick}><i className="ri-home-fill"></i> Home</NavLink>
-            </li>
-            <li className="text-center md:text-left">
-                <NavLink to="/AboutUs" className={isActive('/AboutUs')} onClick={handleLinkClick}><i className="ri-building-fill"></i> About Us</NavLink>
-            </li>
-            <li className="text-center md:text-left">
-                <NavLink to="/DemoSection" className={isActive('/DemoSection')} onClick={handleLinkClick}><i className="ri-service-fill"></i> Demo Section</NavLink>
-            </li>
-            <li className="text-center md:text-left">
-                <NavLink to="/Models" className={isActive('/Models')} onClick={handleLinkClick}><i className="ri-layout-2-fill"></i> Models</NavLink>
-            </li>
-            <li className="text-center md:text-left">
-                <NavLink to="/ContactUs" className={isActive('/ContactUs')} onClick={handleLinkClick}><i className="ri-customer-service-2-fill"></i> Contact Us</NavLink>
-            </li>
-            <li className="text-center md:text-left">
-                <ThemeToggle /> 
-            </li>
-        </ul>
+          TimeWarp
+        </a>
+        {!isMenuOpen ? (
+          <i className="ri-menu-line text-white text-2xl"></i>
+        ) : (
+          <i className="fa-solid fa-xmark text-2xl"></i>
+        )}
+      </button>
+      <ul
+        className={`absolute bg-black opacity-80 gap-5 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-500 ease-in-out navbar-list ${
+          isMenuOpen ? "navbar-list-active" : ""
+        } flex-col md:flex-row list-none m-0 p-0 gap-x-10 text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-3xl`}
+      >
+        <li className="text-center md:text-left">
+          <NavLink to="/" className={isActive("/")} onClick={handleLinkClick}>
+            <i className="ri-home-fill"></i> Home
+          </NavLink>
+        </li>
+        <li className="text-center md:text-left">
+          <NavLink
+            to="/AboutUs"
+            className={isActive("/AboutUs")}
+            onClick={handleLinkClick}
+          >
+            <i className="ri-building-fill"></i> About Us
+          </NavLink>
+        </li>
+        <li className="text-center md:text-left">
+          <NavLink
+            to="/DemoSection"
+            className={isActive("/DemoSection")}
+            onClick={handleLinkClick}
+          >
+            <i className="ri-service-fill"></i> Demo Section
+          </NavLink>
+        </li>
+        <li className="text-center md:text-left">
+          <NavLink
+            to="/Models"
+            className={isActive("/Models")}
+            onClick={handleLinkClick}
+          >
+            <i className="ri-layout-2-fill"></i> Models
+          </NavLink>
+        </li>
+        <li className="text-center md:text-left">
+          <NavLink
+            to="/ContactUs"
+            className={isActive("/ContactUs")}
+            onClick={handleLinkClick}
+          >
+            <i className="ri-customer-service-2-fill"></i> Contact Us
+          </NavLink>
+        </li>
+        <li className="text-center md:text-left">
+          <ThemeToggle />
+        </li>
+      </ul>
     </nav>
-
-    );
+  );
 };
 
 export default Navbar;