From f9c8ec09a48e6266d9809a4873a7726c68c0889f Mon Sep 17 00:00:00 2001
From: Thomas Cristina de Carvalho <thomas@frontvibe.com>
Date: Thu, 1 Feb 2024 22:30:47 -0500
Subject: [PATCH] Add mobile nav

---
 app/components/icons/IconClose.tsx            |   9 +-
 app/components/icons/IconMenu.tsx             |  14 ++
 app/components/layout/CartCount.tsx           |   5 +-
 app/components/layout/Header.tsx              |  54 ++++----
 .../{Navigation.tsx => DesktopNavigation.tsx} |   6 +-
 .../navigation/MobileNavigation.tsx           | 122 +++++++++++++++++
 .../navigation/NestedNavigation.tsx           |   2 +-
 app/components/ui/MobileNavigationMenu.tsx    | 124 ++++++++++++++++++
 app/components/ui/NavigationMenu.tsx          |   2 +-
 app/components/ui/Sheet.tsx                   |  12 +-
 app/hooks/useBoundedScroll.tsx                |  27 ----
 app/hooks/useScrollDirection.tsx              |  35 +++++
 app/root.tsx                                  |   2 +-
 tailwind.config.ts                            |   1 +
 14 files changed, 341 insertions(+), 74 deletions(-)
 create mode 100644 app/components/icons/IconMenu.tsx
 rename app/components/navigation/{Navigation.tsx => DesktopNavigation.tsx} (94%)
 create mode 100644 app/components/navigation/MobileNavigation.tsx
 create mode 100644 app/components/ui/MobileNavigationMenu.tsx
 delete mode 100644 app/hooks/useBoundedScroll.tsx
 create mode 100644 app/hooks/useScrollDirection.tsx

