Skip to content

Commit e2d9c47

Browse files
amandeeep02amandeeep02
committed
Removed the extra portion of the navbar and aligned it
1 parent c2a84aa commit e2d9c47

File tree

1 file changed

+94
-52
lines changed

1 file changed

+94
-52
lines changed

‎src/components/Navbar.jsx

Lines changed: 94 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,110 @@
11
import React, { useState, useRef, useEffect } from "react";
22
import { NavLink, useLocation } from "react-router-dom";
3-
import ThemeToggle from './ThemeToggle';
4-
import './Navbar.css';
3+
import ThemeToggle from "./ThemeToggle";
4+
import "./Navbar.css";
55

66
const Navbar = () => {
7-
const location = useLocation();
8-
const [isMenuOpen, setMenuOpen] = useState(false);
9-
const menuRef = useRef(null);
7+
const location = useLocation();
8+
const [isMenuOpen, setMenuOpen] = useState(false);
9+
const menuRef = useRef(null);
1010

11-
const isActive = (path) => location.pathname === path ? 'text-[#00bfff] underline' : '';
11+
const isActive = (path) =>
12+
location.pathname === path ? "text-[#00bfff] underline" : "";
1213

13-
const handleLinkClick = () => {
14+
const handleLinkClick = () => {
15+
setMenuOpen(false);
16+
};
17+
18+
useEffect(() => {
19+
const handleClickOutside = (event) => {
20+
if (menuRef.current && !menuRef.current.contains(event.target)) {
1421
setMenuOpen(false);
22+
}
1523
};
1624

17-
useEffect(() => {
18-
const handleClickOutside = (event) => {
19-
if (menuRef.current && !menuRef.current.contains(event.target)) {
20-
setMenuOpen(false);
21-
}
22-
};
23-
24-
document.addEventListener("mousedown", handleClickOutside);
25-
return () => {
26-
document.removeEventListener("mousedown", handleClickOutside);
27-
};
28-
}, []);
25+
document.addEventListener("mousedown", handleClickOutside);
26+
return () => {
27+
document.removeEventListener("mousedown", handleClickOutside);
28+
};
29+
}, []);
2930

3031
return (
31-
<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">
32-
<style>
33-
{`@import url('https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css');`}
34-
</style>
35-
<button
36-
className="block md:hidden p-2 ml-auto"
37-
onClick={() => setMenuOpen(!isMenuOpen)}
38-
aria-label="Toggle navigation menu"
32+
<nav
33+
ref={menuRef}
34+
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"
35+
>
36+
<style>
37+
{`@import url('https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css');`}
38+
</style>
39+
<button
40+
className="block md:hidden p-2 mx-0 my-0"
41+
onClick={() => setMenuOpen(!isMenuOpen)}
42+
aria-label="Toggle navigation menu"
43+
>
44+
<a
45+
href="/"
46+
className="mr-[12rem] md:hidden text-white text-2xl font-bold"
3947
>
40-
<a href='/' className="mr-[12rem] md:hidden text-white text-2xl font-bold">TimeWarp</a>
41-
{ !isMenuOpen ? <i className="ri-menu-line text-white text-2xl"></i> : <i className="fa-solid fa-xmark text-2xl"></i>}
42-
</button>
43-
<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`}>
44-
<li className="text-center md:text-left">
45-
<NavLink to="/" className={isActive('/')} onClick={handleLinkClick}><i className="ri-home-fill"></i> Home</NavLink>
46-
</li>
47-
<li className="text-center md:text-left">
48-
<NavLink to="/AboutUs" className={isActive('/AboutUs')} onClick={handleLinkClick}><i className="ri-building-fill"></i> About Us</NavLink>
49-
</li>
50-
<li className="text-center md:text-left">
51-
<NavLink to="/DemoSection" className={isActive('/DemoSection')} onClick={handleLinkClick}><i className="ri-service-fill"></i> Demo Section</NavLink>
52-
</li>
53-
<li className="text-center md:text-left">
54-
<NavLink to="/Models" className={isActive('/Models')} onClick={handleLinkClick}><i className="ri-layout-2-fill"></i> Models</NavLink>
55-
</li>
56-
<li className="text-center md:text-left">
57-
<NavLink to="/ContactUs" className={isActive('/ContactUs')} onClick={handleLinkClick}><i className="ri-customer-service-2-fill"></i> Contact Us</NavLink>
58-
</li>
59-
<li className="text-center md:text-left">
60-
<ThemeToggle />
61-
</li>
62-
</ul>
48+
TimeWarp
49+
</a>
50+
{!isMenuOpen ? (
51+
<i className="ri-menu-line text-white text-2xl"></i>
52+
) : (
53+
<i className="fa-solid fa-xmark text-2xl"></i>
54+
)}
55+
</button>
56+
<ul
57+
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 ${
58+
isMenuOpen ? "navbar-list-active" : ""
59+
} 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`}
60+
>
61+
<li className="text-center md:text-left">
62+
<NavLink to="/" className={isActive("/")} onClick={handleLinkClick}>
63+
<i className="ri-home-fill"></i> Home
64+
</NavLink>
65+
</li>
66+
<li className="text-center md:text-left">
67+
<NavLink
68+
to="/AboutUs"
69+
className={isActive("/AboutUs")}
70+
onClick={handleLinkClick}
71+
>
72+
<i className="ri-building-fill"></i> About Us
73+
</NavLink>
74+
</li>
75+
<li className="text-center md:text-left">
76+
<NavLink
77+
to="/DemoSection"
78+
className={isActive("/DemoSection")}
79+
onClick={handleLinkClick}
80+
>
81+
<i className="ri-service-fill"></i> Demo Section
82+
</NavLink>
83+
</li>
84+
<li className="text-center md:text-left">
85+
<NavLink
86+
to="/Models"
87+
className={isActive("/Models")}
88+
onClick={handleLinkClick}
89+
>
90+
<i className="ri-layout-2-fill"></i> Models
91+
</NavLink>
92+
</li>
93+
<li className="text-center md:text-left">
94+
<NavLink
95+
to="/ContactUs"
96+
className={isActive("/ContactUs")}
97+
onClick={handleLinkClick}
98+
>
99+
<i className="ri-customer-service-2-fill"></i> Contact Us
100+
</NavLink>
101+
</li>
102+
<li className="text-center md:text-left">
103+
<ThemeToggle />
104+
</li>
105+
</ul>
63106
</nav>
64-
65-
);
107+
);
66108
};
67109

68110
export default Navbar;

0 commit comments

Comments
 (0)