From c67ec8195dc662fe2ddd5386c29d722965030f51 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Thu, 21 May 2026 12:32:25 +0530
Subject: [PATCH 1/2] feat: add mobile responsive layout for default theme

Sidebar becomes slide-out drawer on <768px with backdrop overlay.
Desktop sub-nav replaced with mobile header (hamburger + logo +
search + theme switcher). Sidebar closes on navigation. Content
padding and spacing reduced for mobile.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/themes/default/Layout.module.css      | 86 +++++++++++++++++++
 .../chronicle/src/themes/default/Layout.tsx   | 29 ++++++-
 .../src/themes/default/Page.module.css        | 14 +++
 3 files changed, 127 insertions(+), 2 deletions(-)

diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index f5fcef2..bcbf194 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -279,3 +279,89 @@
   line-height: var(--rs-line-height-mini);
   flex-shrink: 0;
 }
+
+.mobileMenuBtn {
+  display: none;
+}
+
+.backdrop {
+  display: none;
+}
+
+.mobileHeader {
+  display: none;
+}
+
+.desktopOnly {
+  display: flex;
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    height: 100vh;
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+  }
+
+  .sidebar[data-mobile-open='true'] {
+    transform: translateX(0);
+  }
+
+  .backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 99;
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  .backdrop[data-visible='true'] {
+    display: block;
+  }
+
+  .mobileHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--navbar-height);
+    padding: 0 var(--rs-space-5);
+    background: var(--rs-color-background-base-primary);
+    border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+  }
+
+  .mobileMenuBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: var(--rs-space-2);
+    color: var(--rs-color-foreground-base-primary);
+  }
+
+  .desktopOnly {
+    display: none;
+  }
+
+  .subNav {
+    display: none;
+  }
+
+  .content {
+    padding: var(--rs-space-5) var(--rs-space-5);
+  }
+
+  .card {
+    border-left: none;
+    box-shadow: none;
+  }
+
+  .cardWrapper {
+    padding: 0;
+  }
+}
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index faa9a51..5b9472d 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -4,7 +4,8 @@ import {
   CodeBracketSquareIcon,
   RectangleStackIcon,
   DocumentTextIcon,
-  Squares2X2Icon
+  Squares2X2Icon,
+  Bars3Icon
 } from '@heroicons/react/24/outline';
 import { Flex, IconButton, Button, Sidebar } from '@raystack/apsara';
 import { PlayIcon } from '@radix-ui/react-icons';
