challenge15react updated

src/App.tsx

@@ -2,8 +2,8 @@ import React, { useState, useEffect } from "react";
 import Filters from "./components/Filter/Filters";
 import Footer from "./components/Footer/Footer";
 import Card from "./components/Card/Card";
-import "../../starter/src/App.css";
-import "../../starter/src/global.css";
+import "../src/components/App.css";
+import "../src/components/global.css";
 import Navbar from "./components/Navbar";
 
 interface Bike {

src/components/Navbar.tsx

+import { useState } from "react";
+import Hamburger from "../hamburger.png";
+import Brand from "../helper-files/images/img/logo.png";
+import cart from "../helper-files/images/img/cart.png";
+import search from "../helper-files/images/img/search.png";
+import "./navbar.css";
+
+const Navbar = () => {
+  const [showNavbar, setShowNavbar] = useState(false);
+
+  const handleShowNavbar = () => {
+    setShowNavbar(!showNavbar);
+  };
+
+  return (
+    <nav className="navbar2">
+      <div className="container2">
+        <div className="logo">
+          <img src={Brand} alt="" />
+        </div>
+        <div className="menu-icon" onClick={handleShowNavbar}>
+          <img src={Hamburger} alt="" />
+        </div>
+        <div className={`nav-elements  ${showNavbar && "active"}`}>
+          <ul>
+            <li className="home">
+              <a href="#/">HOME</a>
+            </li>
+            <li>
+              <a href="#/">BIKES</a>
+            </li>
+            <li>
+              <a href="#/">GEAR</a>
+            </li>
+            <li>
+              <a href="#/">PARTS</a>
+            </li>
+            <li>
+              <a href="#/">TIRES</a>
+            </li>
+            <li>
+              <a href="#/">SERVICE-INFO</a>
+            </li>
+            <li>
+              <a href="#/">CATALOGUES</a>
+            </li>
+            <li>
+              <a href="#/">CONTACT</a>
+            </li>
+            <li className="temp">
+              <img src={search} alt="s" className="cart" />
+            </li>
+            <li className="temp2">
+              <img src={cart} alt="Cart" className="cart" />
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

src/components/navbar.css

+.container2 {
+  padding: 20px 10px;
+  display: flex;
+
+  align-items: center;
+  border-bottom: 1px solid #ccc;
+  margin: 0 10px;
+}
+
+.navbar2 {
+  background-color: white;
+  position: relative;
+}
+
+.logo img {
+  width: 100px;
+  height: 50px;
+  margin-left: 10px;
+}
+.menu-icon {
+  right: 0;
+  display: none;
+}
+
+.menu-icon img {
+  width: 30px;
+}
+
+.nav-elements ul {
+  display: flex;
+
+  list-style-type: none;
+}
+
+.nav-elements ul li:not(:last-child) {
+  margin-right: 30px;
+}
+.home {
+  margin-left: 60px;
+}
+.nav-elements ul a {
+  font-size: 16px;
+  font-weight: 400;
+  color: #2f234f;
+  text-decoration: none;
+}
+
+.nav-elements ul a.active {
+  color: #574c4c;
+  font-weight: 500;
+  position: relative;
+}
+
+.nav-elements ul a.active::after {
+  content: "";
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: #574c4c;
+}
+
+@media (max-width: 768px) {
+  .nav-elements ul li:not(:last-child) {
+    margin-right: 30px;
+  }
+}
+.temp {
+  margin-left: 83px;
+}
+@media (max-width: 800px) {
+  .temp {
+    margin-left: 0px;
+  }
+  .temp2 {
+    margin-right: 28px;
+  }
+  .logo img {
+    width: 80px;
+    height: 40px;
+    margin-left: 10px;
+  }
+  .menu-icon {
+    display: block;
+    cursor: pointer;
+    margin-left: auto; /* Change margin-left to auto to align to the right */
+    margin-right: 10px; /* Add margin-right to create space between the icon and the right edge */
+  }
+  .home {
+    margin-left: 0px;
+  }
+  .nav-elements {
+    position: absolute;
+    right: 0;
+    top: 60px;
+    background-color: #fef7e5;
+    width: 0px;
+    height: calc(100vh - 60px);
+    transition: all 0.3s ease-in;
+    overflow: hidden;
+  }
+
+  .nav-elements.active {
+    width: 270px;
+  }
+
+  .nav-elements ul {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nav-elements ul li {
+    margin-top: 22px;
+  }
+}
+.cart {
+  margin-top: -5px;
+  width: 17px;
+  height: 17px;
+}