cart mechanism complete

components/shared/header/cabinet-button.tsx

@@ -23,7 +23,6 @@ export default async function CabinetButton() {
 				) : (
 					<>
 						<CircleUserRound className='h-[21px] w-[21px]' />
-						GA4_Ecommerce_View_Item_List_Trigger
 					</>
 				)}
 				{/*<span className='text-sm'>Кабінет</span>*/}

components/shared/header/controls.tsx

@@ -1,7 +1,8 @@
-import {Heart, ShoppingCartIcon, UserIcon} from 'lucide-react'
+import {Heart} from 'lucide-react'
 import {useTranslations} from 'next-intl'
 
 import CabinetButton from '@/components/shared/header/cabinet-button'
+import HeaderShoppingCartIcon from '@/components/shared/header/shopping-cart-icon'
 import {Link} from '@/i18n/routing'
 
 export default function HeaderControls() {
@@ -18,17 +19,7 @@ export default function HeaderControls() {
 				</button>
 			</Link>
 
-			<Link
-				href={'/checkout' as never}
-				className='header-button'
-				aria-label='Кошик'
-			>
-				<button className='flex flex-col items-center' role='button'>
-					<ShoppingCartIcon className='h-[21px] w-[21px]' />
-
-					<span className='font1-bold text-sm'>{t('basket')}</span>
-				</button>
-			</Link>
+			<HeaderShoppingCartIcon />
 		</div>
 	)
 }

components/shared/header/shopping-cart-icon.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import {ShoppingCartIcon} from 'lucide-react'
+import {useTranslations} from 'next-intl'
+
+import {Link} from '@/i18n/routing'
+import useCartStore from '@/store/cart-store'
+
+export default function HeaderShoppingCartIcon() {
+	const t = useTranslations('cart')
+	const {cartItems} = useCartStore()
+	const cartCount = cartItems.length
+
+	return (
+		<Link href={'/cart' as never} className='header-button' aria-label='Кошик'>
+			<button className='flex flex-col items-center' role='button'>
+				<ShoppingCartIcon className='h-[21px] w-[21px]' />
+
+				<span className='font1-bold text-sm'>
+					{t('basket')} [{cartCount}]
+				</span>
+			</button>
+		</Link>
+	)
+}

components/shared/navbar/index.tsx

@@ -2,7 +2,7 @@ import NavbarMenu from '@/components/shared/navbar/navbar-menu'
 
 export default function Navbar() {
 	return (
-		<nav className='text-min flex w-full items-center justify-between text-sm font-medium leading-none'>
+		<nav className='text-min flex w-full items-center justify-between text-sm font-medium leading-none text-brand-violet'>
 			<NavbarMenu />
 		</nav>
 	)

components/shared/navbar/navbar-menu.tsx

@@ -27,18 +27,18 @@ export default function NavbarMenu() {
 					))}
 				</div>
 			</div>
-			<div className={`flex items-center ${bp}:hidden`}>
+			{/*<div className={`flex items-center ${bp}:hidden`}>
 				<Button variant='ghost' onClick={ToggleNavbar}>
 					{menuOpened ? <X /> : <MenuIcon />}
 				</Button>
-			</div>
-			{menuOpened && (
+			</div>*/}
+			{/*{menuOpened && (
 				<div className={`${bp}:hidden`}>
 					<div className='space-y-1 px-2 pb-3 pt-2'>
 						<Link href={'#'}>Hidden Menu</Link>
 					</div>
 				</div>
-			)}
+			)}*/}
 		</>
 	)
 }