wing + filter

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

@@ -4,12 +4,15 @@ 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";
+import { tabs as _tabs } from "../../../consts/tabs";
+import useFavorites from "../../../store/useFavorites";
 
 const Navbar = () => {
   const [selectedTab, setSelectedTab] = useState<Tab | null>(null);
+  const [tabs, setTabs] = useState(_tabs);
   const location = useLocation();
   const navigate = useNavigate();
+  const { favorites } = useFavorites();
 
   const onTabClick = (tab: Tab) => {
     setSelectedTab(tab);
@@ -27,6 +30,17 @@ const Navbar = () => {
     }
   }, [location.pathname]);
 
+  useEffect(() => {
+    const updatedTabs = _tabs.map((tab) => {
+      if (tab.value === "Favorites") {
+        return { ...tab, count: favorites.length };
+      }
+
+      return tab;
+    });
+    setTabs(updatedTabs);
+  }, [favorites]);
+
   return (
     <>
       {isMobile ? (