From 6a18d7bea3b173753686c22e9d0d1f57584919ef Mon Sep 17 00:00:00 2001
From: Yevhenii Kaliaiev <eugenyr34@gmail.com>
Date: Fri, 26 Sep 2025 00:08:55 +0300
Subject: [PATCH] added active state for footer tabs

---
 src/components/Layout/Footer/Footer.tsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/Layout/Footer/Footer.tsx b/src/components/Layout/Footer/Footer.tsx
index 2744179..44f78f6 100644
--- a/src/components/Layout/Footer/Footer.tsx
+++ b/src/components/Layout/Footer/Footer.tsx
@@ -7,12 +7,14 @@ import Link from 'next/link';
 import Logo from '@/components/UI/NavBar/Logo';
 import { FooterCategories } from '@/types/FooterCategories';
 import ArrowUpComponent from '@/components/UI/Footer/ArrowUpComponent';
+import { usePathname } from 'next/navigation';
 
 // #endregion
 const Footer: React.FC = () => {
   const scrollToTop = () => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
+  const pathname = usePathname();
 
   return (
     <footer
@@ -27,19 +29,22 @@ const Footer: React.FC = () => {
       >
         {FooterCategories.map((category) => {
           const isGithub = category.label === 'Github';
+          const isActive = pathname === `/${category.label.toLowerCase()}`;
+
           return (
             <Link
               key={category.label}
               href={category.href}
-              className="
-    relative text-[12px] font-bold leading-[11px] tracking-[0.04em] 
-    text-light-theme-text-menu dark:text-light-theme-text-menu hover:text-light-theme-text
-    sm:transition-colors sm:duration-200
-    sm:after:absolute sm:after:left-0 sm:after:right-0 sm:after:h-[2px] 
-    sm:after:bg-light-theme-text sm:after:top-[-44px]  
-    sm:after:scale-x-0 sm:hover:after:scale-x-100 sm:after:origin-top sm:after:transition-transform sm:after:duration-200
-    dark:hover:text-white sm:dark:after:bg-dark-theme-text
-  "
+              className={`
+                relative text-[12px] font-bold leading-[11px] tracking-[0.04em] 
+                text-light-theme-text-menu dark:text-light-theme-text-menu hover:text-light-theme-text
+                sm:transition-colors sm:duration-200
+                sm:after:absolute sm:after:left-0 sm:after:right-0 sm:after:h-[3px] 
+                sm:after:bg-light-theme-text sm:after:top-[-44px]  
+                sm:after:scale-x-0 sm:hover:after:scale-x-100 sm:after:origin-top sm:after:transition-transform sm:after:duration-200
+                dark:hover:text-white sm:dark:after:bg-dark-theme-text
+                ${isActive && 'sm:after:absolute sm:dark:text-white sm:text-product-add-btn-selected sm:after:left-0 sm:after:right-0 sm:after:h-[3px] sm:after:bg-light-theme-text-hover sm:after:top-[-44px] sm:after:scale-x-100'}
+                `}
               {...(isGithub ? { target: '_blank' } : {})}
             >
               {category.label.toUpperCase()}