From 668062fda3c960c4ffb1812a7cf7c13412f06b2c Mon Sep 17 00:00:00 2001
From: Iwo Plaza <iwoplaza@gmail.com>
Date: Fri, 24 Apr 2026 10:04:15 +0200
Subject: [PATCH] docs: More intuitive navigation on the examples page

---
 .../public/stackblitz-logo-black_blue.svg     | 13 ++++++
 .../public/stackblitz-logomark-blue.svg       | 39 ++++++++++++++++++
 .../src/components/ControlPanel.tsx           | 32 +--------------
 .../src/components/ExampleLayout.tsx          | 41 ++++++++++++++-----
 .../src/components/ExampleView.tsx            | 15 ++++++-
 .../utils/examples/exampleViewStateAtoms.ts   |  3 +-
 6 files changed, 99 insertions(+), 44 deletions(-)
 create mode 100644 apps/typegpu-docs/public/stackblitz-logo-black_blue.svg
 create mode 100644 apps/typegpu-docs/public/stackblitz-logomark-blue.svg

diff --git a/apps/typegpu-docs/public/stackblitz-logo-black_blue.svg b/apps/typegpu-docs/public/stackblitz-logo-black_blue.svg
new file mode 100644
index 0000000000..e61c10aa4d
--- /dev/null
+++ b/apps/typegpu-docs/public/stackblitz-logo-black_blue.svg
@@ -0,0 +1,13 @@
+<svg width="117" height="24" viewBox="0 0 117 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.50024 14.8C6.60024 14.6 6.40024 14.4 6.20024 14.4H0.400243C0.100243 14.4 0.000243448 14.1 0.200243 13.9L11.3002 1.10004C11.5002 0.900035 11.9002 1.10004 11.8002 1.40004L9.10024 9.60004C9.00024 9.80004 9.10024 10 9.30024 10H15.1002C15.4002 10 15.5002 10.3 15.3002 10.5L4.20024 23.2C4.00024 23.4 3.60024 23.2 3.70024 22.9L6.50024 14.8Z" fill="#1389FD"/>
+<path d="M28.5998 18.8999C31.4998 18.8999 33.5998 17.2999 33.5998 14.6999C33.5998 11.7999 31.2998 11.0999 29.0998 10.3999C26.9998 9.7999 26.4998 9.2999 26.4998 8.3999C26.4998 7.5999 27.1998 6.9999 28.2998 6.9999C29.6998 6.9999 30.4998 7.6999 30.8998 8.7999L33.1998 7.4999C32.2998 5.4999 30.4998 4.3999 28.2998 4.3999C25.8998 4.3999 23.7998 5.8999 23.7998 8.5999C23.7998 11.2999 25.8998 12.1999 27.9998 12.7999C30.0998 13.3999 30.9998 13.7999 30.9998 14.7999C30.9998 15.5999 30.3998 16.2999 28.7998 16.2999C27.0998 16.2999 26.0998 15.4999 25.5998 14.1999L23.2998 15.5999C23.8998 17.5999 25.7998 18.8999 28.5998 18.8999Z" fill="black"/>
+<path d="M40.6002 11.0999V8.6999H38.4002V5.8999L35.9002 6.6999V8.6999H34.2002V11.1999H35.9002V15.3999C35.9002 18.0999 37.1002 19.1999 40.7002 18.7999V16.4999C39.2002 16.5999 38.5002 16.5999 38.5002 15.4999V11.2999H40.6002V11.0999Z" fill="black"/>
+<path d="M49.6001 8.6999V9.8999C48.9001 8.9999 47.8001 8.3999 46.4001 8.3999C43.8001 8.3999 41.6001 10.6999 41.6001 13.6999C41.6001 16.6999 43.8001 18.9999 46.4001 18.9999C47.8001 18.9999 48.9001 18.3999 49.6001 17.4999V18.6999H52.1001V8.6999H49.6001ZM46.9001 16.4999C45.3001 16.4999 44.2001 15.3999 44.2001 13.6999C44.2001 11.9999 45.4001 10.8999 46.9001 10.8999C48.5001 10.8999 49.6001 11.9999 49.6001 13.6999C49.6001 15.3999 48.5001 16.4999 46.9001 16.4999Z" fill="black"/>
+<path d="M59.2 18.9C61.1 18.9 62.8 17.9 63.7 16.3L61.5 15C61.1 15.8 60.3 16.3 59.2 16.3C57.7 16.3 56.6 15.2 56.6 13.6C56.6 12 57.7 10.9 59.2 10.9C60.2 10.9 61.1 11.4 61.4 12.2L63.6 10.9C62.8 9.40005 61.1 8.30005 59.2 8.30005C56.2 8.30005 54 10.6 54 13.6C54 16.6 56.2 18.9 59.2 18.9Z" fill="black"/>
+<path d="M74.1 18.7L70 13.6L74 8.69995H71L67.6 13.1V4.69995H65V18.7H67.5V14.2L71.1 18.7H74.1Z" fill="black"/>
+<path d="M83.8 11.4C84.6 10.7 85.1 9.79995 85.1 8.59995C85.1 6.29995 83.2 4.69995 80.9 4.69995H75.5V18.7H81.4C83.8 18.7 85.7 17 85.7 14.6C85.6 13.1 84.9 12 83.8 11.4ZM80.9 7.19995C81.8 7.19995 82.4 7.89995 82.4 8.69995C82.4 9.49995 81.8 10.2 80.9 10.2H78.2V7.19995H80.9ZM81.3 16.1H78.2V12.8H81.3C82.2 12.8 82.9 13.5 82.9 14.4C82.9 15.4 82.2 16.1 81.3 16.1Z" fill="black"/>
+<path d="M87.2998 18.7001H89.7998V4.1001H87.2998V18.7001Z" fill="black"/>
+<path d="M93.3998 7.50005C94.2998 7.50005 94.9998 6.80005 94.9998 5.90005C94.9998 5.00005 94.2998 4.30005 93.3998 4.30005C92.5998 4.30005 91.7998 5.00005 91.7998 5.90005C91.7998 6.80005 92.5998 7.50005 93.3998 7.50005ZM92.1998 18.7H94.6998V8.70005H92.1998V18.7Z" fill="black"/>
+<path d="M102.7 11.0999V8.6999H100.5V5.8999L97.9998 6.6999V8.6999H96.2998V11.1999H97.9998V15.3999C97.9998 18.0999 99.1998 19.1999 102.8 18.7999V16.4999C101.3 16.5999 100.6 16.5999 100.6 15.4999V11.2999H102.7V11.0999Z" fill="black"/>
+<path d="M107.5 16.2L111.7 10.3V8.69995H104.3V11.1H108.3L104.1 17V18.7H111.9V16.3H107.5V16.2Z" fill="black"/>
+</svg>
diff --git a/apps/typegpu-docs/public/stackblitz-logomark-blue.svg b/apps/typegpu-docs/public/stackblitz-logomark-blue.svg
new file mode 100644
index 0000000000..4f4f3b21d2
--- /dev/null
+++ b/apps/typegpu-docs/public/stackblitz-logomark-blue.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="15.308061"
+   height="22.260975"
+   viewBox="0 0 15.308061 22.260975"
+   fill="none"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="stackblitz-logomark-blue.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs11" />
+  <sodipodi:namedview
+     id="namedview11"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="5.5384615"
+     inkscape:cx="47.125"
+     inkscape:cy="13.722222"
+     inkscape:window-width="2560"
+     inkscape:window-height="1387"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11" />
+  <path
+     d="m 6.4040486,13.780468 c 0.1,-0.2 -0.1,-0.4 -0.3,-0.4 H 0.30405164 c -0.3,0 -0.39999956,-0.3 -0.2,-0.5 L 11.204009,0.08050832 c 0.2,-0.200005 0.6,0 0.5,0.3 L 9.0040486,8.5805083 c -0.1,0.2 0,0.39996 0.2,0.39996 h 5.7999604 c 0.3,0 0.4,0.3 0.2,0.5 L 4.1040486,22.180468 c -0.2,0.2 -0.6,0 -0.5,-0.3 z"
+     fill="#1389fd"
+     id="path1" />
+</svg>
diff --git a/apps/typegpu-docs/src/components/ControlPanel.tsx b/apps/typegpu-docs/src/components/ControlPanel.tsx
index 3b808806ad..591285d76a 100644
--- a/apps/typegpu-docs/src/components/ControlPanel.tsx
+++ b/apps/typegpu-docs/src/components/ControlPanel.tsx
@@ -8,11 +8,7 @@ import {
   type ExampleControlParam,
   exampleControlsAtom,
 } from '../utils/examples/exampleControlAtom.ts';
