Merge pull request #53 from ShivamKmishra09/master

Navbar fixed
pooranjoyb · Dec 30, 2023 · 8cf8426 · 8cf8426
2 parents af97a4a + e18fb41
commit 8cf8426
Showing 1 changed file with 54 additions and 21 deletions.
diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx
@@ -1,21 +1,20 @@
-import { useState, useEffect } from "react";
-import { FaHome, FaHashtag } from "react-icons/fa";
+import { FaHome } from "react-icons/fa";
 import { GrGallery } from "react-icons/gr";
 import { BsFillPeopleFill } from "react-icons/bs";
+import { FaHashtag } from "react-icons/fa";
 import Hamburger from "/hamburger.png";
-
+import { useState, useEffect } from "react";
+import { BiImages } from "react-icons/bi";
 export default function Navbar() {
   const [menuOpen, setMenuOpen] = useState(false);
   const [navbarColor, setNavbarColor] = useState("transparent");
-
   const toggleMenu = () => {
-    setMenuOpen((prevMenuOpen) => !prevMenuOpen);
+    setMenuOpen(!menuOpen);
   };
 
   const closeMenu = () => {
     setMenuOpen(false);
   };
-
   const handleScroll = () => {
     setNavbarColor(window.scrollY > 1300 ? "black" : "transparent");
   };
@@ -29,7 +28,7 @@ export default function Navbar() {
 
   return (
     <>
-      <div className="fixed inset-0 items-center text-center justify-center text-white z-[60] transition-all duration-300 ">
+      <div className="inset-0 items-center text-center justify-center text-white fixed top-0 z-50 w-full h-16">
         <div
           className={`pt-1 pb-1 flex flex-row justify-between  backdrop-blur-md ${navbarColor}`}
         >
@@ -42,8 +41,10 @@ export default function Navbar() {
               BEAT{" "}
             </h1>
             <h1
-              className={`inline border-b-4 pt-2 font-serif tracking-tight border-white text-2xl ${
-                navbarColor === "black" ? "text-black" : "text-white"
+              className={`inline border-b-4 pt-2 font-serif tracking-tight  text-2xl ${
+                navbarColor === "black"
+                  ? "text-black border-black"
+                  : "text-white border-white"
               }`}
             >
               Bridge
@@ -53,16 +54,23 @@ export default function Navbar() {
             <img
               src={Hamburger}
               alt="hamburger menu"
-              className="w-8 h-8  cursor-pointer hover:opacity-75"
+              className="w-8 h-8  cursor-pointer"
               onClick={toggleMenu}
             />
           </div>
         </div>
+        {/* <hr className="border-y-[1px]" /> */}
       </div>
+      {menuOpen && (
+        <div
+          className="fixed inset-0 bg-gray-800 opacity-70 z-50"
+          onClick={closeMenu}
+        ></div>
+      )}
       <div
-        className={`fixed top-0 right-0 h-full w-64 shadow-lg transform  ${
+        className={`fixed top-0 right-0 h-full w-64 bg-white shadow-lg transform ${
           menuOpen ? "translate-x-0" : "translate-x-full"
-        } transition-transform ease-in-out duration-300 z-50  ${
+        } transition-transform ease-in-out duration-300 z-50 ${
           navbarColor === "black"
             ? "text-black bg-gradient-to-r from-pink-400 to-gray-300 "
             : "text-white bg-gradient-to-r from-pink-300 to-orange-300 "
@@ -76,7 +84,7 @@ export default function Navbar() {
           }`}
         >
           <button
-            className="text-gray-500 hover:text-gray-700 "
+            className="text-gray-500 hover:text-gray-700"
             onClick={closeMenu}
           >
             <svg
@@ -96,20 +104,45 @@ export default function Navbar() {
           </button>
         </div>
 
-        <ul className="p-4 font-normals text-xl mb-4 ">
-          <li className="py-2 pl-4 cursor-pointer flex items-center transition duration-300 ease-in-out hover:bg-gray-200 hover:text-black">
+        <ul className="p-4 font-serif text-xl mb-4">
+          <li
+            className={`py-2 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
+              navbarColor === "black"
+                ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
+                : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
+            }`}
+          >
             <FaHome className="mr-2" />
             Discover
           </li>
-          <li className="py-2 pl-4 cursor-pointer flex items-center transition duration-300 ease-in-out hover:bg-gray-200 hover:text-black">
-            <GrGallery className="mr-2" />
+          <li
+            className={`py-2 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
+              navbarColor === "black"
+                ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
+                : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
+            }`}
+          >
+            <BiImages className="mr-2" />
             Around You
-          </li>{" "}
-          <li className="py-2 pl-4 cursor-pointer flex items-center transition duration-300 ease-in-out hover:bg-gray-200 hover:text-black">
+          </li>
+          <li
+            className={`py-2 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
+              navbarColor === "black"
+                ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
+                : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
+            }`}
+          >
             <BsFillPeopleFill className="mr-2" />
             Top Artists
-          </li>{" "}
-          <li className="py-2 pl-4 cursor-pointer flex items-center transition duration-300 ease-in-out hover:bg-gray-200 hover:text-black">
+          </li>
+          <li
+            className={`py-2 pl-4 hover:bg-pink-400 hover:rounded-full cursor-pointer flex items-center  ${
+              navbarColor === "black"
+                ? "hover:bg-gradient-to-r from-pink-500 to-gray-300 "
+                : "hover:bg-gradient-to-r from-pink-400 to-orange-300 "
+            }`}
+          >
+            {" "}
             <FaHashtag className="mr-2" />
             Top Charts
           </li>