client,server folders

client/src/components/header/Navbar/Navbar.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import { isMobile } from "react-device-detect";
+import { useNavigate, useLocation } from "react-router-dom";
+import { Tab } from "../../../types/tab";
+import NavbarDesktop from "./NavbarDesktop";
+import NavbarMobile from "./NavbarMobile";
+import { tabs } from "../../../consts/tabs";
+
+const Navbar = () => {
+  const [selectedTab, setSelectedTab] = useState<Tab | null>(null);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const onTabClick = (tab: Tab) => {
+    setSelectedTab(tab);
+    navigate(tab.path);
+  };
+
+  useEffect(() => {
+    const pathname = location.pathname;
+    const tab = tabs.find((tab) => tab.path === pathname);
+    const defaultTab = tabs[0];
+    if (tab) {
+      setSelectedTab(tab);
+    } else {
+      setSelectedTab(defaultTab);
+    }
+  }, [location.pathname]);
+
+  return (
+    <>
+      {isMobile ? (
+        <NavbarMobile onTabClick={onTabClick} tabs={tabs} />
+      ) : (
+        <NavbarDesktop
+          selectedTab={selectedTab}
+          onTabClick={onTabClick}
+          tabs={tabs}
+        />
+      )}
+    </>
+  );
+};
+
+export default Navbar;

client/src/components/header/Navbar/NavbarDesktop.tsx

@@ -0,0 +1,25 @@
+import { Tab } from "../../../types/tab";
+import NavbarTabDesktop from "./NavbarTabDesktop";
+
+interface NavbarProps {
+  selectedTab: Tab | null;
+  onTabClick: (tab: Tab) => void;
+  tabs: Tab[];
+}
+
+const NavbarDesktop = ({ selectedTab, onTabClick, tabs }: NavbarProps) => (
+  <nav
+    className={`text-[#73787C] self-center col-span-2 justify-center flex h-full`}
+  >
+    {tabs.map((tab) => (
+      <NavbarTabDesktop
+        key={tab.id}
+        tab={tab}
+        isSelected={selectedTab?.id === tab.id}
+        onClick={onTabClick}
+      />
+    ))}
+  </nav>
+);
+
+export default NavbarDesktop;

client/src/components/header/Navbar/NavbarMobile.tsx

@@ -0,0 +1,19 @@
+import { Tab } from "../../../types/tab";
+import NavbarTabMobile from "./NavbarTabMobile";
+
+interface NavbarProps {
+  onTabClick: (tab: Tab) => void;
+  tabs: Tab[];
+}
+
+const NavbarMobile = ({ onTabClick, tabs }: NavbarProps) => (
+  <nav
+    className={`text-[#73787C] flex w-full flex-col bg-white rounded-lg px-4`}
+  >
+    {tabs.map((tab) => (
+      <NavbarTabMobile key={tab.id} tab={tab} onClick={onTabClick} />
+    ))}
+  </nav>
+);
+
+export default NavbarMobile;

client/src/components/header/Navbar/NavbarTabDesktop.tsx

@@ -0,0 +1,37 @@
+import { Tab } from "../../../types/tab";
+
+interface NavbarTabProps {
+  tab: Tab;
+  isSelected: boolean;
+  onClick: (tab: Tab) => void;
+}
+
+const NavbarTabDesktop = ({
+  tab,
+  onClick,
+  isSelected = false,
+}: NavbarTabProps) => {
+  return (
+    <button
+      className="px-4 text-[#73787C] hover:text-black relative w-fit h-full"
+      onClick={() => onClick(tab)}
+    >
+      <div
+        className={`border-b-2 h-full flex items-center transition-all duration-300 ${
+          isSelected
+            ? "border-b-[#00BED7]"
+            : "border-b-transparent hover:border-b-[#E2E2DC] active:border-b-[#00BED7]"
+        }`}
+      >
+        {tab.value}
+      </div>
+      {tab.count !== 0 && (
+        <div className="absolute top-2 right-0 w-4 h-4 bg-[#00BED7] rounded-full text-white text-[10px] flex items-center justify-center pt-0.5 pr-[1px]">
+          <span className="leading-none">{tab.count}</span>
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default NavbarTabDesktop;

client/src/components/header/Navbar/NavbarTabMobile.tsx

@@ -0,0 +1,30 @@
+import { Tab } from "../../../types/tab";
+import RightArrowIcon from "../../icons/RightArrowIcon";
+
+interface NavbarTabProps {
+  tab: Tab;
+  onClick: (tab: Tab) => void;
+}
+
+const NavbarTabMobile = ({ tab, onClick }: NavbarTabProps) => {
+  return (
+    <button className="w-full border-b last:border-b-0 flex justify-between py-4 ">
+      <div
+        className=" text-[#0D1922] relative w-fit"
+        onClick={() => onClick(tab)}
+      >
+        <div className={` transition-all duration-300`}>{tab.value}</div>
+        {tab.count !== 0 && (
+          <div className="absolute top-0 -right-4 w-4 h-4 bg-[#00BED7] rounded-full text-white text-[10px] flex items-center justify-center">
+            {tab.count}
+          </div>
+        )}
+      </div>
+      <div className="text-[#73787C]">
+        <RightArrowIcon />
+      </div>
+    </button>
+  );
+};
+
+export default NavbarTabMobile;