-import {
-  codeEditorShownAtom,
-  menuShownAtom,
-  tsoverUsedAtom,
-} from '../utils/examples/exampleViewStateAtoms.ts';
+import { tsoverUsedAtom } from '../utils/examples/exampleViewStateAtoms.ts';
 import { isGPUSupported } from '../utils/isGPUSupported.ts';
 import { Button } from './design/Button.tsx';
 import { ColorPicker } from './design/ColorPicker.tsx';
@@ -282,13 +278,9 @@ function paramToControlRow(param: ExampleControlParam) {
 const unreachable = (_: never) => null;
 
 export function ControlPanel() {
-  const [menuShowing, setMenuShowing] = useAtom(menuShownAtom);
-  const [codeEditorShowing, setCodeEditorShowing] = useAtom(codeEditorShownAtom);
   const [tsoverUsed, setTsoverUsed] = useAtom(tsoverUsedAtom);
   const exampleControlParams = useAtomValue(exampleControlsAtom);
 
-  const showLeftMenuId = useId();
-  const showCodeEditorId = useId();
   const tsoverUsedId = useId();
 
   return (
@@ -302,28 +294,6 @@ export function ControlPanel() {
       <div className="hidden flex-col gap-4 md:flex">
         <h2 className="font-medium text-xl">Control panel</h2>
 
-        <label
-          htmlFor={showLeftMenuId}
-          className="flex cursor-pointer items-center justify-between gap-3 text-sm"
-        >
-          <span>Show left menu</span>
-          <Toggle
-            id={showLeftMenuId}
-            checked={menuShowing}
-            onChange={(e) => setMenuShowing(e.target.checked)}
-          />
-        </label>
-        <label
-          htmlFor={showCodeEditorId}
-          className="flex cursor-pointer items-center justify-between gap-3 text-sm"
-        >
-          <span>Show code editor</span>
-          <Toggle
-            id={showCodeEditorId}
-            checked={codeEditorShowing}
-            onChange={(e) => setCodeEditorShowing(e.target.checked)}
-          />
-        </label>
         <label
           htmlFor={tsoverUsedId}
           className="flex cursor-pointer items-center justify-between gap-3 text-sm"
diff --git a/apps/typegpu-docs/src/components/ExampleLayout.tsx b/apps/typegpu-docs/src/components/ExampleLayout.tsx
index 926afe2cf4..2670e4ce7b 100644
--- a/apps/typegpu-docs/src/components/ExampleLayout.tsx
+++ b/apps/typegpu-docs/src/components/ExampleLayout.tsx
@@ -1,6 +1,7 @@
 import { useSetAtom } from 'jotai';
 import type { ReactNode } from 'react';
-import { useId, useRef } from 'react';
+import { useEffect, useId, useRef } from 'react';
+import cs from 'classnames';
 import CrossSvg from '../assets/cross.svg';
 import HamburgerSvg from '../assets/hamburger.svg';
 import {
@@ -22,23 +23,36 @@ export function ExampleLayout(props: ExampleLayoutProps) {
   const [menuShown, setMenuShown] = useHydratedAtom(menuShownAtom, false);
   const [codeShown, setCodeShown] = useHydratedAtom(codeEditorShownAtom, false);
 
+  useEffect(() => {
+    // Opening the side menu on large screens by default
+    if (window.innerWidth >= 768) {
+      setMenuShown(true);
+    }
+  }, []);
+
   return (
     <>
-      <div className="absolute top-4 left-4 z-50 flex gap-2 text-sm md:hidden">
+      <div
+        className={cs(
+          'absolute top-4 left-4 md:top-5 md:left-5 z-50 flex gap-2 text-sm',
+          menuShown && 'md:left-84',
+        )}
+      >
         {!menuShown && (
           <Button onClick={() => setMenuShown(true)}>
-            <img src={HamburgerSvg.src} alt="menu" className="-m-2 h-6 w-6" />
+            <img src={HamburgerSvg.src} alt="menu" className="-m-2 h-6 w-6 mr-1" />
+            Explore
           </Button>
         )}
 
         <Button onClick={() => setCodeShown((prev) => !prev)}>
-          {/* Applying the actual label only after the component has been hydrated */}
-          {codeShown ? 'Preview' : 'Code'}
+          <span className="md:hidden">{codeShown ? 'Preview' : 'Code'}</span>
+          <span className="hidden md:block">{codeShown ? 'Hide Code' : 'Show Code'}</span>
         </Button>
       </div>
-
       <div className="box-border flex h-dvh gap-4 bg-tameplum-50 p-4">
         {menuShown && <SideMenu />}
+
         {props.children}
       </div>
     </>
@@ -57,17 +71,24 @@ function SideMenu() {
   const groupByCategoryToggleId = useId();
 
   return (
-    <aside className="absolute inset-0 z-50 box-border flex w-full flex-col bg-white md:static md:w-75 md:rounded-2xl">
+    <aside className="absolute inset-0 z-50 box-border flex w-full flex-col bg-white md:relative md:w-75 md:rounded-2xl">
       <header className="px-5 py-3">
         <div className="grid place-items-center">
           <a href="/TypeGPU" className="box-border grid h-12 cursor-pointer place-content-center">
             <img className="w-40" src="/TypeGPU/typegpu-logo-light.svg" alt="TypeGPU Logo" />
           </a>
         </div>
-        <div className="absolute top-5 right-5 md:hidden">
-          <Button onClick={() => setMenuShown(false)}>
+        <div className="absolute top-5 right-5 md:top-2.5 md:right-2.5">
+          <button
+            className={cs(
+              'box-border inline-flex items-center justify-center gap-2 rounded-[6.25rem] px-2.5 py-2.5 text-sm focus:ring-2 focus:ring-gradient-blue',
+              'bg-white hover:bg-tameplum-20',
+            )}
+            type="button"
+            onClick={() => setMenuShown(false)}
+          >
             <img src={CrossSvg.src} alt="Close menu" className="h-3 w-3" />
-          </Button>
+          </button>
         </div>
       </header>
 
diff --git a/apps/typegpu-docs/src/components/ExampleView.tsx b/apps/typegpu-docs/src/components/ExampleView.tsx
index 64c3125cb7..7bac46c375 100644
--- a/apps/typegpu-docs/src/components/ExampleView.tsx
+++ b/apps/typegpu-docs/src/components/ExampleView.tsx
@@ -160,11 +160,22 @@ export function ExampleView({ example, common }: Props) {
                 ))}
               </div>
 
-              <div className="absolute right-0 z-5 md:top-15 md:right-8">
+              <div className="absolute right-0 z-5 md:top-15 md:right-8 md:hidden">
+                <Button onClick={() => openInStackBlitz(example, common)}>
+                  <span className="font-bold">Edit </span>
+                  <img
+                    src="/TypeGPU/stackblitz-logomark-blue.svg"
+                    alt="stackblitz logo"
+                    className="h-4"
+                  />
+                </Button>
+              </div>
+
+              <div className="absolute right-0 z-5 md:top-15 md:right-8 hidden md:block">
                 <Button onClick={() => openInStackBlitz(example, common)}>
                   <span className="font-bold">Edit on</span>
                   <img
-                    src="https://developer.stackblitz.com/img/logo/stackblitz-logo-black_blue.svg"
+                    src="/TypeGPU/stackblitz-logo-black_blue.svg"
                     alt="stackblitz logo"
                     className="h-4"
                   />
diff --git a/apps/typegpu-docs/src/utils/examples/exampleViewStateAtoms.ts b/apps/typegpu-docs/src/utils/examples/exampleViewStateAtoms.ts
index 3452528161..bb236428fb 100644
--- a/apps/typegpu-docs/src/utils/examples/exampleViewStateAtoms.ts
+++ b/apps/typegpu-docs/src/utils/examples/exampleViewStateAtoms.ts
@@ -1,8 +1,9 @@
+import { atom } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 
 const storageOptions = { getOnInit: true };
 
-export const menuShownAtom = atomWithStorage('menu-shown', false, undefined, storageOptions);
+export const menuShownAtom = atom(false);
 
 export const codeEditorShownAtom = atomWithStorage(
   'code-editor-shown',