From c7e71360cb11aa9901781caa30d7a29e6fa0975c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 19 Apr 2026 04:07:06 +0000
Subject: [PATCH] feat(ui): implement responsive design Phase 0 & Phase 1

Phase 0 - Foundation:
- Add ContentContainer: max-width 1440 centered wrapper for large screens
- Add ResponsiveStack: XStack that collapses to column at $md breakpoint

Phase 1 - Layout Shell:
- Sidebar: off-canvas Sheet drawer on mobile/tablet ($md and below),
  classic inline sidebar on desktop ($gtMd); visibility state lifted to Layout
- Sidebar.state: remove isShown (now managed by Layout), fix SSR-unsafe
  window.location.pathname with typeof window guard
- Navbar: add leftActionItem prop, $xs column stacking, numberOfLines+ellipsis
  on title for overflow safety
- Layout: manage sidebar open/close state via useMedia() for viewport-aware
  defaults (open on desktop, closed on mobile); add hamburger button for
  mobile; responsive content padding ($3/$4/$5 by breakpoint); wrap children
  in ContentContainer

https://claude.ai/code/session_01R25cNRQMhafRu4VQ7njNFL
---
 .../components/base/ContentContainer.tsx      |  12 +
 .../presentation/components/base/Layout.tsx   |  47 +++-
 .../components/base/Navbar/Navbar.tsx         |  11 +-
 .../components/base/ResponsiveStack.tsx       |   8 +
 .../components/base/Sidebar/Sidebar.state.tsx |  12 +-
 .../components/base/Sidebar/Sidebar.tsx       | 219 ++++++++++--------
 .../presentation/components/base/index.tsx    |   2 +
 7 files changed, 193 insertions(+), 118 deletions(-)
 create mode 100644 libs/ui/src/presentation/components/base/ContentContainer.tsx
 create mode 100644 libs/ui/src/presentation/components/base/ResponsiveStack.tsx

diff --git a/libs/ui/src/presentation/components/base/ContentContainer.tsx b/libs/ui/src/presentation/components/base/ContentContainer.tsx
new file mode 100644
index 00000000..1ccc2228
--- /dev/null
+++ b/libs/ui/src/presentation/components/base/ContentContainer.tsx
@@ -0,0 +1,12 @@
+import { YStack } from 'tamagui';
+import { ReactNode } from 'react';
+
+type ContentContainerProps = {
+  children: ReactNode;
+};
+
+export const ContentContainer = ({ children }: ContentContainerProps) => (
+  <YStack flex={1} width="100%" maxWidth={1440} alignSelf="center">
+    {children}
+  </YStack>
+);
diff --git a/libs/ui/src/presentation/components/base/Layout.tsx b/libs/ui/src/presentation/components/base/Layout.tsx
index c2e20430..1f72a635 100644
--- a/libs/ui/src/presentation/components/base/Layout.tsx
+++ b/libs/ui/src/presentation/components/base/Layout.tsx
@@ -1,7 +1,9 @@
-import { PortalProvider, XStack, YStack } from 'tamagui';
+import { Menu } from '@tamagui/lucide-icons';
+import { Button, PortalProvider, XStack, YStack, useMedia } from 'tamagui';
 import { Sidebar } from './Sidebar';
 import { Navbar } from './Navbar/Navbar';
