fix variant bold icon building

src/components/navigation/BottomNavBar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React from 'react'
+import Link from 'next/link'
 import BottomNavLink from './BottomNavLink'
 import BottomNavHighlightLink from './BottomNavLinkBig'
 import PagerIcon from '../icons/PagerIcon'
@@ -11,6 +12,7 @@ import HomeIcon from '../icons/HomeIcon'
 import { useTranslation } from 'react-i18next';
 import { useCart } from '@/app/[name]/(Dialogs)/cart/hook/useCart';
 import { Building } from 'iconsax-react';
+import clsx from 'clsx';
 
 type BottomNavBarProps = {
   onPagerClick?: () => void;
@@ -21,6 +23,11 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
   const { name } = params;
   const pathname = usePathname();
   const isHomeRoute = pathname === `/${name}`;
+  const isAboutRoute = pathname.includes('about');
+  const buildingVariant = React.useMemo(() => {
+    return (isAboutRoute ? 'Bold' : 'Outline') as 'Bold' | 'Outline';
+  }, [isAboutRoute]);
+
   const { t } = useTranslation('common', {
     keyPrefix: 'BottomNavbar'
   });
@@ -82,17 +89,29 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
                     width={20}
                     height={20} />}
                 value={t('Menu')} />
-              <BottomNavLink
+              <Link
                 href={`/${name}/about`}
-                icon={
+                className={clsx(
+                  'flex flex-col justify-arround items-center gap-[5px] text-disabled2 pointer-events-auto dark:**:stroke-neutral-500 min-w-0',
+                  isAboutRoute && 'text-foreground **:stroke-foreground'
+                )}
+              >
+                <div className="flex-shrink-0">
                   <Building
+                    key={`building-${buildingVariant}-${isAboutRoute}`}
                     size={20}
-                    variant="Outline"
-                    color="#8C90A3"
+                    variant={buildingVariant as 'Bold' | 'Outline'}
+                    color={isAboutRoute ? undefined : "#8C90A3"}
+                    style={isAboutRoute ? { fill: 'currentColor' } : undefined}
                   />
-                }
-                value={t('about')}
-              />
+                </div>
+                <span className={clsx(
+                  'text-xs2 text-disabled-text text-center truncate w-full',
+                  isAboutRoute && 'text-foreground'
+                )}>
+                  {t('about')}
+                </span>
+              </Link>
               <BottomNavLink href={'/auth'} icon={<HeartIcon width={20} height={20} />} value={t('Favorites')} />
             </nav>
           </foreignObject>
@@ -163,4 +182,4 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
   )
 }
 
-export default React.memo(BottomNavBar)
+export default BottomNavBar