From ae6df0fcd997628f4ee771f17f8698528f08d65a Mon Sep 17 00:00:00 2001
From: PunGrumpy <108584943+PunGrumpy@users.noreply.github.com>
Date: Sat, 25 Jul 2026 18:47:49 +0700
Subject: [PATCH 1/2] feat(web): move docs mobile nav drawer to the right

Slide the docs drawer in from the right edge to match the hamburger
trigger, now placed at the end of the header. Flip the dashed border
to the panel's start edge and align the trigger icon with -me-1.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/components/docs/header.tsx     | 3 ++-
 apps/web/components/docs/mobile-nav.tsx | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/docs/header.tsx b/apps/web/components/docs/header.tsx
index 28057f4..52cbc8a 100644
--- a/apps/web/components/docs/header.tsx
+++ b/apps/web/components/docs/header.tsx
@@ -12,7 +12,6 @@ export const Header = () => (
       className="mx-auto flex h-14 w-full max-w-[1200px] items-center justify-between px-4 lg:px-14"
     >
       <div className="flex items-center gap-2">
-        <DocsMobileNav tree={source.getPageTree()} />
         <Link className="flex items-center gap-1.5 font-medium" href="/">
           <Logo aria-hidden="true" className="size-4" />
           Docker Doctor
@@ -23,6 +22,8 @@ export const Header = () => (
         <ChangelogButton />
         <DocsButton />
       </div>
+
+      <DocsMobileNav tree={source.getPageTree()} />
     </nav>
   </header>
 );
diff --git a/apps/web/components/docs/mobile-nav.tsx b/apps/web/components/docs/mobile-nav.tsx
index 278ed1f..b57a05d 100644
--- a/apps/web/components/docs/mobile-nav.tsx
+++ b/apps/web/components/docs/mobile-nav.tsx
@@ -57,7 +57,7 @@ export const DocsMobileNav = ({ tree }: DocsMobileNavProps) => {
         aria-controls="docs-mobile-menu"
         aria-haspopup="dialog"
         aria-label="Open documentation menu"
-        className="-ms-1 flex size-9 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted/50 hover:text-foreground lg:hidden"
+        className="-me-1 flex size-9 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted/50 hover:text-foreground lg:hidden"
         onClick={openMenu}
         type="button"
       >
@@ -66,7 +66,7 @@ export const DocsMobileNav = ({ tree }: DocsMobileNavProps) => {
 
       <dialog
         aria-label="Documentation"
-        className="fixed inset-y-0 left-0 z-50 m-0 h-dvh max-h-dvh w-[min(19rem,85vw)] max-w-none -translate-x-full border-dashed border-e bg-background text-foreground transition-[transform,overlay,display] transition-discrete duration-200 ease-[var(--ease-out)] backdrop:bg-black/40 open:translate-x-0 starting:open:-translate-x-full"
+        className="fixed inset-y-0 right-0 left-auto z-50 m-0 h-dvh max-h-dvh w-[min(19rem,85vw)] max-w-none translate-x-full border-dashed border-s bg-background text-foreground transition-[transform,overlay,display] transition-discrete duration-200 ease-[var(--ease-out)] backdrop:bg-black/40 open:translate-x-0 starting:open:translate-x-full"
         id="docs-mobile-menu"
         onClose={() => {
           document.body.style.overflow = "";

From b80bd093d59255533a3c6bfb67da1e3be99a4318 Mon Sep 17 00:00:00 2001
From: PunGrumpy <108584943+PunGrumpy@users.noreply.github.com>
Date: Sat, 25 Jul 2026 18:48:14 +0700
Subject: [PATCH 2/2] feat(web): polish docs mobile drawer motion

Fade the backdrop in sync with the panel instead of snapping, slow the
slide to 350ms on an iOS-style drawer curve (--ease-drawer), respect
prefers-reduced-motion, and add scale press feedback to the trigger and
close buttons.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/app/globals.css                | 3 +++
 apps/web/components/docs/mobile-nav.tsx | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 060f9a7..a997d09 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -93,6 +93,9 @@
   /* Strong ease-in-out for on-screen movement */
   --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
 
+  /* iOS-like drawer curve (from Ionic Framework) */
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+
   /* Global Scrollbar Colors */
   --scrollbar-track: transparent;
   --scrollbar-thumb: oklch(0.8 0 0);
diff --git a/apps/web/components/docs/mobile-nav.tsx b/apps/web/components/docs/mobile-nav.tsx
index b57a05d..0602047 100644
--- a/apps/web/components/docs/mobile-nav.tsx
+++ b/apps/web/components/docs/mobile-nav.tsx
@@ -57,7 +57,7 @@ export const DocsMobileNav = ({ tree }: DocsMobileNavProps) => {
         aria-controls="docs-mobile-menu"
         aria-haspopup="dialog"
         aria-label="Open documentation menu"
-        className="-me-1 flex size-9 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted/50 hover:text-foreground lg:hidden"
+        className="-me-1 flex size-9 items-center justify-center rounded-lg text-muted-foreground transition-transform duration-150 hover:bg-muted/50 hover:text-foreground active:scale-[0.97] lg:hidden"
         onClick={openMenu}
         type="button"
       >
@@ -66,7 +66,7 @@ export const DocsMobileNav = ({ tree }: DocsMobileNavProps) => {
 
       <dialog
         aria-label="Documentation"
-        className="fixed inset-y-0 right-0 left-auto z-50 m-0 h-dvh max-h-dvh w-[min(19rem,85vw)] max-w-none translate-x-full border-dashed border-s bg-background text-foreground transition-[transform,overlay,display] transition-discrete duration-200 ease-[var(--ease-out)] backdrop:bg-black/40 open:translate-x-0 starting:open:translate-x-full"
+        className="fixed inset-y-0 right-0 left-auto z-50 m-0 h-dvh max-h-dvh w-[min(19rem,85vw)] max-w-none translate-x-full border-dashed border-s bg-background text-foreground transition-[transform,overlay,display] transition-discrete duration-350 ease-[var(--ease-drawer)] backdrop:bg-black/40 backdrop:opacity-0 backdrop:transition-[opacity,overlay,display] backdrop:transition-discrete backdrop:duration-350 backdrop:ease-[var(--ease-drawer)] open:translate-x-0 open:backdrop:opacity-100 starting:open:translate-x-full starting:open:backdrop:opacity-0 motion-reduce:transition-none motion-reduce:backdrop:transition-none"
         id="docs-mobile-menu"
         onClose={() => {
           document.body.style.overflow = "";
@@ -84,7 +84,7 @@ export const DocsMobileNav = ({ tree }: DocsMobileNavProps) => {
             </Link>
             <button
               aria-label="Close menu"
-              className="-me-1 flex size-9 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted/50 hover:text-foreground"
+              className="-me-1 flex size-9 items-center justify-center rounded-lg text-muted-foreground transition-transform duration-150 hover:bg-muted/50 hover:text-foreground active:scale-[0.97]"
               onClick={closeMenu}
               type="button"
             >