From d36d4ef302dd1fa67c92d8789b037d30d4ec09b9 Mon Sep 17 00:00:00 2001
From: sarahgm <38324334+sarahgm@users.noreply.github.com>
Date: Thu, 20 Jul 2023 10:16:40 +0200
Subject: [PATCH] docs: theme menu on top of page (#3166)

Co-authored-by: Sebastian Sebald <sebastian.sebald@reservix.de>
---
 docs/app/_components/MobileNavigation.tsx     | 39 +++++++++++--------
 docs/app/_components/SiteNavigation.tsx       |  4 ++
 .../[...slug] => }/_components/ThemeMenu.tsx  |  3 +-
 .../_components/ThemeSwitch.test.tsx          |  2 +-
 .../_components/ThemeSwitch.tsx               |  0
 .../[...slug]/_components/AppearanceTable.tsx |  2 +-
 .../components/[...slug]/_components/index.ts |  4 +-
 docs/app/components/[...slug]/page.tsx        | 13 +------
 docs/app/layout.tsx                           | 32 +++++++++------
 9 files changed, 53 insertions(+), 46 deletions(-)
 rename docs/app/{components/[...slug] => }/_components/ThemeMenu.tsx (87%)
 rename docs/app/{components/[...slug] => }/_components/ThemeSwitch.test.tsx (93%)
 rename docs/app/{components/[...slug] => }/_components/ThemeSwitch.tsx (100%)

diff --git a/docs/app/_components/MobileNavigation.tsx b/docs/app/_components/MobileNavigation.tsx
index 4875a75ddf..ab3b92398d 100644
--- a/docs/app/_components/MobileNavigation.tsx
+++ b/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>
 );
diff --git a/docs/app/_components/SiteNavigation.tsx b/docs/app/_components/SiteNavigation.tsx
index ee8364d8b5..b579955818 100644
--- a/docs/app/_components/SiteNavigation.tsx
+++ b/docs/app/_components/SiteNavigation.tsx
@@ -1,4 +1,6 @@
+import { Split } from '@/ui';
 import { Logo } from './Logo';
+import { ThemeMenu } from './ThemeMenu';
 
 export const SiteNavigation = () => (
   <div className="hidden w-full md:flex">
@@ -6,5 +8,7 @@ export const SiteNavigation = () => (
       <Logo className="h-6 w-6" />
       Marigold
     </div>
+    <Split />
+    <ThemeMenu />
   </div>
 );
diff --git a/docs/app/components/[...slug]/_components/ThemeMenu.tsx b/docs/app/_components/ThemeMenu.tsx
similarity index 87%
rename from docs/app/components/[...slug]/_components/ThemeMenu.tsx
rename to docs/app/_components/ThemeMenu.tsx
index 77af71bd8b..e08bb72203 100644
--- a/docs/app/components/[...slug]/_components/ThemeMenu.tsx
+++ b/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 => (
diff --git a/docs/app/components/[...slug]/_components/ThemeSwitch.test.tsx b/docs/app/_components/ThemeSwitch.test.tsx
similarity index 93%
rename from docs/app/components/[...slug]/_components/ThemeSwitch.test.tsx
rename to docs/app/_components/ThemeSwitch.test.tsx
index 93d01da676..beffd17e59 100644
--- a/docs/app/components/[...slug]/_components/ThemeSwitch.test.tsx
+++ b/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 = {
diff --git a/docs/app/components/[...slug]/_components/ThemeSwitch.tsx b/docs/app/_components/ThemeSwitch.tsx
similarity index 100%
rename from docs/app/components/[...slug]/_components/ThemeSwitch.tsx
rename to docs/app/_components/ThemeSwitch.tsx
diff --git a/docs/app/components/[...slug]/_components/AppearanceTable.tsx b/docs/app/components/[...slug]/_components/AppearanceTable.tsx
index dca62c59d7..19f37847a1 100644
--- a/docs/app/components/[...slug]/_components/AppearanceTable.tsx
+++ b/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'];
diff --git a/docs/app/components/[...slug]/_components/index.ts b/docs/app/components/[...slug]/_components/index.ts
index 5d229c4e7f..ccc569b40e 100644
--- a/docs/app/components/[...slug]/_components/index.ts
+++ b/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';
diff --git a/docs/app/components/[...slug]/page.tsx b/docs/app/components/[...slug]/page.tsx
index 66a87a39c0..8a2587532a 100644
--- a/docs/app/components/[...slug]/page.tsx
+++ b/docs/app/components/[...slug]/page.tsx
@@ -4,9 +4,6 @@ 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: {
@@ -14,11 +11,6 @@ interface ComponentPageProps {
   };
 }
 
-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>
   );
 }
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
index ceb9af679d..81e263ebcc 100644
--- a/docs/app/layout.tsx
+++ b/docs/app/layout.tsx
@@ -7,6 +7,8 @@ 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
 // ---------------
@@ -14,6 +16,10 @@ export const metadata = {
   title: 'Marigold Documentation',
   description: "Documentation of Reservix' Design System",
 };
+const themes = {
+  b2b: b2bTheme,
+  core: coreTheme,
+};
 
 // Layout
 // ---------------
@@ -21,20 +27,22 @@ 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>