@@ -70,6 +71,7 @@ export function Layout({
   const navigate = useNavigate();
   const { page, version } = usePageContext();
   const scrollRef = useRef<HTMLDivElement>(null);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const isApiRoute = pathname === '/apis' || pathname.startsWith('/apis/');
   const isApiBase = (basePath: string) =>
     pathname === basePath || pathname.startsWith(`${basePath}/`);
@@ -106,16 +108,39 @@ export function Layout({
       requestAnimationFrame(() => {
         el.scrollTop = savedScrollTop;
       });
+    setMobileSidebarOpen(false);
   }, [pathname]);
 
   return (
     <Flex direction='column' className={cx(styles.layout, classNames?.layout)}>
+      <div
+        className={styles.backdrop}
+        data-visible={mobileSidebarOpen}
+        onClick={() => setMobileSidebarOpen(false)}
+      />
+      <div className={styles.mobileHeader}>
+        <Flex align='center' gap={3}>
+          <button
+            className={styles.mobileMenuBtn}
+            onClick={() => setMobileSidebarOpen(true)}
+            aria-label='Open menu'
+          >
+            <Bars3Icon width={20} height={20} />
+          </button>
+          <SidebarLogo config={config} />
+        </Flex>
+        <Flex align='center' gap={3}>
+          {config.search?.enabled && <Search />}
+          <ClientThemeSwitcher size={16} />
+        </Flex>
+      </div>
       <Flex className={cx(styles.body, classNames?.body)}>
         {hideSidebar ? null : (
           <Sidebar
             defaultOpen
             collapsible={false}
             className={cx(styles.sidebar, classNames?.sidebar)}
+            data-mobile-open={mobileSidebarOpen}
           >
             <Sidebar.Header className={styles.sidebarHeader}>
               <SidebarLogo config={config} />
@@ -187,7 +212,7 @@ export function Layout({
         <Flex direction='column' className={styles.mainArea}>
           <div className={styles.cardWrapper}>
             <div className={styles.card}>
-              <nav className={styles.subNav}>
+              <nav className={cx(styles.subNav, styles.desktopOnly)}>
                 <Flex align='center' gap={3} className={styles.subNavLeft}>
                   <Flex align='center' gap={2}>
                     <IconButton
diff --git a/packages/chronicle/src/themes/default/Page.module.css b/packages/chronicle/src/themes/default/Page.module.css
index e8e78cd..10f17d1 100644
--- a/packages/chronicle/src/themes/default/Page.module.css
+++ b/packages/chronicle/src/themes/default/Page.module.css
@@ -134,3 +134,17 @@
 .headerLoader {
   margin-bottom: var(--rs-space-5);
 }
+
+@media (max-width: 768px) {
+  .page {
+    gap: var(--rs-space-5);
+  }
+
+  .article {
+    max-width: 100%;
+  }
+
+  .title {
+    margin-bottom: var(--rs-space-5);
+  }
+}

From da9b796624f295b749ad412f7269491a86fd20b1 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Fri, 22 May 2026 15:11:03 +0530
Subject: [PATCH 2/2] feat: match mobile layout to Figma design

- Hamburger moved to right side with search + theme switcher
- Menu is full-screen overlay below navbar (not side drawer)
- Bottom prev/next navigation cards on mobile
- Toggle between hamburger and X icon
- Card 100% width on mobile
- Content padding 40px top, 16px horizontal per Figma specs
- Mobile nav gap 40px between prev/next cards

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/themes/default/Layout.module.css      | 114 +++++++++++-------
 .../chronicle/src/themes/default/Layout.tsx   |  86 ++++++++++---
 2 files changed, 142 insertions(+), 58 deletions(-)

diff --git a/packages/chronicle/src/themes/default/Layout.module.css b/packages/chronicle/src/themes/default/Layout.module.css
index bcbf194..d73c21b 100644
--- a/packages/chronicle/src/themes/default/Layout.module.css
+++ b/packages/chronicle/src/themes/default/Layout.module.css
@@ -282,70 +282,62 @@
 
 .mobileMenuBtn {
   display: none;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--rs-space-1);
+  color: var(--rs-color-foreground-base-primary);
 }
 
-.backdrop {
+.mobileHeader {
   display: none;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--navbar-height);
+  padding: 0 var(--rs-space-5);
+  background: var(--rs-color-background-base-primary);
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+  backdrop-filter: blur(1px);
 }
 
-.mobileHeader {
+.mobileMenu {
   display: none;
+  position: fixed;
+  top: var(--navbar-height);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  background: var(--rs-color-background-base-primary);
+  overflow-y: auto;
+  padding: var(--rs-space-7) var(--rs-space-5);
 }
 
-.desktopOnly {
-  display: flex;
+.mobileMenu[data-open='true'] {
+  display: block;
+}
+
+.mobileNav {
+  display: none;
 }
 
 @media (max-width: 768px) {
   .sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 100;
-    height: 100vh;
-    transform: translateX(-100%);
-    transition: transform 0.25s ease;
-  }
-
-  .sidebar[data-mobile-open='true'] {
-    transform: translateX(0);
-  }
-
-  .backdrop {
     display: none;
-    position: fixed;
-    inset: 0;
-    z-index: 99;
-    background: rgba(0, 0, 0, 0.4);
-  }
-
-  .backdrop[data-visible='true'] {
-    display: block;
   }
 
   .mobileHeader {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: var(--navbar-height);
-    padding: 0 var(--rs-space-5);
-    background: var(--rs-color-background-base-primary);
-    border-bottom: 0.5px solid var(--rs-color-border-base-primary);
   }
 
   .mobileMenuBtn {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: var(--rs-space-2);
-    color: var(--rs-color-foreground-base-primary);
   }
 
-  .desktopOnly {
-    display: none;
+  .mobileMenu[data-open='true'] {
+    display: block;
   }
 
   .subNav {
@@ -353,10 +345,11 @@
   }
 
   .content {
-    padding: var(--rs-space-5) var(--rs-space-5);
+    padding: var(--rs-space-10) var(--rs-space-5);
   }
 
   .card {
+    width: 100%;
     border-left: none;
     box-shadow: none;
   }
@@ -364,4 +357,41 @@
   .cardWrapper {
     padding: 0;
   }
+
+  .mobileNav {
+    display: flex;
+    gap: var(--rs-space-10);
+    padding: var(--rs-space-3) var(--rs-space-5);
+    background: var(--rs-color-background-base-primary);
+  }
+
+  .mobileNavLink {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--rs-space-3);
+    padding: var(--rs-space-4) var(--rs-space-3);
+    border: 0.5px solid var(--rs-color-border-base-primary);
+    border-radius: var(--rs-radius-4);
+    text-decoration: none;
+    font-family: var(--rs-font-body);
+    font-size: var(--rs-font-size-regular);
+    font-weight: var(--rs-font-weight-medium);
+    line-height: var(--rs-line-height-regular);
+    letter-spacing: var(--rs-letter-spacing-regular);
+    color: var(--rs-color-foreground-base-tertiary);
+    min-width: 0;
+  }
+
+  .mobileNavLink[data-direction='next'] {
+    justify-content: flex-end;
+    background: var(--rs-color-background-base-secondary);
+    color: var(--rs-color-foreground-base-primary);
+  }
+
+  .mobileNavLabel {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
diff --git a/packages/chronicle/src/themes/default/Layout.tsx b/packages/chronicle/src/themes/default/Layout.tsx
index 5b9472d..67d8e57 100644
--- a/packages/chronicle/src/themes/default/Layout.tsx
+++ b/packages/chronicle/src/themes/default/Layout.tsx
@@ -5,7 +5,8 @@ import {
   RectangleStackIcon,
   DocumentTextIcon,
   Squares2X2Icon,
-  Bars3Icon
+  Bars3Icon,
+  XMarkIcon
 } from '@heroicons/react/24/outline';
 import { Flex, IconButton, Button, Sidebar } from '@raystack/apsara';
 import { PlayIcon } from '@radix-ui/react-icons';
@@ -113,34 +114,73 @@ export function Layout({
 
   return (
     <Flex direction='column' className={cx(styles.layout, classNames?.layout)}>
-      <div
-        className={styles.backdrop}
-        data-visible={mobileSidebarOpen}
-        onClick={() => setMobileSidebarOpen(false)}
-      />
       <div className={styles.mobileHeader}>
+        <SidebarLogo config={config} />
         <Flex align='center' gap={3}>
+          {config.search?.enabled && <Search />}
+          <ClientThemeSwitcher size={16} />
           <button
             className={styles.mobileMenuBtn}
-            onClick={() => setMobileSidebarOpen(true)}
-            aria-label='Open menu'
+            onClick={() => setMobileSidebarOpen(o => !o)}
+            aria-label={mobileSidebarOpen ? 'Close menu' : 'Open menu'}
           >
-            <Bars3Icon width={20} height={20} />
+            {mobileSidebarOpen
+              ? <XMarkIcon width={16} height={16} />
+              : <Bars3Icon width={16} height={16} />}
           </button>
-          <SidebarLogo config={config} />
-        </Flex>
-        <Flex align='center' gap={3}>
-          {config.search?.enabled && <Search />}
-          <ClientThemeSwitcher size={16} />
         </Flex>
       </div>
+      <div className={styles.mobileMenu} data-open={mobileSidebarOpen}>
+        {showTopLinks ? (
+          <div className={styles.topLinks}>
+            {contentEntries.map(entry => (
+              <Sidebar.Item
+                key={entry.href}
+                href={entry.href}
+                active={activeContentDir === entry.contentDir}
+                leadingIcon={renderConfigIcon(entry.icon, entry.label, <DocumentTextIcon width={16} height={16} />)}
+                classNames={{ root: styles.topLinkItem, text: styles.topLinkText }}
+                render={<RouterLink to={entry.href} />}
+              >
+                {entry.label}
+              </Sidebar.Item>
+            ))}
+            {apiEntries.map(api => (
+              <Sidebar.Item
+                key={`${api.basePath}-${api.name}`}
+                href={api.basePath}
+                active={isApiBase(api.basePath)}
+                leadingIcon={renderConfigIcon(api.icon, api.name, <CodeBracketSquareIcon width={16} height={16} />)}
+                classNames={{ root: styles.topLinkItem, text: styles.topLinkText }}
+                render={<RouterLink to={api.basePath} />}
+              >
+                {api.name} API
+              </Sidebar.Item>
+            ))}
+          </div>
+        ) : null}
+        {tree.children.map((item, i) => (
+          isApiRoute ? (
+            <ApiSidebarNode
+              key={item.type === 'page' ? item.url : (item.name?.toString() ?? i)}
+              item={item}
+              pathname={pathname}
+            />
+          ) : (
+            <SidebarNode
+              key={item.type === 'page' ? item.url : (item.name?.toString() ?? i)}
+              item={item}
+              pathname={pathname}
+            />
+          )
+        ))}
+      </div>
       <Flex className={cx(styles.body, classNames?.body)}>
         {hideSidebar ? null : (
           <Sidebar
             defaultOpen
             collapsible={false}
             className={cx(styles.sidebar, classNames?.sidebar)}
-            data-mobile-open={mobileSidebarOpen}
           >
             <Sidebar.Header className={styles.sidebarHeader}>
               <SidebarLogo config={config} />
@@ -212,7 +252,7 @@ export function Layout({
         <Flex direction='column' className={styles.mainArea}>
           <div className={styles.cardWrapper}>
             <div className={styles.card}>
-              <nav className={cx(styles.subNav, styles.desktopOnly)}>
+              <nav className={styles.subNav}>
                 <Flex align='center' gap={3} className={styles.subNavLeft}>
                   <Flex align='center' gap={2}>
                     <IconButton
@@ -243,6 +283,20 @@ export function Layout({
               <main className={cx(styles.content, classNames?.content)}>
                 {children}
               </main>
+              <div className={styles.mobileNav}>
+                {prev ? (
+                  <RouterLink to={prev.url} className={styles.mobileNavLink}>
+                    <ArrowLeftIcon width={16} height={16} />
+                    <span className={styles.mobileNavLabel}>{prev.title}</span>
+                  </RouterLink>
+                ) : <div />}
+                {next ? (
+                  <RouterLink to={next.url} className={styles.mobileNavLink} data-direction='next'>
+                    <span className={styles.mobileNavLabel}>{next.title}</span>
+                    <ArrowRightIcon width={16} height={16} />
+                  </RouterLink>
+                ) : <div />}
+              </div>
             </div>
           </div>
         </Flex>