docs: More intuitive navigation on the examples page

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"

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>
 

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"
                   />

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',