From 44b16b3c9081466af9b2be200ec50c2f2314ad26 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Thu, 14 Dec 2023 10:01:53 +0000
Subject: [PATCH] docs: make release switcher responsive

---
 apps/docs/components/FooterActions/index.tsx  | 20 +++++++++++++++++++
 .../FooterActions/styles.module.css           | 18 +++++++++++++++++
 .../docs/components/ReleaseSwitcher/index.tsx |  8 ++++++--
 .../ReleaseSwitcher/styles.module.css         |  5 +++++
 apps/docs/components/Viewport/index.tsx       | 18 +++++++++++++++++
 .../components/Viewport/styles.module.css     | 17 ++++++++++++++++
 apps/docs/theme.config.tsx                    | 11 +++++++++-
 7 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 apps/docs/components/FooterActions/index.tsx
 create mode 100644 apps/docs/components/FooterActions/styles.module.css
 create mode 100644 apps/docs/components/Viewport/index.tsx
 create mode 100644 apps/docs/components/Viewport/styles.module.css

diff --git a/apps/docs/components/FooterActions/index.tsx b/apps/docs/components/FooterActions/index.tsx
new file mode 100644
index 0000000000..b2eb8fddfd
--- /dev/null
+++ b/apps/docs/components/FooterActions/index.tsx
@@ -0,0 +1,20 @@
+import { getClassNameFactory } from "@/core/lib";
+
+import styles from "./styles.module.css";
+import { ThemeSwitch } from "nextra-theme-docs";
+import { ReleaseSwitcher } from "../ReleaseSwitcher";
+
+const getClassName = getClassNameFactory("FooterActions", styles);
+
+export const FooterActions = () => {
+  return (
+    <div className={getClassName()}>
+      <div className={getClassName("themeSwitch")}>
+        <ThemeSwitch />
+      </div>
+      <div className={getClassName("releaseSwitcher")}>
+        <ReleaseSwitcher variant="light" />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/docs/components/FooterActions/styles.module.css b/apps/docs/components/FooterActions/styles.module.css
new file mode 100644
index 0000000000..816828cf64
--- /dev/null
+++ b/apps/docs/components/FooterActions/styles.module.css
@@ -0,0 +1,18 @@
+.FooterActions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  width: 100%;
+}
+
+.FooterActions-releaseSwitcher {
+  display: block;
+  margin-left: auto;
+}
+
+@media (min-width: 768px) {
+  .FooterActions-releaseSwitcher {
+    display: none;
+  }
+}
diff --git a/apps/docs/components/ReleaseSwitcher/index.tsx b/apps/docs/components/ReleaseSwitcher/index.tsx
index 9981065344..653085678f 100644
--- a/apps/docs/components/ReleaseSwitcher/index.tsx
+++ b/apps/docs/components/ReleaseSwitcher/index.tsx
@@ -11,7 +11,11 @@ const { version } = packageJson;
 
 const getClassName = getClassNameFactory("ReleaseSwitcher", styles);
 
-export const ReleaseSwitcher = () => {
+export const ReleaseSwitcher = ({
+  variant = "default",
+}: {
+  variant?: "light" | "default";
+}) => {
   const isCanary = process.env.NEXT_PUBLIC_IS_CANARY === "true" || false;
   const isLatest = process.env.NEXT_PUBLIC_IS_LATEST === "true" || false;
 
@@ -49,7 +53,7 @@ export const ReleaseSwitcher = () => {
 
   return (
     <select
-      className={getClassName()}
+      className={getClassName({ [variant]: true })}
       value={currentValue}
       onChange={(e) => {
         const newHref = e.currentTarget.value
diff --git a/apps/docs/components/ReleaseSwitcher/styles.module.css b/apps/docs/components/ReleaseSwitcher/styles.module.css
index 4ade671bf8..864b7d9c52 100644
--- a/apps/docs/components/ReleaseSwitcher/styles.module.css
+++ b/apps/docs/components/ReleaseSwitcher/styles.module.css
@@ -13,3 +13,8 @@
   height: 33px; /* Magic number to align with Nextra search */
   width: 156px;
 }
+
+.ReleaseSwitcher--light {
+  background-color: white;
+  border: 1px solid var(--puck-color-grey-9);
+}
diff --git a/apps/docs/components/Viewport/index.tsx b/apps/docs/components/Viewport/index.tsx
new file mode 100644
index 0000000000..0fe1f6f84b
--- /dev/null
+++ b/apps/docs/components/Viewport/index.tsx
@@ -0,0 +1,18 @@
+import { getClassNameFactory } from "@/core/lib";
+
+import styles from "./styles.module.css";
+import { ReactNode } from "react";
+
+const getClassName = getClassNameFactory("Viewport", styles);
+
+export const Viewport = ({
+  children,
+  mobile,
+  desktop,
+}: {
+  children: ReactNode;
+  mobile?: boolean;
+  desktop?: boolean;
+}) => {
+  return <div className={getClassName({ mobile, desktop })}>{children}</div>;
+};
diff --git a/apps/docs/components/Viewport/styles.module.css b/apps/docs/components/Viewport/styles.module.css
new file mode 100644
index 0000000000..ec1d258300
--- /dev/null
+++ b/apps/docs/components/Viewport/styles.module.css
@@ -0,0 +1,17 @@
+.Viewport {
+  display: none;
+}
+
+.Viewport--mobile {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .Viewport--desktop {
+    display: block;
+  }
+
+  .Viewport--mobile:not(.Viewport--desktop) {
+    display: none;
+  }
+}
diff --git a/apps/docs/theme.config.tsx b/apps/docs/theme.config.tsx
index 3959d16e0c..1cf72309bf 100644
--- a/apps/docs/theme.config.tsx
+++ b/apps/docs/theme.config.tsx
@@ -3,6 +3,8 @@ import { useRouter } from "next/router";
 import { DocsThemeConfig, useConfig } from "nextra-theme-docs";
 
 import { ReleaseSwitcher } from "./components/ReleaseSwitcher";
+import { FooterActions } from "./components/FooterActions";
+import { Viewport } from "./components/Viewport";
 
 const Head = () => {
   const { asPath, defaultLocale, locale } = useRouter();
@@ -115,7 +117,14 @@ const theme: DocsThemeConfig = {
   docsRepositoryBase: "https://github.com/measuredco/puck/tree/main/apps/docs",
   primarySaturation: 0,
   navbar: {
-    extraContent: ReleaseSwitcher,
+    extraContent: () => (
+      <Viewport desktop>
+        <ReleaseSwitcher />
+      </Viewport>
+    ),
+  },
+  themeSwitch: {
+    component: FooterActions,
   },
 };