add: active link styling to bottom navbar

package-lock.json

@@ -11,6 +11,7 @@
         "@tanstack/react-query": "^5.81.5",
         "@tanstack/react-query-devtools": "^5.81.5",
         "axios": "^1.10.0",
+        "clsx": "^2.1.1",
         "dmenu-plus-frontned": "file:",
         "framer-motion": "^12.20.1",
         "next": "15.3.4",
@@ -2396,6 +2397,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",

package.json

@@ -12,6 +12,7 @@
     "@tanstack/react-query": "^5.81.5",
     "@tanstack/react-query-devtools": "^5.81.5",
     "axios": "^1.10.0",
+    "clsx": "^2.1.1",
     "dmenu-plus-frontned": "file:",
     "framer-motion": "^12.20.1",
     "next": "15.3.4",

src/app/globals.css

@@ -12,6 +12,7 @@
   --color-valid: #439C46;
   --color-foreground: #333333;
   --color-disabled: #E7E7E7;
+  --color-disabled2: #7F7F7F;
   --color-disabled-text: #8C90A3;
   --color-menu-header: #C3C7DD;
   --color-icon-deactive: #A8ABBF;

src/components/icons/BagIcon.tsx

@@ -13,7 +13,7 @@ const BagIcon = (props: Props) => (
   >
     <path
       d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001"
-      stroke="#7F7F7F"
+      stroke="currentColor"
       strokeWidth={1.5}
       strokeMiterlimit={10}
       strokeLinecap="round"
@@ -21,7 +21,7 @@ const BagIcon = (props: Props) => (
     />
     <path
       d="M8.99983 22H14.9998C19.0198 22 19.7398 20.39 19.9498 18.43L20.6998 12.43C20.9698 9.99 20.2698 8 15.9998 8H7.99983C3.72983 8 3.02983 9.99 3.29983 12.43L4.04983 18.43C4.25983 20.39 4.97983 22 8.99983 22Z"
-      stroke="#7F7F7F"
+      stroke="currentColor"
       strokeWidth={1.5}
       strokeMiterlimit={10}
       strokeLinecap="round"

src/components/icons/HomeHashtagIcon.tsx

@@ -13,28 +13,28 @@ const HomeHashtagIcon = (props: Props) => (
   >
     <path
       d="M9.02 2.83992L3.63 7.03992C2.73 7.73992 2 9.22992 2 10.3599V17.7699C2 20.0899 3.89 21.9899 6.21 21.9899H17.79C20.11 21.9899 22 20.0899 22 17.7799V10.4999C22 9.28992 21.19 7.73992 20.2 7.04992L14.02 2.71992C12.62 1.73992 10.37 1.78992 9.02 2.83992Z"
-      stroke="white"
+      stroke="currentColor"
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
       d="M10.5 18H13.5C15.15 18 16.5 16.65 16.5 15V12C16.5 10.35 15.15 9 13.5 9H10.5C8.85 9 7.5 10.35 7.5 12V15C7.5 16.65 8.85 18 10.5 18Z"
-      stroke="white"
+      stroke="currentColor"
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
       d="M12 9V18"
-      stroke="white"
+      stroke="currentColor"
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"
     />
     <path
       d="M7.5 13.5H16.5"
-      stroke="white"
+      stroke="currentColor"
       strokeWidth={1.5}
       strokeLinecap="round"
       strokeLinejoin="round"

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={`/${name}/orders`} icon={<BagIcon />} value="سبد خرید" />
-              <BottomNavLink href={''} icon={<PagerIcon />} value="پیجر" />
+              <BottomNavLink href={`/${name}`} icon={<PagerIcon />} value="پیجر" />
-              <BottomNavHighlightLink href={''} icon={<HomeHashtagIcon />} value="منو" />
+              <BottomNavHighlightLink href={`/${name}`} icon={<HomeHashtagIcon />} value="منو" />
-              <BottomNavLink href={''} icon={<NotifiBoardIcon />} value="اعلان ها" />
+              <BottomNavLink href={`/${name}`} icon={<NotifiBoardIcon />} value="اعلان ها" />
               <BottomNavLink href={'/auth'} icon={<HeartIcon />} value="پسند ها" />
             </div>
           </foreignObject>

src/components/navigation/BottomNavLink.tsx

@@ -1,17 +1,29 @@
 import Link from 'next/link'
 import React from 'react'
 import type { LinkProps } from 'next/link'
+import { usePathname } from 'next/navigation'
+import clsx from 'clsx'
 
 type Props = {
   icon: React.ReactElement
   value: string
 } & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
 
-function BottomNavLink({ icon, value, ...restProps }: Props) {
+function BottomNavLink({ icon, value, href, ...restProps }: Props) {
+  const pathname = usePathname();
+  const isActive = pathname === href;
+
   return (
-    <Link {...restProps} className={`flex flex-col justify-arround items-center gap-[5px] ${restProps.className ?? ''}`}>
+    <Link {...restProps} href={href} className={clsx(
+      'flex flex-col justify-arround items-center gap-[5px] text-disabled2',
+      isActive && 'text-foreground',
+       restProps.className ?? '',
+    )}>
       {icon}
-      <span className='text-xs2 text-disabled-text'>
+      <span className={clsx(
+        'text-xs2 text-disabled-text',
+        isActive && 'text-foreground'
+      )}>
         {value}
       </span>
     </Link>

src/components/navigation/BottomNavLinkBig.tsx

@@ -1,19 +1,33 @@
 import Link from 'next/link'
 import React from 'react'
 import type { LinkProps } from 'next/link'
+import { usePathname } from 'next/navigation'
+import clsx from 'clsx'
 
 type Props = {
   icon: React.ReactElement
   value: string
 } & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
 
-function BottomNavHighlightLink({ icon, value, ...restProps }: Props) {
+function BottomNavHighlightLink({ icon, value, href, ...restProps }: Props) {
+  const pathname = usePathname();
+  const isActive = pathname === href;
+
   return (
-    <Link {...restProps} className={`flex flex-col relative justify-arround items-center gap-[5px] ${restProps.className ?? ''}`}>
+    <Link {...restProps} href={href} className={clsx(
-      <div className='bg-primary p-3 rounded-full'>
+      'flex flex-col justify-arround items-center gap-[5px] text-disabled2',
+      isActive && 'text-foreground',
+      restProps.className ?? '',
+    )}>
+      <div className={clsx(
+        'bg-primary text-white p-3 rounded-full',
+      )}>
         {icon}
       </div>
-      <span className='text-xs2 text-disabled-text'>
+      <span className={clsx(
+              'text-xs2 text-disabled-text',
+              isActive && 'text-foreground'
+            )}>
         {value}
       </span>
     </Link>