docs: make release switcher responsive

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>
+  );
+};

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;
+  }
+}

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

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);
+}

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>;
+};

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;
+  }
+}

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,
   },
 };