Merge pull request #25 from thomasKn/thomas/fv-234-mobile-menu-subnav

Update mobile menu sub nav trigger animation
frontvibe · Feb 2, 2024 · 51526f7 · 51526f7
2 parents abaf26f + b7c1804
commit 51526f7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 25 deletions.
diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
@@ -33,14 +33,7 @@ export function Header() {
   return (
     <HeaderWrapper>
       <style dangerouslySetInnerHTML={{__html: cssVars}} />
-      <div
-        className="md:container"
-        style={
-          {
-            '--mobileHeaderXPadding': '0.75rem',
-          } as React.CSSProperties
-        }
-      >
+      <div className="[--mobileHeaderXPadding:.75rem] md:container">
         <div className="flex items-center justify-between">
           <Link prefetch="intent" to={homePath}>
             <Logo

diff --git a/app/components/navigation/MobileNavigation.tsx b/app/components/navigation/MobileNavigation.tsx
@@ -30,14 +30,9 @@ export function MobileNavigation(props: {data?: NavigationProps}) {
           <IconMenu className="size-7" strokeWidth={1.5} />
         </SheetTrigger>
         <SheetContent
-          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"
+          className="flex h-[var(--dialog-content-height)] max-h-screen w-screen flex-col gap-0 bg-background p-0 text-foreground [--dialog-content-height:calc(100dvh_*_.75)] 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-x-hidden overflow-y-scroll text-xl font-medium">
             <MobileNavigationMenuList>

diff --git a/app/components/ui/MobileNavigationMenu.tsx b/app/components/ui/MobileNavigationMenu.tsx
@@ -10,14 +10,12 @@ const MobileNavigationMenu = forwardRef<
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 >(({children, className, ...props}, ref) => (
   <NavigationMenuPrimitive.Root
-    className={cn('relative px-6 py-[var(--viewport-top)]', className)}
+    className={cn(
+      'relative px-6 py-[var(--viewport-top)] [--viewport-top:4rem]',
+      className,
+    )}
     ref={ref}
     {...props}
-    style={
-      {
-        '--viewport-top': '4rem',
-      } as React.CSSProperties
-    }
   >
     {children}
     <MobileNavigationMenuViewport />
@@ -49,21 +47,22 @@ const MobileNavigationMenuTrigger = forwardRef<
 >(({children, className, ...props}, ref) => (
   <NavigationMenuPrimitive.Trigger
     className={cn(
-      'group w-full data-[state=open]:absolute data-[state=open]:top-0 data-[state=open]:translate-y-[-120%] data-[state=open]:transition-transform data-[state=open]:delay-300',
+      'data-[state=open]:animate-mobile-menu-trigger group w-full',
+      '[--trigger-translate-y:-120%] data-[state=open]:delay-300 data-[state=open]:duration-500',
       className,
     )}
     ref={ref}
     {...props}
   >
     <span
       className={cn(
-        'flex items-center gap-2 group-data-[state=open]:bg-background',
+        'flex items-center gap-2 group-data-[state=open]:bg-background group-data-[state=open]:text-foreground',
         mobileNavigationMenuTriggerStyle(),
       )}
     >
-      <span className="group-data-[state=open]:hidden">{children}</span>
+      <span className="group-data-[state=open]:order-last">{children}</span>
       <IconChevron
-        className="group-data-[state=open]:size-7 group-data-[state=open]:rotate-180 group-data-[state=open]:text-foreground"
+        className="group-data-[state=open]:size-7 group-data-[state=open]:rotate-180"
         direction="right"
       />
     </span>
@@ -83,7 +82,7 @@ const MobileNavigationMenuContent = forwardRef<
         '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]:slide-in-from-bottom-1/2',
+        'group-data-[state=open]:slide-in-from-bottom',
       ],
       className,
     )}

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -57,8 +57,23 @@ export default {
           from: {height: 'var(--radix-accordion-content-height)'},
           to: {height: '0'},
         },
+        'mobile-menu-trigger': {
+          '0%, 1%': {
+            transform: 'translateY(-120%)',
+            opacity: '0',
+            position: 'absolute',
+            top: '0',
+          },
+          '100%': {
+            transform: 'translateY(-120%)',
+            opacity: '1',
+            position: 'absolute',
+            top: '0',
+          },
+        },
       },
       animation: {
+        'mobile-menu-trigger': 'mobile-menu-trigger 0.2s 1 forwards',
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
       },