Merge pull request #30 from codeXsit/codex-6-Navbar

Codex 6 navbar

Author: codexsit

.husky/commit-msg

@@ -1,10 +1,24 @@
 import { HashRouter as Router, Routes, Route } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import routes from "@/routes/index";
+import Navbar from "@/components/Navbar/index";
+
+
+
+const navLinks = [
+  {name: "About Us", path: "/about-us"},
+  {name: "Our Team", path: "/teams"},
+  {name: "Gallery", path: "/gallery"},
+  {name: "Contact", path: "/contact"},
+  {name: "Projects", path: "/projects"}
+ 
+];
 
 function App() {
   return (
     <Router>
+      <Navbar links={navLinks}/>
+
       <ToastContainer />
       <Routes>
         {routes.map((route) => (

.husky/pre-commit

@@ -5,6 +5,7 @@
 @import "@fontsource/poppins/900.css";
 @import "@fontsource/league-gothic";
 
+
 /* Reset default browser styles */
 * {
   margin: 0;
@@ -13,6 +14,10 @@
   font-family: "poppins", "sans-serif";
 }
 
+body {
+  background-color: theme("colors.secondary.light");
+}
+
 a {
   text-decoration: none;
   color: inherit;

src/App.jsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import PropTypes from "prop-types";
+import Logo from "@/assets/images/logo.svg";
+import closeIcon from "@/assets/images/close.svg";
+import menuIcon from "@/assets/images/menu.svg";
+
+function Navbar({ links }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+
+  return (
+    <nav className=" shadow-md w-full flex justify-between items-center px-6 bg-secondary-dark">
+      <Link to="/" className="cursor-pointer">
+        <img src={Logo} alt="logo" />
+      </Link>
+
+      <ul
+        className={`
+          md:flex pl-0 justify-start md:justify-center md:items-center md:pb-0 md:z-auto left-0 
+          transition-all duration-500 ease-in
+          ${isOpen ? "flex flex-col " : "hidden"}
+        `}
+      >
+        {links.map((link) => (
+          <li
+            key={link.name}
+            className={`
+              font-semibold text-white md:my-0 md:ml-8
+              border-b-2 
+              ${
+                location.pathname .toLowerCase().includes(link.path.toLowerCase()) 
+                  ? "border-red-500 hover:border-red-700" 
+                  : "border-transparent hover:border-red-500"
+              }
+            `}
+          >
+            <Link to={link.path}>{link.name}</Link>
+          </li>
+        ))}
+      </ul>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-7 h-7 text-white cursor-pointer md:hidden"
+      >
+        {isOpen ? (
+          <img src={closeIcon} alt="close"  />
+        ) : (
+          <img src={menuIcon} alt="menu" />
+        )}
+      </button>
+    </nav>
+  );
+}
+
+Navbar.propTypes = {
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+};
+
+export default Navbar;

src/assets/images/close.svg

@@ -22,11 +22,11 @@ export default {
         text: {
           light: "#F7F7F7",
           dark: "#232323",
-        },   
+        },
         gradient: {
           light: "#383838",
           dark: "#222222 ",
-        }
+        },
       },
       screens: {
         xs: "0px",
@@ -37,7 +37,7 @@ export default {
       },
       fontFamily: {
         poppins: ["Poppins", "sans-serif"],
-        gothic: ["League Gothic", "sans-serif"]
+        gothic: ["League Gothic", "sans-serif"],
       },
     },
   },