Merge pull request #24 from thomasKn/thomas/fv-233-reponsive-dialogsheet-should-appear-from-bottom

Update Sheet

Author: thomasKn

Diff for: app/components/layout/CartCount.tsx

@@ -93,7 +93,7 @@ function Badge(props: {cart?: CartType | null; count: number}) {
     <Sheet onOpenChange={setCartOpen} open={cartOpen}>
       <SheetTrigger className={buttonClass}>{BadgeCounter}</SheetTrigger>
       <SheetContent
-        className="flex max-h-screen min-h-full w-screen flex-col gap-0 bg-background p-0 text-foreground sm:max-w-lg"
+        className="flex h-[90%] max-h-screen w-screen flex-col gap-0 bg-background p-0 text-foreground sm:max-w-lg"
         onCloseAutoFocus={(e) => e.preventDefault()}
       >
         <SheetHeader className="px-6 py-5 shadow-sm shadow-foreground/10">

Diff for: app/components/navigation/MobileNavigation.tsx

@@ -30,11 +30,16 @@ export function MobileNavigation(props: {data?: NavigationProps}) {
           <IconMenu className="size-7" strokeWidth={1.5} />
         </SheetTrigger>
         <SheetContent
-          className="flex max-h-screen min-h-full w-screen flex-col gap-0 bg-background p-0 text-foreground sm:max-w-lg"
+          className="flex h-[var(--dialog-content-height)] max-h-screen w-screen flex-col gap-0 bg-background p-0 text-foreground sm:max-w-lg"
           onCloseAutoFocus={(e) => e.preventDefault()}
           onOpenAutoFocus={(e) => e.preventDefault()}
+          style={
+            {
+              '--dialog-content-height': 'calc(100dvh * .75)',
+            } as React.CSSProperties
+          }
         >
-          <MobileNavigationMenu className="flex-1 overflow-y-scroll text-xl font-medium">
+          <MobileNavigationMenu className="flex-1 overflow-x-hidden overflow-y-scroll text-xl font-medium">
             <MobileNavigationMenuList>
               {props.data &&
                 props.data?.length > 0 &&

Diff for: app/components/ui/MobileNavigationMenu.tsx

@@ -9,12 +9,12 @@ const MobileNavigationMenu = forwardRef<
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 >(({children, className, ...props}, ref) => (
   <NavigationMenuPrimitive.Root
-    className={cn('container relative py-[var(--viewport-top)]', className)}
+    className={cn('relative px-6 py-[var(--viewport-top)]', className)}
     ref={ref}
     {...props}
     style={
       {
-        '--viewport-top': '3.5rem',
+        '--viewport-top': '4rem',
       } as React.CSSProperties
     }
   >
@@ -44,7 +44,7 @@ const MobileNavigationMenuTrigger = forwardRef<
 >(({children, className, ...props}, ref) => (
   <NavigationMenuPrimitive.Trigger
     className={cn(
-      'group data-[state=open]:fixed data-[state=open]:top-4 data-[state=open]:duration-300 data-[state=open]:animate-in data-[state=open]:fade-in',
+      'group data-[state=open]:absolute data-[state=open]:top-0 data-[state=open]:w-full data-[state=open]:translate-y-[-150%]',
       className,
     )}
     ref={ref}
@@ -69,10 +69,11 @@ const MobileNavigationMenuContent = forwardRef<
   <NavigationMenuPrimitive.Content
     className={cn(
       [
-        'h-[calc(100dvh-var(--viewport-top))] w-screen transition ease-in-out',
-        'group-data-[state=open]:duration-500',
+        'h-[calc(var(--dialog-content-height)-var(--viewport-top)-2px)] w-screen transition ease-in-out',
+        'rounded-t-3xl border-t border-border shadow-[0_0_5px_0] shadow-foreground/20',
+        'group-data-[state=open]:duration-300',
         'group-data-[state=open]:animate-in',
-        'group-data-[state=open]:fade-in',
+        'group-data-[state=open]:slide-in-from-bottom-1/2',
       ],
       className,
     )}
@@ -81,7 +82,7 @@ const MobileNavigationMenuContent = forwardRef<
     {...props}
   >
     <div className="flex h-full max-h-screen min-h-full w-screen flex-col gap-0">
-      <div className="container flex h-full flex-1 flex-col gap-3 overflow-y-scroll pb-[var(--viewport-top)] pt-4">
+      <div className="flex h-full flex-1 flex-col gap-3 overflow-y-scroll px-6 pb-[var(--viewport-top)] pt-6">
         {props.children}
       </div>
     </div>
@@ -98,12 +99,12 @@ const MobileNavigationMenuViewport = forwardRef<
 >(({className, ...props}, ref) => (
   <NavigationMenuPrimitive.Viewport
     className={cn([
-      'group fixed left-0 top-[var(--viewport-top)] z-50',
+      'group absolute left-0 top-[var(--viewport-top)] z-50',
       'h-[var(--radix-navigation-menu-viewport-height)] w-[var(--radix-navigation-menu-viewport-width)]',
       'bg-background text-foreground transition ease-in-out',
       'data-[state=closed]:duration-300',
       'data-[state=closed]:animate-out',
-      'data-[state=closed]:fade-out',
+      'data-[state=closed]:slide-out-to-bottom',
       className,
     ])}
     ref={ref}

Diff for: app/components/ui/Sheet.tsx

@@ -32,19 +32,26 @@ const SheetOverlay = forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  [
+    'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out bottom-0 inset-x-0 md:bottom-auto md:inset-x-auto',
+    'rounded-t-[2rem] md:rounded-none border md:border-none border-border overflow-hidden',
+    'data-[state=open]:animate-in data-[state=closed]:animate-out',
+    'data-[state=closed]:duration-300 data-[state=open]:duration-500',
+    'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+    'md:data-[state=closed]:slide-out-to-bottom-0 md:data-[state=open]:slide-in-from-bottom-0',
+  ],
   {
     defaultVariants: {
       side: 'right',
     },
     variants: {
       side: {
         bottom:
-          'inset-x-0 bottom-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+          'md:inset-x-0 md:bottom-0 md:data-[state=closed]:slide-out-to-bottom md:data-[state=open]:slide-in-from-bottom',
+        left: 'md:inset-y-0 md:left-0 md:h-full w-3/4 md:data-[state=closed]:slide-out-to-left md:data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          'inset-y-0 right-0 h-full w-3/4 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-        top: 'inset-x-0 top-0 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+          'md:inset-y-0 md:right-0 md:h-full w-3/4 md:data-[state=closed]:slide-out-to-right md:data-[state=open]:slide-in-from-right sm:max-w-sm',
+        top: 'md:inset-x-0 md:top-0 md:data-[state=closed]:slide-out-to-top md:data-[state=open]:slide-in-from-top',
       },
     },
   },
@@ -66,7 +73,7 @@ const SheetContent = forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm ring-offset-background transition-opacity hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close className="absolute right-4 top-4 hidden rounded-sm ring-offset-background transition-opacity hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary md:block">
         <IconClose className="size-6" strokeWidth={2} />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>