add: active link styling to bottom navbar

src/components/navigation/BottomNavBar.tsx

@@ -6,10 +6,14 @@ import PagerIcon from '../icons/PagerIcon'
 import NotifiBoardIcon from '../icons/NotifBoardIcon'
 import BagIcon from '../icons/BagIcon'
 import HeartIcon from '../icons/HeartIcon'
+import { useParams } from 'next/navigation'
 
 type Props = object
 
 function BottomNavBar({ }: Props) {
+  const params = useParams();
+  const { name } = params;
+
   return (
     <div className="fixed bottom-0 left-0 w-full bg-transparent">
       <div className="max-w-md mx-auto w-full aspect-[436/104] relative z-30">
@@ -32,10 +36,10 @@ function BottomNavBar({ }: Props) {
             <div
               className="absolute z-20 w-full h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end"
             >
-              <BottomNavLink href={''} icon={<BagIcon />} value="سبد خرید" />
-              <BottomNavLink href={''} icon={<PagerIcon />} value="پیجر" />
-              <BottomNavHighlightLink href={''} icon={<HomeHashtagIcon />} value="منو" />
-              <BottomNavLink href={''} icon={<NotifiBoardIcon />} value="اعلان ها" />
+              <BottomNavLink href={`/${name}/orders`} icon={<BagIcon />} value="سبد خرید" />
+              <BottomNavLink href={`/${name}`} icon={<PagerIcon />} value="پیجر" />
+              <BottomNavHighlightLink href={`/${name}`} icon={<HomeHashtagIcon />} value="منو" />
+              <BottomNavLink href={`/${name}`} icon={<NotifiBoardIcon />} value="اعلان ها" />
               <BottomNavLink href={'/auth'} icon={<HeartIcon />} value="پسند ها" />
             </div>
           </foreignObject>