touch functionality

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

@@ -1,8 +1,6 @@
 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 as _tabs } from "../../../consts/tabs";
 import useFavorites from "../../../store/useFavorites";
@@ -50,15 +48,13 @@ const Navbar = () => {
 
   return (
     <>
-      {isMobile ? (
-        <NavbarMobile onTabClick={onTabClick} tabs={tabs} />
-      ) : (
-        <NavbarDesktop
-          selectedTab={selectedTab}
+      {
+        <NavbarMobile
           onTabClick={onTabClick}
           tabs={tabs}
+          selectedTab={selectedTab}
         />
-      )}
+      }
     </>
   );
 };

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

@@ -4,14 +4,20 @@ import NavbarTabMobile from "./NavbarTabMobile";
 interface NavbarProps {
   onTabClick: (tab: Tab) => void;
   tabs: Tab[];
+  selectedTab: Tab | null;
 }
 
-const NavbarMobile = ({ onTabClick, tabs }: NavbarProps) => (
+const NavbarMobile = ({ onTabClick, tabs, selectedTab }: 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} />
+      <NavbarTabMobile
+        key={tab.id}
+        tab={tab}
+        onClick={onTabClick}
+        isSelected={selectedTab?.id === tab.id}
+      />
     ))}
   </nav>
 );

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

@@ -4,15 +4,16 @@ import RightArrowIcon from "../../icons/RightArrowIcon";
 interface NavbarTabProps {
   tab: Tab;
   onClick: (tab: Tab) => void;
+  isSelected: boolean;
 }
 
 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)}
-      >
+    <button
+      className="w-full border-b last:border-b-0 flex justify-between py-4 "
+      onClick={() => onClick(tab)}
+    >
+      <div className=" text-[#0D1922] relative w-fit">
         <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">