diff --git a/app/components/icons/IconClose.tsx b/app/components/icons/IconClose.tsx
index 76fa00c..e2f02e8 100644
--- a/app/components/icons/IconClose.tsx
+++ b/app/components/icons/IconClose.tsx
@@ -6,15 +6,8 @@ export function IconClose(props: IconProps) {
   return (
     <Icon {...props} stroke={props.stroke || 'currentColor'}>
       <title>Close</title>
+      <line x1="4.44194" x2="15.7556" y1="4.30806" y2="15.6218" />
       <line
-        strokeWidth="1.25"
-        x1="4.44194"
-        x2="15.7556"
-        y1="4.30806"
-        y2="15.6218"
-      />
-      <line
-        strokeWidth="1.25"
         transform="matrix(-0.707107 0.707107 0.707107 0.707107 16 4.75)"
         x2="16"
         y1="-0.625"
diff --git a/app/components/icons/IconMenu.tsx b/app/components/icons/IconMenu.tsx
new file mode 100644
index 0000000..5cdf2ae
--- /dev/null
+++ b/app/components/icons/IconMenu.tsx
@@ -0,0 +1,14 @@
+import type {IconProps} from './Icon';
+
+import {Icon} from './Icon';
+
+export function IconMenu(props: IconProps) {
+  return (
+    <Icon {...props} stroke={props.stroke || 'currentColor'}>
+      <title>Menu</title>
+      <line strokeWidth="1.25" x1="3" x2="17" y1="6.375" y2="6.375" />
+      <line strokeWidth="1.25" x1="3" x2="17" y1="10.375" y2="10.375" />
+      <line strokeWidth="1.25" x1="3" x2="17" y1="14.375" y2="14.375" />
+    </Icon>
+  );
+}
diff --git a/app/components/layout/CartCount.tsx b/app/components/layout/CartCount.tsx
index f4542ab..7371150 100644
--- a/app/components/layout/CartCount.tsx
+++ b/app/components/layout/CartCount.tsx
@@ -84,7 +84,10 @@ function Badge(props: {cart?: CartType | null; count: number}) {
     [count, isHydrated],
   );
 
-  const buttonClass = cx(['relative flex size-8 items-center justify-center']);
+  const buttonClass = cx([
+    'relative flex size-8 items-center justify-center',
+    count > 0 && 'mr-3 md:mr-0',
+  ]);
 
   return isHydrated ? (
     <Sheet onOpenChange={setCartOpen} open={cartOpen}>
diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
index e4f7839..8c3ef5e 100644
--- a/app/components/layout/Header.tsx
+++ b/app/components/layout/Header.tsx
@@ -3,15 +3,17 @@ import type {CSSProperties} from 'react';
 import {Link} from '@remix-run/react';
 import {vercelStegaCleanAll} from '@sanity/client/stega';
 import {cx} from 'class-variance-authority';
-import {LazyMotion, m, useTransform} from 'framer-motion';
+import {LazyMotion, m} from 'framer-motion';
+import React from 'react';
 
-import {useBoundedScroll} from '~/hooks/useBoundedScroll';
 import {useLocalePath} from '~/hooks/useLocalePath';
 import {useSanityRoot} from '~/hooks/useSanityRoot';
+import {useScrollDirection} from '~/hooks/useScrollDirection';
 import {useSettingsCssVars} from '~/hooks/useSettingsCssVars';
 
 import {headerVariants} from '../cva/header';
-import {Navigation} from '../navigation/Navigation';
+import {DesktopNavigation} from '../navigation/DesktopNavigation';
+import {MobileNavigation} from '../navigation/MobileNavigation';
 import {CartCount} from './CartCount';
 import {Logo} from './Logo';
 
@@ -30,11 +32,18 @@ export function Header() {
   return (
     <HeaderWrapper>
       <style dangerouslySetInnerHTML={{__html: cssVars}} />
-      <div className="container">
+      <div
+        className="md:container"
+        style={
+          {
+            '--mobileHeaderXPadding': '0.75rem',
+          } as React.CSSProperties
+        }
+      >
         <div className="flex items-center justify-between">
           <Link prefetch="intent" to={homePath}>
             <Logo
-              className="h-auto w-[var(--logoWidth)]"
+              className="h-auto w-[var(--logoWidth)] pl-[var(--mobileHeaderXPadding)] md:pl-0"
               sizes={logoWidth}
               style={
                 {
@@ -43,12 +52,10 @@ export function Header() {
               }
             />
           </Link>
-          <div className="flex items-center gap-3">
-            {/* Desktop navigation */}
-            <div className="hidden md:block">
-              <Navigation data={header?.menu} />
-            </div>
+          <div className="flex items-center gap-0 md:gap-2">
+            <DesktopNavigation data={header?.menu} />
             <CartCount />
+            <MobileNavigation data={header?.menu} />
           </div>
         </div>
       </div>
@@ -86,27 +93,22 @@ function HeaderAnimation(props: {
   children: React.ReactNode;
   className: string;
 }) {
-  // See Animated Sticky Header from Build UI (https://buildui.com/recipes/fixed-header)
   const loadFeatures = async () =>
     await import('../../lib/framerMotionFeatures').then((res) => res.default);
-  const {scrollYBoundedProgress} = useBoundedScroll(400);
-  const scrollYBoundedProgressDelayed = useTransform(
-    scrollYBoundedProgress,
-    [0, 0.75, 1],
-    [0, 0, 1],
-  );
-
-  const style = {
-    transform: useTransform(
-      scrollYBoundedProgressDelayed,
-      [0, 1],
-      ['translateY(0)', 'translateY(-100%)'],
-    ),
-  };
+  const {direction} = useScrollDirection();
 
   return (
     <LazyMotion features={loadFeatures} strict>
-      <m.header className={props.className} style={style}>
+      <m.header
+        animate={{
+          y: direction === 'up' || !direction ? 0 : '-100%',
+        }}
+        className={props.className}
+        transition={{
+          duration: 0.1,
+          ease: 'linear',
+        }}
+      >
         {props.children}
       </m.header>
     </LazyMotion>
diff --git a/app/components/navigation/Navigation.tsx b/app/components/navigation/DesktopNavigation.tsx
similarity index 94%
rename from app/components/navigation/Navigation.tsx
rename to app/components/navigation/DesktopNavigation.tsx
index be78059..a6e6582 100644
--- a/app/components/navigation/Navigation.tsx
+++ b/app/components/navigation/DesktopNavigation.tsx
@@ -15,9 +15,9 @@ import {
 import {NestedNavigation} from './NestedNavigation';
 
 type HeaderQuery = InferType<typeof HEADER_QUERY>;
-type NavigationProps = NonNullable<HeaderQuery>['menu'];
+export type NavigationProps = NonNullable<HeaderQuery>['menu'];
 
-export function Navigation(props: {data?: NavigationProps}) {
+export function DesktopNavigation(props: {data?: NavigationProps}) {
   const menuRef = useRef<HTMLUListElement>(null);
   const [activeItem, setActiveItem] = useState<null | string | undefined>(null);
   const dropdownWidth = 200;
@@ -28,7 +28,7 @@ export function Navigation(props: {data?: NavigationProps}) {
   );
 
   return (
-    <NavigationMenu id="header-nav">
+    <NavigationMenu className="hidden md:block" id="header-nav">
       <CssVars
         dropdownWidth={dropdownWidth}
         viewportPosition={viewportPosition}
diff --git a/app/components/navigation/MobileNavigation.tsx b/app/components/navigation/MobileNavigation.tsx
new file mode 100644
index 0000000..0acdd63
--- /dev/null
+++ b/app/components/navigation/MobileNavigation.tsx
@@ -0,0 +1,122 @@
+import {useCallback, useState} from 'react';
+
+import type {NavigationProps} from './DesktopNavigation';
+import type {SanityNestedNavigationProps} from './NestedNavigation';
+
+import {IconMenu} from '../icons/IconMenu';
+import {SanityExternalLink} from '../sanity/link/SanityExternalLink';
+import {SanityInternalLink} from '../sanity/link/SanityInternalLink';
+import {
+  MobileNavigationMenu,
+  MobileNavigationMenuContent,
+  MobileNavigationMenuItem,
+  MobileNavigationMenuLink,
+  MobileNavigationMenuList,
+  MobileNavigationMenuTrigger,
+} from '../ui/MobileNavigationMenu';
+import {Sheet, SheetContent, SheetTrigger} from '../ui/Sheet';
+
+export function MobileNavigation(props: {data?: NavigationProps}) {
+  const [open, setOpen] = useState(false);
+  const handleClose = useCallback(() => setOpen(false), []);
+
+  if (!props.data) return null;
+
+  // Todo => Add <Navlink /> support
+  return (
+    <div className="md:hidden">
+      <Sheet onOpenChange={setOpen} open={open}>
+        <SheetTrigger className="flex items-center justify-center p-2 pr-[var(--mobileHeaderXPadding)] md:pr-0">
+          <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"
+          onCloseAutoFocus={(e) => e.preventDefault()}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          <MobileNavigationMenu className="flex-1 overflow-y-scroll text-xl font-medium">
+            <MobileNavigationMenuList>
+              {props.data &&
+                props.data?.length > 0 &&
+                props.data?.map((item) => (
+                  <MobileNavigationMenuItem key={item._key}>
+                    {item._type === 'internalLink' && (
+                      <MobileNavigationMenuLink asChild onClick={handleClose}>
+                        <div>
+                          <SanityInternalLink data={item} />
+                        </div>
+                      </MobileNavigationMenuLink>
+                    )}
+                    {item._type === 'externalLink' && (
+                      <MobileNavigationMenuLink asChild onClick={handleClose}>
+                        <div>
+                          <SanityExternalLink data={item} />
+                        </div>
+                      </MobileNavigationMenuLink>
+                    )}
+                    {item._type === 'nestedNavigation' && (
+                      <NestedMobileNavigation
+                        data={item}
+                        onClose={handleClose}
+                      />
+                    )}
+                  </MobileNavigationMenuItem>
+                ))}
+            </MobileNavigationMenuList>
+          </MobileNavigationMenu>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}
+
+function NestedMobileNavigation(props: {
+  data?: SanityNestedNavigationProps;
+  onClose: () => void;
+}) {
+  const {data} = props;
+
+  if (!data) return null;
+
+  const {childLinks} = data;
+
+  return data.name && childLinks && childLinks.length > 0 ? (
+    <>
+      <MobileNavigationMenuTrigger>{data.name}</MobileNavigationMenuTrigger>
+      <MobileNavigationMenuContent className="flex-1 overflow-y-scroll">
+        <MobileNavigationMenuList>
+          {childLinks &&
+            childLinks.length > 0 &&
+            childLinks.map((child) => (
+              <MobileNavigationMenuLink
+                asChild
+                key={child._key}
+                onClick={props.onClose}
+              >
+                <div>
+                  {child._type === 'internalLink' ? (
+                    <SanityInternalLink data={child} />
+                  ) : child._type === 'externalLink' ? (
+                    <SanityExternalLink data={child} />
+                  ) : null}
+                </div>
+              </MobileNavigationMenuLink>
+            ))}
+        </MobileNavigationMenuList>
+      </MobileNavigationMenuContent>
+    </>
+  ) : data.link && data.name && (!childLinks || childLinks.length === 0) ? (
+    // Render internal link if no child links
+    <SanityInternalLink
+      data={{
+        _key: data._key,
+        _type: 'internalLink',
+        anchor: null,
+        link: data.link,
+        name: data.name,
+      }}
+    >
+      {data.name}
+    </SanityInternalLink>
+  ) : null;
+}
diff --git a/app/components/navigation/NestedNavigation.tsx b/app/components/navigation/NestedNavigation.tsx
index cf219f1..b6ad0cc 100644
--- a/app/components/navigation/NestedNavigation.tsx
+++ b/app/components/navigation/NestedNavigation.tsx
@@ -14,7 +14,7 @@ import {
   navigationMenuTriggerStyle,
 } from '../ui/NavigationMenu';
 
-type SanityNestedNavigationProps = TypeFromSelection<
+export type SanityNestedNavigationProps = TypeFromSelection<
   typeof NESTED_NAVIGATION_FRAGMENT
 >;
 
diff --git a/app/components/ui/MobileNavigationMenu.tsx b/app/components/ui/MobileNavigationMenu.tsx
new file mode 100644
index 0000000..460fa4e
--- /dev/null
+++ b/app/components/ui/MobileNavigationMenu.tsx
@@ -0,0 +1,124 @@
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import {cn} from 'app/lib/utils';
+import React, {forwardRef} from 'react';
+
+import {IconChevron} from '../icons/IconChevron';
+
+const MobileNavigationMenu = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({children, className, ...props}, ref) => (
+  <NavigationMenuPrimitive.Root
+    className={cn('container relative py-[var(--viewport-top)]', className)}
+    ref={ref}
+    {...props}
+    style={
+      {
+        '--viewport-top': '3.5rem',
+      } as React.CSSProperties
+    }
+  >
+    {children}
+    <MobileNavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+));
+MobileNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const MobileNavigationMenuList = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({className, ...props}, ref) => (
+  <NavigationMenuPrimitive.List
+    className={cn('flex flex-col gap-4', className)}
+    ref={ref}
+    {...props}
+  />
+));
+MobileNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const MobileNavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const MobileNavigationMenuTrigger = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({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',
+      className,
+    )}
+    ref={ref}
+    {...props}
+  >
+    <span className="flex items-center gap-2">
+      <span className="group-data-[state=open]:hidden">{children}</span>
+      <IconChevron
+        className="group-data-[state=open]:size-7 group-data-[state=open]:rotate-180"
+        direction="right"
+      />
+    </span>
+  </NavigationMenuPrimitive.Trigger>
+));
+MobileNavigationMenuTrigger.displayName =
+  NavigationMenuPrimitive.Trigger.displayName;
+
+const MobileNavigationMenuContent = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({className, ...props}, ref) => (
+  <NavigationMenuPrimitive.Content
+    className={cn(
+      [
+        'h-[calc(100dvh-var(--viewport-top))] w-screen transition ease-in-out',
+        'group-data-[state=open]:duration-500',
+        'group-data-[state=open]:animate-in',
+        'group-data-[state=open]:fade-in',
+      ],
+      className,
+    )}
+    onInteractOutside={(e) => e.preventDefault()}
+    ref={ref}
+    {...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">
+        {props.children}
+      </div>
+    </div>
+  </NavigationMenuPrimitive.Content>
+));
+MobileNavigationMenuContent.displayName =
+  NavigationMenuPrimitive.Content.displayName;
+
+const MobileNavigationMenuLink = NavigationMenuPrimitive.Link;
+
+const MobileNavigationMenuViewport = forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({className, ...props}, ref) => (
+  <NavigationMenuPrimitive.Viewport
+    className={cn([
+      'group fixed 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',
+      className,
+    ])}
+    ref={ref}
+    {...props}
+  />
+));
+MobileNavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName;
+
+export {
+  MobileNavigationMenu,
+  MobileNavigationMenuContent,
+  MobileNavigationMenuItem,
+  MobileNavigationMenuLink,
+  MobileNavigationMenuList,
+  MobileNavigationMenuTrigger,
+  MobileNavigationMenuViewport,
+};
diff --git a/app/components/ui/NavigationMenu.tsx b/app/components/ui/NavigationMenu.tsx
index f933662..ed7c9d1 100644
--- a/app/components/ui/NavigationMenu.tsx
+++ b/app/components/ui/NavigationMenu.tsx
@@ -1,7 +1,7 @@
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import {cn} from 'app/lib/utils';
 import {cva} from 'class-variance-authority';
-import {forwardRef, useEffect, useRef} from 'react';
+import {forwardRef} from 'react';
 
 import {IconChevron} from '../icons/IconChevron';
 
diff --git a/app/components/ui/Sheet.tsx b/app/components/ui/Sheet.tsx
index 77b16d7..d33e1dd 100644
--- a/app/components/ui/Sheet.tsx
+++ b/app/components/ui/Sheet.tsx
@@ -40,11 +40,11 @@ const sheetVariants = cva(
     variants: {
       side: {
         bottom:
-          'inset-x-0 bottom-0 border-t 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 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+          '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',
         right:
-          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
-        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+          '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',
       },
     },
   },
@@ -66,8 +66,8 @@ const SheetContent = forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <IconClose />
+      <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">
+        <IconClose className="size-6" strokeWidth={2} />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
diff --git a/app/hooks/useBoundedScroll.tsx b/app/hooks/useBoundedScroll.tsx
deleted file mode 100644
index 6ba90f5..0000000
--- a/app/hooks/useBoundedScroll.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import {useMotionValue, useScroll, useTransform} from 'framer-motion';
-import {useEffect} from 'react';
-
-export function useBoundedScroll(threshold: number) {
-  const {scrollY} = useScroll();
-  const scrollYBounded = useMotionValue(0);
-  const scrollYBoundedProgress = useTransform(
-    scrollYBounded,
-    [0, threshold],
-    [0, 1],
-  );
-
-  useEffect(() => {
-    return scrollY.on('change', (current) => {
-      const previous = scrollY.getPrevious() ?? 0;
-      const diff = current - previous;
-      const newScrollYBounded = scrollYBounded.get() + diff;
-
-      scrollYBounded.set(clamp(newScrollYBounded, 0, threshold));
-    });
-  }, [threshold, scrollY, scrollYBounded]);
-
-  return {scrollYBounded, scrollYBoundedProgress};
-}
-
-const clamp = (number: number, min: number, max: number) =>
-  Math.min(Math.max(number, min), max);
diff --git a/app/hooks/useScrollDirection.tsx b/app/hooks/useScrollDirection.tsx
new file mode 100644
index 0000000..d731f5a
--- /dev/null
+++ b/app/hooks/useScrollDirection.tsx
@@ -0,0 +1,35 @@
+import {useMotionValue, useScroll, useTransform} from 'framer-motion';
+import {useCallback, useEffect, useRef, useState} from 'react';
+
+export function useScrollDirection() {
+  const threshold = 400;
+  const {scrollY, scrollYProgress} = useScroll();
+  const [direction, setDirection] = useState<'down' | 'up' | null>(null);
+
+  const setDirectionCallback = useCallback(
+    (current: number) => {
+      const previous = scrollY.getPrevious() ?? 0;
+      const diff = current - previous;
+
+      if (scrollYProgress.get() >= 0.965 || diff < 0) {
+        setDirection('up');
+      } else if (diff > 0 && scrollYProgress.get() > 0.025) {
+        setDirection('down');
+      }
+    },
+    [scrollY, scrollYProgress],
+  );
+
+  useEffect(() => {
+    const unsubscribe = scrollY.on('change', setDirectionCallback);
+
+    return () => {
+      unsubscribe();
+    };
+  }, [scrollY, setDirectionCallback]);
+
+  return {direction};
+}
+
+const clamp = (number: number, min: number, max: number) =>
+  Math.min(Math.max(number, min), max);
diff --git a/app/root.tsx b/app/root.tsx
index 6c34e7b..3227257 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -151,7 +151,7 @@ export default function App() {
         <Links />
         <style dangerouslySetInnerHTML={{__html: cssVars}} />
       </head>
-      <body className="flex min-h-screen flex-col bg-background text-foreground [&_main]:grow">
+      <body className="flex min-h-screen flex-col overflow-x-hidden bg-background text-foreground [&_main]:grow">
         <Layout>
           <Outlet />
         </Layout>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a0ec3b2..2214496 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -10,6 +10,7 @@ export default {
   theme: {
     container: {
       center: true,
+      padding: '1rem',
     },
     extend: {
       colors: {