@raystack/chronicle 0.11.3 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/chronicle",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "description": "Config-driven documentation framework",
   "license": "Apache-2.0",
   "type": "module",

package/src/components/api/api-code-snippet.module.css

@@ -3,6 +3,7 @@
   border-radius: var(--rs-radius-2);
   overflow: hidden;
   width: 100%;
+  max-width: 100%;
 }
 
 .header {
@@ -20,4 +21,5 @@
 
 .body {
   background: var(--rs-color-background-base-primary);
+  overflow-x: auto;
 }

package/src/components/api/api-overview.module.css

@@ -60,6 +60,16 @@
 
   .left,
   .right {
+    min-width: 0;
+    max-width: 100%;
     width: 100%;
   }
 }
+
+@media (max-width: 768px) {
+  .layout {
+    gap: var(--rs-space-5);
+    padding-left: var(--rs-space-5);
+    padding-right: var(--rs-space-5);
+  }
+}

package/src/themes/default/Layout.module.css

@@ -283,3 +283,121 @@
   line-height: var(--rs-line-height-mini);
   flex-shrink: 0;
 }
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.mobileMenuFooter {
+  margin-top: var(--rs-space-7);
+  padding-top: var(--rs-space-5);
+  border-top: 0.5px solid var(--rs-color-border-base-primary);
+}
+
+.mobileNav {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    display: none;
+  }
+
+  .mobileHeader {
+    display: flex;
+  }
+
+  .mobileMenuBtn {
+    display: flex;
+  }
+
+  .mobileMenu[data-open='true'] {
+    display: block;
+  }
+
+  .subNav {
+    display: none;
+  }
+
+  .content {
+    padding: var(--rs-space-10) var(--rs-space-5);
+  }
+
+  .card {
+    width: 100%;
+    border-left: none;
+    box-shadow: none;
+  }
+
+  .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;
+  }
+}

package/src/themes/default/Layout.tsx

@@ -4,7 +4,9 @@ import {
   CodeBracketSquareIcon,
   RectangleStackIcon,
   DocumentTextIcon,
-  Squares2X2Icon
+  Squares2X2Icon,
+  Bars3Icon,
+  XMarkIcon
 } from '@heroicons/react/24/outline';
 import { Flex, IconButton, Button, Sidebar } from '@raystack/apsara';
 import { PlayIcon } from '@radix-ui/react-icons';
@@ -73,6 +75,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}/`);
@@ -109,10 +112,82 @@ export function Layout({
       requestAnimationFrame(() => {
         el.scrollTop = savedScrollTop;
       });
+    setMobileSidebarOpen(false);
   }, [pathname]);
 
   return (
     <Flex direction='column' className={cx(styles.layout, classNames?.layout)}>
+      <div className={styles.mobileHeader}>
+        <SidebarLogo config={config} />
+        <Flex align='center' gap={3}>
+          {config.search?.enabled && <Search />}
+          <ClientThemeSwitcher size={16} />
+          {!hideSidebar && (
+            <button
+              type='button'
+              className={styles.mobileMenuBtn}
+              onClick={() => setMobileSidebarOpen(o => !o)}
+              aria-label={mobileSidebarOpen ? 'Close menu' : 'Open menu'}
+              aria-expanded={mobileSidebarOpen}
+              aria-controls='mobile-menu'
+            >
+              {mobileSidebarOpen
+                ? <XMarkIcon width={16} height={16} />
+                : <Bars3Icon width={16} height={16} />}
+            </button>
+          )}
+        </Flex>
+      </div>
+      <div id='mobile-menu' className={styles.mobileMenu} data-open={!hideSidebar && 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}
+            />
+          )
+        ))}
+        {config.versions?.length ? (
+          <div className={styles.mobileMenuFooter}>
+            <VersionSwitcher />
+          </div>
+        ) : null}
+      </div>
       <Flex className={cx(styles.body, classNames?.body)}>
         {hideSidebar ? null : (
           <Sidebar
@@ -221,6 +296,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>

package/src/themes/default/Page.module.css

@@ -184,3 +184,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);
+  }
+}