Repository: marigold-ui/marigold
Pull request #3166 (2023-07-20 06:08:15)

docs: theme menu on top of page

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 154cc8cf6b433026040bdde067c0fc2d8e448203

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/theme-menu-to-top?filename=.changeset/healthy-adults-jog.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A---%0A%0Adocs%3A%20theme%20menu%20on%20top%20of%20page%0A)


vercel[bot]: [vc]: #kf5HuWKU5LDPBLf4ThHfvf6JudJo4kNdZkDt2uBlcfM=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJtYXJpZ29sZC1zdG9yeWJvb2siLCJyb290RGlyZWN0b3J5IjpudWxsLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbWFyaWdvbGQvbWFyaWdvbGQtc3Rvcnlib29rL0I1eWNFQjNjV0FmQ2NoRmluS1ZzOHh1S0JFRWEiLCJuZXh0Q29tbWl0U3RhdHVzIjoiUEVORElORyJ9LHsibmFtZSI6Im1hcmlnb2xkLWRvY3MiLCJyb290RGlyZWN0b3J5IjpudWxsLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbWFyaWdvbGQvbWFyaWdvbGQtZG9jcy81dkRXdU4xaGk5OWhaWnM4aTI4ZUFHekhQemdFIiwibmV4dENvbW1pdFN0YXR1cyI6IlBFTkRJTkcifV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **marigold-docs** | 🔄 Building ([Inspect](https://vercel.com/marigold/marigold-docs/5vDWuN1hi99hZZs8i28eAGzHPzgE)) |  | Jul 20, 2023 6:08am |
| **marigold-storybook** | 🔄 Building ([Inspect](https://vercel.com/marigold/marigold-storybook/B5ycEB3cWAfCchFinKVs8xuKBEEa)) |  | Jul 20, 2023 6:08am |



codecov[bot]: ## [Codecov](https://app.codecov.io/gh/marigold-ui/marigold/pull/3166?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) Report
> Merging [#3166](https://app.codecov.io/gh/marigold-ui/marigold/pull/3166?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) (154cc8c) into [main](https://app.codecov.io/gh/marigold-ui/marigold/commit/17cb1030e620fc62f0df2bf4756622fae5d396d0?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui) (17cb103) will **not change** coverage.
> The diff coverage is `n/a`.

[![Impacted file tree graph](https://app.codecov.io/gh/marigold-ui/marigold/pull/3166/graphs/tree.svg?width=650&height=150&src=pr&token=YIIcKX7TZu&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui)](https://app.codecov.io/gh/marigold-ui/marigold/pull/3166?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=marigold-ui)

```diff
@@            Coverage Diff            @@
##              main     #3166   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          111       111           
  Lines         6911      6911           
  Branches       322       322           
=========================================
  Hits          6911      6911           
```



Patch:
diff --git a/docs/app/_components/MobileNavigation.tsx b/docs/app/_components/MobileNavigation.tsx
index 4875a75dd..ab3b92398 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 ee8364d8b..b57995581 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 77af71bd8..e08bb7220 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.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 dca62c59d..19f37847a 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 5d229c4e7..ccc569b40 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 66a87a39c..8a2587532 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 ceb9af679..81e263ebc 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>


Test patch:
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 93d01da67..beffd17e5 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 = {