docs: theme menu on top of page (#3166)

Co-authored-by: Sebastian Sebald <[email protected]>

docs/app/_components/MobileNavigation.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { Dialog, Button, Header } from '@/ui';
+import { Dialog, Button, Header, Split } from '@/ui';
 
 import { Logo } from './Logo';
 import { Navigation } from './Navigation';
+import { ThemeMenu } from './ThemeMenu';
 
 // Helpers
 // ---------------
@@ -27,20 +28,24 @@ const MenuIcon = () => (
 // Component
 // ---------------
 export const MobileNavigation = () => (
-  <Dialog.Trigger>
-    <Button variant="ghost" className="md:hidden">
-      <MenuIcon />
-    </Button>
-    <Dialog variant="fullpage" closeButton>
-      {({ close }) => (
-        <>
-          <Header className="flex items-center gap-2 pl-4 text-3xl font-bold uppercase tracking-tight text-[#46505a]">
-            <Logo className="h-10 w-10" />
-            Marigold
-          </Header>
-          <Navigation onClick={close} />
-        </>
-      )}
-    </Dialog>
-  </Dialog.Trigger>
+  <div className="flex w-full md:hidden">
+    <Dialog.Trigger>
+      <Button variant="ghost">
+        <MenuIcon />
+      </Button>
+      <Dialog variant="fullpage" closeButton>
+        {({ close }) => (
+          <>
+            <Header className="flex items-center gap-2 pl-4 text-3xl font-bold uppercase tracking-tight text-[#46505a]">
+              <Logo className="h-10 w-10" />
+              Marigold
+            </Header>
+            <Navigation onClick={close} />
+          </>
+        )}
+      </Dialog>
+    </Dialog.Trigger>
+    <Split />
+    <ThemeMenu />
+  </div>
 );

docs/app/_components/SiteNavigation.tsx

@@ -1,10 +1,14 @@
+import { Split } from '@/ui';
 import { Logo } from './Logo';
+import { ThemeMenu } from './ThemeMenu';
 
 export const SiteNavigation = () => (
   <div className="hidden w-full md:flex">
     <div className="flex items-center gap-2 text-lg font-bold uppercase tracking-tight text-[#46505a]">
       <Logo className="h-6 w-6" />
       Marigold
     </div>
+    <Split />
+    <ThemeMenu />
   </div>
 );

docs/app/components/[...slug]/_components/ThemeMenu.tsx → docs/app/_components/ThemeMenu.tsx

@@ -10,7 +10,8 @@ export const ThemeMenu = () => {
   return (
     <Menu.Trigger>
       <Button>
-        {current} <ChevronDown />
+        {current ? current : themes.b2b.name} theme
+        <ChevronDown />
       </Button>
       <Menu onAction={current => setTheme(current)}>
         {Object.keys(themes).map(name => (

docs/app/components/[...slug]/_components/ThemeSwitch.test.tsx → docs/app/_components/ThemeSwitch.test.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { act, renderHook } from '@testing-library/react-hooks';
-import { b2bTheme, coreTheme } from '../../../../theme';
+import { b2bTheme, coreTheme } from '../../theme';
 import { MarigoldThemeSwitch, useThemeSwitch } from './ThemeSwitch';
 
 const themes = {

docs/app/components/[...slug]/_components/AppearanceTable.tsx

@@ -2,7 +2,7 @@
 
 import { Card, Inline, Table, Text, Theme, ConfigSchema } from '@/ui';
 import { BlankCanvas } from './icons';
-import { useThemeSwitch } from './ThemeSwitch';
+import { useThemeSwitch } from '../../../_components/ThemeSwitch';
 
 export interface AppearanceTableProps {
   component: keyof Theme['components'];

docs/app/components/[...slug]/_components/index.ts

@@ -1,4 +1,4 @@
 export * from './AppearanceTable';
 export * from './PropsTable';
-export * from './ThemeMenu';
-export * from './ThemeSwitch';
+export * from '../../../_components/ThemeMenu';
+export * from '../../../_components/ThemeSwitch';

docs/app/components/[...slug]/page.tsx

@@ -4,21 +4,13 @@ import { allComponentPages } from 'contentlayer/generated';
 
 import { Headline } from '@/ui';
 import { Mdx } from '@/ui/mdx';
-import { b2bTheme, coreTheme } from '@/theme';
-
-import { MarigoldThemeSwitch, ThemeMenu } from './_components';
 
 interface ComponentPageProps {
   params: {
     slug: string[];
   };
 }
 
-const themes = {
-  b2bTheme,
-  coreTheme,
-};
-
 async function getPageFromParams(params: ComponentPageProps['params']) {
   const slug = params?.slug?.join('/');
   const page = allComponentPages.find(page => page.slugAsParams === slug);
@@ -62,10 +54,7 @@ export default async function ComponentPage({ params }: ComponentPageProps) {
   return (
     <article className="prose py-6">
       <Headline level="1">{page.title}</Headline>
-      <MarigoldThemeSwitch themes={themes} initial="b2bTheme">
-        <ThemeMenu />
-        <Mdx title={page.title} code={page.body.code} />
-      </MarigoldThemeSwitch>
+      <Mdx title={page.title} code={page.body.code} />
     </article>
   );
 }

docs/app/layout.tsx

@@ -7,34 +7,42 @@ import { fontSans } from '@/theme/fonts';
 import { Analytics } from './_components/Analytics';
 import { Navigation } from './_components/Navigation';
 import { SiteHeader } from './_components/SiteHeader';
+import { MarigoldThemeSwitch } from './_components/ThemeSwitch';
+import { b2bTheme, coreTheme } from '@/theme';
 
 // Metadata
 // ---------------
 export const metadata = {
   title: 'Marigold Documentation',
   description: "Documentation of Reservix' Design System",
 };
+const themes = {
+  b2b: b2bTheme,
+  core: coreTheme,
+};
 
 // Layout
 // ---------------
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="en">
       <body className={`${fontSans.className} min-h-screen`}>
-        <MarigoldProvider theme={theme}>
-          <div className="flex min-h-screen flex-col">
-            <SiteHeader />
-            <div className="container flex-1">
-              <aside className="fixed top-14 z-20 -ml-2 hidden w-60 overflow-y-auto md:block">
-                <Navigation />
-              </aside>
-              <div className="md:pl-60 lg:pl-72">
-                <main className="max-w-3xl">{children}</main>
+        <MarigoldThemeSwitch themes={themes}>
+          <MarigoldProvider theme={theme}>
+            <div className="flex min-h-screen flex-col">
+              <SiteHeader />
+              <div className="container flex-1">
+                <aside className="fixed top-14 z-20 -ml-2 hidden w-60 overflow-y-auto md:block">
+                  <Navigation />
+                </aside>
+                <div className="md:pl-60 lg:pl-72">
+                  <main className="max-w-3xl">{children}</main>
+                </div>
               </div>
+              <footer className="container">Marigold Footer</footer>
             </div>
-            <footer className="container">Marigold Footer</footer>
-          </div>
-        </MarigoldProvider>
+          </MarigoldProvider>
+        </MarigoldThemeSwitch>
         <Analytics />
       </body>
     </html>