Services Page

src/Components/Navbar/Navbar.tsx

@@ -1,12 +1,14 @@
-import { useState } from "react";
-import { FaTimes, FaBars } from "react-icons/fa";
+import { useEffect, useState } from "react";
 
 import Logo from "../../assets/logo.svg";
 
 export default () => {
   const [state, setState] = useState(false);
-
   const [colorChange, setColorChange] = useState(false);
+  const [isNavbarCollapsed, setIsNavbarCollapsed] = useState(
+    window.innerWidth <= 768
+  );
+
   const changeColor = () => {
     if (window.scrollY >= 100) {
       setColorChange(true);
@@ -15,41 +17,51 @@ export default () => {
     }
   };
 
-  window.addEventListener("scroll", changeColor);
+  const checkNavbarCollapse = () => {
+    if (window.innerWidth <= 768) {
+      setIsNavbarCollapsed(true);
+    } else {
+      setIsNavbarCollapsed(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", changeColor);
+    window.addEventListener("resize", checkNavbarCollapse);
+    return () => {
+      window.removeEventListener("scroll", changeColor);
+      window.removeEventListener("resize", checkNavbarCollapse);
+    };
+  }, []);
 
   // Replace javascript:void(0) path with your path
   const navigation = [
-    { title: "Custom", path: "javascript:void(0)" },
-    { title: "Services", path: "javascript:void(0)" },
-    { title: "Work", path: "javascript:void(0)" },
-    { title: "About Us", path: "javascript:void(0)" },
+    { title: "Services", path: "#Services" },
+    { title: "Contact", path: "javascript:void(0)" },
   ];
 
   return (
     <nav
       className={`${
         colorChange
-          ? "bg-black bg-opacity-80 transition duration-500 w-full border-b md:border-0 md:static"
-          : ""
+          ? "bg-black bg-opacity-80 transition duration-500 w-full border-0 sticky top-0 z-10"
+          : "z-10"
       }`}
     >
       <div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
-        <div className="flex items-center justify-between py-3 md:py-5 md:block">
-          <a href="/">
-            <img src={Logo} width={60} height={60} alt="logo" />
-          </a>
-          <div className="md:hidden">
+        <div className="flex items-center justify-center md:justify-between py-3 md:py-5 md:block">
+          {isNavbarCollapsed ? (
             <button
               className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
               onClick={() => setState(!state)}
             >
-              {state ? (
-                <FaTimes className="h-6 w-6" />
-              ) : (
-                <FaBars className="h-6 w-6" />
-              )}
+              <img src={Logo} width={60} height={60} alt="logo" />
             </button>
-          </div>
+          ) : (
+            <a href="/">
+              <img src={Logo} width={60} height={60} alt="logo" />
+            </a>
+          )}
         </div>
         <div
           className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${