feat(MED-100): show cart in mobile menu

app/home/(user)/_components/home-mobile-navigation.tsx

@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 
-import { LogOut, Menu } from 'lucide-react';
+import { LogOut, Menu, ShoppingCart } from 'lucide-react';
 
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import {
@@ -16,6 +16,7 @@ import {
 } from '@kit/ui/dropdown-menu';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
+import { StoreCart } from '@medusajs/types';
 
 import featuresFlagConfig from '~/config/feature-flags.config';
 import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
@@ -24,7 +25,7 @@ import { personalAccountNavigationConfig } from '~/config/personal-account-navig
 import { HomeAccountSelector } from '../_components/home-account-selector';
 import type { UserWorkspace } from '../_lib/server/load-user-workspace';
 
-export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
+export function HomeMobileNavigation(props: { workspace: UserWorkspace, cart: StoreCart | null }) {
   const signOut = useSignOut();
 
   const Links = personalAccountNavigationConfig.routes.map((item, index) => {
@@ -46,6 +47,10 @@ export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
     }
   });
 
+
+  const cartItemsCount = props.cart?.items?.length ?? 0;
+  const hasCartItems = cartItemsCount > 0;
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
@@ -69,6 +74,18 @@ export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
           <DropdownMenuSeparator />
         </If>
 
+        <If condition={props.cart && hasCartItems}>
+          <DropdownMenuGroup>
+            <DropdownLink
+              path="/home/cart"
+              label="common:shoppingCartCount"
+              Icon={<ShoppingCart className="stroke-[1.5px]" />}
+              labelOptions={{ count: cartItemsCount }}
+            />
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+        </If>
+
         <DropdownMenuGroup>{Links}</DropdownMenuGroup>
 
         <DropdownMenuSeparator />
@@ -83,6 +100,7 @@ function DropdownLink(
   props: React.PropsWithChildren<{
     path: string;
     label: string;
+    labelOptions?: Record<string, any>;
     Icon: React.ReactNode;
   }>,
 ) {
@@ -95,7 +113,7 @@ function DropdownLink(
         {props.Icon}
 
         <span>
-          <Trans i18nKey={props.label} defaults={props.label} />
+          <Trans i18nKey={props.label} defaults={props.label} values={props.labelOptions} />
         </span>
       </Link>
     </DropdownMenuItem>