Skip to content

Commit

Permalink
Merge pull request #206 from irohanrajput/main
Browse files Browse the repository at this point in the history 
Implement dynamic active link color in NavBar based on route
  • Loading branch information
@Mr-Sunglasses
Mr-Sunglasses committed Oct 11, 2023
2 parents 62158d3 + e36f241 commit 510f5bd
Showing 1 changed file with 124 additions and 37 deletions.
161 changes: 124 additions & 37 deletions src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import React, { useState, useEffect } from "react";
import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
import { RiOpenSourceFill } from "react-icons/ri";
import { useLocation } from "react-router-dom";
import { Outlet, Link } from "react-router-dom";

const Navbar = () => {
const [size, setSize] = useState(window.innerWidth);
const location = useLocation();
const [activeLink, setActiveLink] = useState(location.pathname);

const checkSize = () => {
setSize(window.innerWidth);
};
useEffect(() => {
// console.log('useEffect');
window.addEventListener("resize", checkSize);
return () => {
console.log("cleanup");
Expand All @@ -23,56 +25,111 @@ const Navbar = () => {
const handleNav = () => {
setNav(!nav);
};
const handleLinkClick = (to) => {
setActiveLink(to);
};

return (
<>

<div className="flex justify-between items-center h-24 max-w-[1240px] mx-auto px-4 text-white">
<RiOpenSourceFill className="flex-shrink-0" size={31} color="green" />
<h1 className="w-full text-3xl font-bold text-[#0DFF1C] m-4">
{" "}
FOSSCU
</h1>
<ul className="hidden md:flex">
<li className="p-4 hover:text-[#0DFF1C]">
{" "}
<li
className={`p-4 ${
activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
}`}
>
<Link to="/"> Home </Link>{" "}
</li>
<li className="p-4 hover:text-[#0DFF1C]">
{" "}
<li
className={`p-4 ${
activeLink === "/about"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
}`}
>
<Link to="/about">About</Link>
</li>
<li className="p-4 hover:text-[#0DFF1C]">
{" "}
<li
className={`p-4 ${
activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
}`}
>
<Link to="/team"> Team </Link>{" "}
</li>

<li className="p-4 hover:text-[#0DFF1C] translate-x-[-3.2em] hidden absolute bg-white text-gray-900 rounded mt-1 w-48 group-hover:block hover:rounded-md">
<li
className={`p-4 ${
activeLink === "/resource"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} hover:text-[#0DFF1C] translate-x-[-3.2em] hidden absolute bg-white text-gray-900 rounded mt-1 w-48 group-hover:block hover:rounded-md `}
>
<a href="/resource">Resources</a>
</li>

<li className="p-4 hover:text-[#0DFF1C]">
<li
className={`p-4 ${
activeLink === "/contact"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} hover:text-[#0DFF1C]`}
>
<Link to="/contact">Contact</Link>
</li>

<div class="relative group xl:mr-0 mr-8">
<button
className=" px-4 pt-4 pb-0 hover:text-[#0DFF1C] flex items-center text-white ">
<span className="mr-1"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
</svg>
<button className=" px-4 pt-4 pb-0 hover:text-[#0DFF1C] flex items-center text-white ">
<span className="mr-1">
{" "}
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-chevron-down"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
/>
</svg>
</span>
<span>More</span>
</button>
<div
class="translate-x-[-0em] hidden absolute bg-black text-white rounded mt-1 w-36 group-hover:block hover:rounded-md ">
<a href="/resource" class="block px-4 py-2 hover:text-[#0dff1c]">Resources</a>
<a href="https://docs.fosscu.org" class="block px-4 py-2 hover:text-[#0dff1c]" target="blank">Handbook</a>
<a href="https://lu.ma/fosscu" rel="noreferrer" target="blank" class="block px-4 py-2 hover:text-[#0dff1c]">Calendar</a>
<a href="https://github.com/FOSS-Community/" target="blank" class="block px-4 py-2 hover:text-[#0dff1c]">Contribute</a>
<div class="translate-x-[-0em] hidden absolute bg-black text-white rounded mt-1 w-36 group-hover:block hover:rounded-md ">
<a href="/resource" class="block px-4 py-2 hover:text-[#0dff1c]">
Resources
</a>
<a
href="https://docs.fosscu.org"
class="block px-4 py-2 hover:text-[#0dff1c]"
target="blank"
>
Handbook
</a>
<a
href="https://lu.ma/fosscu"
rel="noreferrer"
target="blank"
class="block px-4 py-2 hover:text-[#0dff1c]"
>
Calendar
</a>
<a
href="https://github.com/FOSS-Community/"
target="blank"
class="block px-4 py-2 hover:text-[#0dff1c]"
>
Contribute
</a>
</div>
</div>

</ul>
<div onClick={handleNav} className="block md:hidden">
{nav ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
Expand All @@ -92,37 +149,67 @@ const Navbar = () => {
</h1>
</center>
<ul className="uppercase p-4">
<li className="p-4 border-b border-gray-600">
<Link to="/"> Home </Link>{" "}
<li
className={`p-4 ${
activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
} border-b border-gray-600 `}
>
<Link to="/" onClick={() => handleLinkClick("/")}>
{" "}
Home{" "}
</Link>{" "}
</li>
<li className="p-4 border-b border-gray-600">
<li
className={`p-4 ${
activeLink === "/about"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} border-b border-gray-600 `}
>
<Link to="/about">About</Link>
</li>
<li className="p-4 border-b border-gray-600">
<li
className={`p-4 ${
activeLink === "/team"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} border-b border-gray-600 `}
>
<Link to="/team"> Team </Link>{" "}
</li>
<li className="p-4 border-b border-gray-600 ">
<li
className={`p-4 ${
activeLink === "/resource"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} border-b border-gray-600 `}
>
<Link to="/resource">Resources</Link>{" "}
</li>
<li className="p-4 border-b border-gray-600 ">
<Link to="https://docs.fosscu.org">Handbook</Link>{" "}
<li className={`p-4 border-b border-gray-600 `}>
<a href="https://docs.fosscu.org">Handbook</a>{" "}
</li>
<li className="p-4 border-b border-gray-600">
<li className={`p-4 border-b border-gray-600 `}>
<a href="https://github.com/FOSS-Community">Projects</a>
</li>
<li className="p-4 border-b border-gray-600">
<li
className={`p-4 ${
activeLink === "/contact"
? "text-[#0DFF1C]"
: "hover:text-[#0DFF1C]"
} border-b border-gray-600 `}
>
<Link to="/contact">Contact</Link>
</li>
<li className="p-4 border-b border-gray-600">
<Link to="https://lu.ma/fosscu">Calender</Link>
<li className={`p-4 border-b border-gray-600 `}>
<a href="https://lu.ma/fosscu">Calender</a>
</li>
<li className="p-4 border-b border-gray-600">
<Link to="https://github.com/FOSS-Community/">Contribute</Link>
<li className={`p-4 border-b border-gray-600 `}>
<a href="https://github.com/FOSS-Community/">Contribute</a>
</li>

</ul>
</div>
</div >
</div>
<Outlet />
</>
);
Expand Down

0 comments on commit 510f5bd

Please sign in to comment.