-import { ReactNode } from 'react';
+import { ContentContainer } from './ContentContainer';
+import { ReactNode, useEffect, useState } from 'react';
 
 export type LayoutProps = {
   children: React.ReactNode;
@@ -18,18 +20,53 @@ export const Layout = ({
   rightActionItem,
   onLogoutPress,
 }: LayoutProps) => {
+  const media = useMedia();
+  const [isSidebarShown, setIsSidebarShown] = useState(false);
+
+  // Default: open on desktop, closed on mobile/tablet
+  useEffect(() => {
+    setIsSidebarShown(!!media.gtMd);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Intentionally runs once on mount with initial media value
+
+  const onToggleSidebar = () => setIsSidebarShown((prev) => !prev);
+
+  const hamburgerButton = (
+    <Button
+      icon={Menu}
+      size="$3"
+      variant="outlined"
+      circular
+      onPress={onToggleSidebar}
+      aria-label="Toggle navigation menu"
+      data-testid="sidebar-toggle"
+    />
+  );
+
   return (
     <PortalProvider shouldAddRootHost>
       <XStack flex={1}>
-        <Sidebar onLogoutPress={onLogoutPress} />
+        <Sidebar
+          onLogoutPress={onLogoutPress}
+          isShown={isSidebarShown}
+          onToggle={onToggleSidebar}
+          onOpenChange={setIsSidebarShown}
+        />
         <YStack flex={1}>
           <Navbar
             title={title}
             showBackButton={showBackButton}
             rightActionItem={rightActionItem}
+            leftActionItem={!media.gtMd ? hamburgerButton : undefined}
           />
-          <YStack padding="$5" gap="$3" flex={1}>
-            {children}
+          <YStack
+            flex={1}
+            padding="$5"
+            $xs={{ padding: '$3' }}
+            $sm={{ padding: '$4' }}
+            gap="$3"
+          >
+            <ContentContainer>{children}</ContentContainer>
           </YStack>
         </YStack>
       </XStack>
diff --git a/libs/ui/src/presentation/components/base/Navbar/Navbar.tsx b/libs/ui/src/presentation/components/base/Navbar/Navbar.tsx
index 1cf25c9c..605223a8 100644
--- a/libs/ui/src/presentation/components/base/Navbar/Navbar.tsx
+++ b/libs/ui/src/presentation/components/base/Navbar/Navbar.tsx
@@ -7,21 +7,26 @@ export type NavbarProps = {
   title: string;
   showBackButton?: boolean;
   rightActionItem?: ReactNode;
+  leftActionItem?: ReactNode;
 };
 
 export const Navbar = ({
   title,
   showBackButton,
   rightActionItem,
+  leftActionItem,
 }: NavbarProps) => {
   const { onBackButtonPress } = useNavbarState();
   return (
     <XStack
       padding="$3"
       justifyContent="space-between"
+      alignItems="center"
       backgroundColor="$gray1"
+      $xs={{ flexDirection: 'column', alignItems: 'flex-start', gap: '$2' }}
     >
-      <XStack alignItems="center" gap="$3">
+      <XStack alignItems="center" gap="$3" flex={1}>
+        {leftActionItem}
         {showBackButton && (
           <Button
             icon={ArrowLeft}
@@ -31,7 +36,9 @@ export const Navbar = ({
             size="$3"
           />
         )}
-        <H4>{title}</H4>
+        <H4 numberOfLines={1} ellipsizeMode="tail" flex={1}>
+          {title}
+        </H4>
       </XStack>
       {rightActionItem}
     </XStack>
diff --git a/libs/ui/src/presentation/components/base/ResponsiveStack.tsx b/libs/ui/src/presentation/components/base/ResponsiveStack.tsx
new file mode 100644
index 00000000..e726f8ac
--- /dev/null
+++ b/libs/ui/src/presentation/components/base/ResponsiveStack.tsx
@@ -0,0 +1,8 @@
+import { XStack } from 'tamagui';
+import type { XStackProps } from 'tamagui';
+
+export type ResponsiveStackProps = XStackProps;
+
+export const ResponsiveStack = (props: ResponsiveStackProps) => (
+  <XStack flexDirection="row" $md={{ flexDirection: 'column' }} {...props} />
+);
diff --git a/libs/ui/src/presentation/components/base/Sidebar/Sidebar.state.tsx b/libs/ui/src/presentation/components/base/Sidebar/Sidebar.state.tsx
index 51c4ce0d..1b01b099 100644
--- a/libs/ui/src/presentation/components/base/Sidebar/Sidebar.state.tsx
+++ b/libs/ui/src/presentation/components/base/Sidebar/Sidebar.state.tsx
@@ -7,7 +7,6 @@ import {
 } from '@tamagui/lucide-icons';
 import { NamedExoticComponent, useEffect, useState } from 'react';
 import { useRouter } from 'solito/router';
-import {} from 'solito';
 
 type MenuItem = {
   title: string;
@@ -61,17 +60,14 @@ const items: MenuItem[] = [
 ];
 
 export const useSidebarState = () => {
-  const [isShown, setIsShown] = useState(true);
-
-  const onToggleButtonPress = () => setIsShown((prev) => !prev);
-
   const router = useRouter();
-
   const [accordionValue, setAccordionValue] = useState<string>();
   const [currentPath, setCurrentPath] = useState<string>();
 
   useEffect(() => {
-    setCurrentPath(window.location.pathname);
+    if (typeof window !== 'undefined') {
+      setCurrentPath(window.location.pathname);
+    }
   }, []);
 
   useEffect(() => {
@@ -89,8 +85,6 @@ export const useSidebarState = () => {
   }, [currentPath]);
 
   return {
-    isShown,
-    onToggleButtonPress,
     router,
     items,
     accordionValue,
diff --git a/libs/ui/src/presentation/components/base/Sidebar/Sidebar.tsx b/libs/ui/src/presentation/components/base/Sidebar/Sidebar.tsx
index f2f058dc..62d4812f 100644
--- a/libs/ui/src/presentation/components/base/Sidebar/Sidebar.tsx
+++ b/libs/ui/src/presentation/components/base/Sidebar/Sidebar.tsx
@@ -1,6 +1,5 @@
 import {
   ChevronDown,
-  ChevronsLeft,
   ChevronsRight,
   LogOut,
 } from '@tamagui/lucide-icons';
@@ -14,130 +13,146 @@ import {
   XStack,
   YGroup,
   YStack,
+  useMedia,
 } from 'tamagui';
 import { useSidebarState } from './Sidebar.state';
 import { Link } from 'solito/link';
+import { Sheet } from '../Sheet';
 
 export type SidebarProps = {
   onLogoutPress: () => void;
+  isShown: boolean;
+  onToggle: () => void;
+  onOpenChange: (isOpen: boolean) => void;
 };
 
 export const Sidebar = (props: SidebarProps) => {
-  const {
-    isShown,
-    onToggleButtonPress,
-    router,
-    items,
-    accordionValue,
-    setAccordionValue,
-    currentPath,
-  } = useSidebarState();
+  const { isShown, onToggle, onOpenChange } = props;
+  const media = useMedia();
+  const { router, items, accordionValue, setAccordionValue, currentPath } =
+    useSidebarState();
 
+  const sidebarContent = (
+    <YStack flex={1} backgroundColor="$gray3" justifyContent="space-between">
+      <YStack gap="$3">
+        <XStack padding="$3" paddingBottom="$0">
+          <H5>Gatherloop POS</H5>
+        </XStack>
+
+        <Accordion
+          overflow="hidden"
+          type="single"
+          value={accordionValue}
+          onValueChange={setAccordionValue}
+        >
+          {items.map((item) => (
+            <Accordion.Item value={item.title} key={item.title}>
+              <Accordion.Trigger
+                flexDirection="row"
+                justifyContent="space-between"
+                backgroundColor="$gray3"
+                onPress={(event) => {
+                  if (item.path) {
+                    event.preventDefault();
+                    router.push(item.path);
+                  }
+                }}
+              >
+                {({ open }: { open: boolean }) => (
+                  <>
+                    <XStack gap="$3">
+                      <item.icon size="$1" />
+                      <Paragraph>{item.title}</Paragraph>
+                    </XStack>
+                    {item.subItems && (
+                      <Square
+                        animation="quick"
+                        rotate={open ? '180deg' : '0deg'}
+                      >
+                        <ChevronDown size="$1" />
+                      </Square>
+                    )}
+                  </>
+                )}
+              </Accordion.Trigger>
+
+              {item.subItems && (
+                <Accordion.HeightAnimator animation="medium">
+                  <Accordion.Content
+                    animation="medium"
+                    exitStyle={{ opacity: 0 }}
+                    backgroundColor="$gray3"
+                  >
+                    {item.subItems.map((subItem, index) => (
+                      <YGroup.Item key={index}>
+                        <Link href={subItem.path}>
+                          <ListItem
+                            backgroundColor={
+                              subItem.path === currentPath
+                                ? undefined
+                                : '$colorTransparent'
+                            }
+                            hoverTheme
+                            size="$4"
+                            cursor="pointer"
+                            borderRadius="$3"
+                          >
+                            {subItem.title}
+                          </ListItem>
+                        </Link>
+                      </YGroup.Item>
+                    ))}
+                  </Accordion.Content>
+                </Accordion.HeightAnimator>
+              )}
+            </Accordion.Item>
+          ))}
+        </Accordion>
+      </YStack>
+
+      <YStack padding="$3" paddingTop="$0">
+        <Button
+          onPress={props.onLogoutPress}
+          icon={LogOut}
+          variant="outlined"
+        >
+          Logout
+        </Button>
+      </YStack>
+    </YStack>
+  );
+
+  // Mobile/tablet (md and below): off-canvas Sheet drawer
+  if (!media.gtMd) {
+    return (
+      <Sheet isOpen={isShown} onOpenChange={onOpenChange}>
+        {sidebarContent}
+      </Sheet>
+    );
+  }
+
+  // Desktop (gtMd): classic inline sidebar
   return (
     <>
       <YGroup
+        data-testid="sidebar"
+        flex={1}
         width={200}
-        $xs={{ position: 'absolute', top: 0, bottom: 0, zIndex: '$5' }}
         elevation="$1"
         backgroundColor="$gray3"
         borderRadius="$0"
+        animation="medium"
         marginLeft={isShown ? 0 : -200}
       >
-        <YStack flex={1} justifyContent="space-between">
-          <YStack gap="$3">
-            <XStack padding="$3" paddingBottom="$0">
-              <H5>Gatherloop POS</H5>
-            </XStack>
-
-            <Accordion
-              overflow="hidden"
-              type="single"
-              value={accordionValue}
-              onValueChange={setAccordionValue}
-            >
-              {items.map((item) => (
-                <Accordion.Item value={item.title} key={item.title}>
-                  <Accordion.Trigger
-                    flexDirection="row"
-                    justifyContent="space-between"
-                    backgroundColor={'$gray3'}
-                    onPress={(event) => {
-                      if (item.path) {
-                        event.preventDefault();
-                        router.push(item.path);
-                      }
-                    }}
-                  >
-                    {({ open }: { open: boolean }) => (
-                      <>
-                        <XStack gap="$3">
-                          <item.icon size="$1" />
-                          <Paragraph>{item.title}</Paragraph>
-                        </XStack>
-                        {item.subItems && (
-                          <Square
-                            animation="quick"
-                            rotate={open ? '180deg' : '0deg'}
-                          >
-                            <ChevronDown size="$1" />
-                          </Square>
-                        )}
-                      </>
-                    )}
-                  </Accordion.Trigger>
-
-                  {item.subItems && (
-                    <Accordion.HeightAnimator animation="medium">
-                      <Accordion.Content
-                        animation="medium"
-                        exitStyle={{ opacity: 0 }}
-                        backgroundColor="$gray3"
-                      >
-                        {item.subItems.map((subItem, index) => (
-                          <YGroup.Item key={index}>
-                            <Link href={subItem.path}>
-                              <ListItem
-                                backgroundColor={
-                                  subItem.path === currentPath
-                                    ? undefined
-                                    : '$colorTransparent'
-                                }
-                                hoverTheme
-                                size="$4"
-                                cursor="pointer"
-                                borderRadius="$3"
-                              >
-                                {subItem.title}
-                              </ListItem>
-                            </Link>
-                          </YGroup.Item>
-                        ))}
-                      </Accordion.Content>
-                    </Accordion.HeightAnimator>
-                  )}
-                </Accordion.Item>
-              ))}
-            </Accordion>
-          </YStack>
-
-          <YStack padding="$3" paddingTop="$0">
-            <Button
-              onPress={props.onLogoutPress}
-              icon={LogOut}
-              variant="outlined"
-            >
-              Logout
-            </Button>
-          </YStack>
-        </YStack>
+        {sidebarContent}
       </YGroup>
 
       {!isShown && (
         <Button
-          icon={isShown ? ChevronsLeft : ChevronsRight}
-          onPress={onToggleButtonPress}
+          icon={ChevronsRight}
+          onPress={onToggle}
           position="absolute"
-          left={isShown ? 200 : 0}
+          left={0}
           zIndex={999}
           animation="fast"
           size="$3"
@@ -146,7 +161,7 @@ export const Sidebar = (props: SidebarProps) => {
           bottom="$20"
           borderWidth="$0"
           theme="blue"
-        ></Button>
+        />
       )}
     </>
   );
diff --git a/libs/ui/src/presentation/components/base/index.tsx b/libs/ui/src/presentation/components/base/index.tsx
index 4c3b8e72..c43ee292 100644
--- a/libs/ui/src/presentation/components/base/index.tsx
+++ b/libs/ui/src/presentation/components/base/index.tsx
@@ -14,3 +14,5 @@ export * from './Markdown';
 export * from './Tabs';
 export * from './ConfirmationAlert';
 export * from './SkeletonView';
+export * from './ContentContainer';
+export * from './ResponsiveStack';