bottom navbar change

src/components/navigation/BottomNavBar.tsx

@@ -52,20 +52,11 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
           {/* 🔽 Your HTML content inside SVG */}
           <foreignObject x="0" y="10" width="100%" height="80">
             <nav
-              className="h-full px-4 grid grid-cols-5 gap-x-1 text-[10px] items-end overflow-hidden"
+              className="h-full px-4 grid grid-cols-5 gap-x-1 text-[10px] items-end"
             >
               <BottomNavLink
                 href={`/${name}/cart`}
-                icon={
-                  <div className="relative flex-shrink-0">
-                    <BagIcon width={20} height={20} />
-                    {cartItemsCount > 0 && (
-                      <span className="absolute -top-2 -right-2 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-medium text-white bg-primary rounded-full">
-                        {cartItemsCount > 99 ? '99+' : cartItemsCount}
-                      </span>
-                    )}
-                  </div>
-                }
+                icon={<BagIcon width={20} height={20} />}
                 value={t('Cart')}
               />
               {onPagerClick ? (
@@ -134,6 +125,29 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
             </filter>
           </defs>
         </svg>
+
+        {/* Badge Layer - خارج از SVG - دقیقاً مثل foreignObject */}
+        {cartItemsCount > 0 && (
+          <div
+            className="absolute left-0 right-0 pointer-events-none"
+            style={{
+              top: 'calc(10 / 104 * 100%)',
+              height: 'calc(80 / 104 * 100%)'
+            }}
+          >
+            <div className="h-full px-4 grid grid-cols-5 gap-x-1 items-end">
+              <div className="flex flex-col items-center gap-[5px]">
+                <div className="relative flex-shrink-0">
+                  <div className="w-5 h-5 opacity-0"></div>
+                  <span className="absolute -top-1 -right-1 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-medium text-white bg-primary rounded-full z-50">
+                    {cartItemsCount > 99 ? '99+' : cartItemsCount}
+                  </span>
+                </div>
+                <span className="text-xs2 opacity-0">{t('Cart')}</span>
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   )