chore(docs): update mobile navigation to include header

mlaursen · Oct 8, 2023 · b7710cd · b7710cd
1 parent 86f2c25
commit b7710cd
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/apps/docs/src/components/RootLayout/Navigation.tsx b/apps/docs/src/components/RootLayout/Navigation.tsx
@@ -4,9 +4,15 @@ import { type ReactElement } from "react";
 import { NavigationItemGroup } from "./NavigationItemGroup.jsx";
 import { RenderNavigationItem } from "./RenderNavigationItem.jsx";
 
-export function Navigation(): ReactElement {
+export interface NavigationProps {
+  className?: string;
+}
+
+export function Navigation(props: NavigationProps): ReactElement {
+  const { className } = props;
+
   return (
-    <NavigationItemGroup depth={0}>
+    <NavigationItemGroup depth={0} className={className}>
       <RenderRecursively items={navItems} render={RenderNavigationItem} />
     </NavigationItemGroup>
   );

diff --git a/apps/docs/src/components/RootLayout/RootLayout.module.scss b/apps/docs/src/components/RootLayout/RootLayout.module.scss
@@ -19,3 +19,7 @@
     grid-template-columns: 1fr var(--toc-width);
   }
 }
+
+.scrollable {
+  overflow: auto;
+}
diff --git a/apps/docs/src/components/RootLayout/RootLayout.tsx b/apps/docs/src/components/RootLayout/RootLayout.tsx
@@ -2,6 +2,8 @@
 import { GithubLink } from "@/components/GithubLink.jsx";
 import { WebsiteConfiguration } from "@/components/WebsiteConfiguration/WebsiteConfiguration.jsx";
 import {
+  AppBar,
+  AppBarTitle,
   Button,
   LayoutAppBar,
   LayoutNav,
@@ -20,6 +22,7 @@ import {
   type RootLayoutTitleProps,
 } from "./RootLayoutTitle.jsx";
 import { Search } from "./Search.jsx";
+import { VersionDropdown } from "./VersionDropdown.jsx";
 
 export interface RootLayoutProps {
   isMac: boolean;
@@ -62,7 +65,11 @@ export function RootLayout(props: RootLayoutProps): ReactElement {
       </LayoutNav>
       {temporary && (
         <Sheet {...temporaryNavProps}>
-          <Navigation />
+          <AppBar theme="clear">
+            <AppBarTitle>react-md</AppBarTitle>
+            <VersionDropdown {...titleProps} />
+          </AppBar>
+          <Navigation className={styles.scrollable} />
         </Sheet>
       )}
       <Main