Fixed scrollable sidebar

mui · Feb 4, 2025 · 9d1f4f4 · 9d1f4f4
1 parent a01c3a6
commit 9d1f4f4
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 40 deletions.
diff --git a/docs/src/app/(private)/experiments/[...slug]/page.tsx b/docs/src/app/(private)/experiments/[...slug]/page.tsx
@@ -24,12 +24,12 @@ export default async function Page(props: Props) {
   try {
     const Experiment = (await import(`../${slug.join('/')}.tsx`)).default;
     return (
-      <React.Fragment>
-        <Sidebar experimentPath={fullPath} />
+      <div className={classes.root}>
+        <Sidebar experimentPath={fullPath} className={classes.sidebar} />
         <main className={classes.main}>
           <Experiment />
         </main>
-      </React.Fragment>
+      </div>
     );
   } catch (error) {
     notFound();

diff --git a/docs/src/app/(private)/experiments/infra/Sidebar.module.css b/docs/src/app/(private)/experiments/infra/Sidebar.module.css
@@ -1,8 +1,6 @@
 .root {
-  flex: 1 1 300px;
-  max-width: 400px;
   border-right: 1px solid var(--color-gridline);
-  font-size: var(--text-sm);
+  overflow: auto;
 
   & h2 {
     text-transform: uppercase;

diff --git a/docs/src/app/(private)/experiments/infra/Sidebar.tsx b/docs/src/app/(private)/experiments/infra/Sidebar.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import { ExperimentsList } from './ExperimentsList';
 import { EditPanel } from './EditPanel';
 import classes from './Sidebar.module.css';
 
 export function Sidebar(props: SidebarProps) {
-  const { experimentPath } = props;
+  const { experimentPath, className, ...otherProps } = props;
   return (
-    <div className={classes.root}>
+    <div {...otherProps} className={clsx(classes.root, className)}>
       {experimentPath && (
         <React.Fragment>
           <div id="experiments-settings" className={classes.panel} />
@@ -18,6 +19,6 @@ export function Sidebar(props: SidebarProps) {
   );
 }
 
-interface SidebarProps {
+interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
   experimentPath?: string;
 }
diff --git a/docs/src/app/(private)/experiments/layout.module.css b/docs/src/app/(private)/experiments/layout.module.css
diff --git a/docs/src/app/(private)/experiments/layout.tsx b/docs/src/app/(private)/experiments/layout.tsx
diff --git a/docs/src/app/(private)/experiments/page.module.css b/docs/src/app/(private)/experiments/page.module.css
@@ -1,3 +1,30 @@
+.root {
+  display: flex;
+  min-height: 100vh;
+  font-family:
+    ui-sans-serif,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI Variable Display',
+    'Segoe UI',
+    Helvetica,
+    'Apple Color Emoji',
+    Arial,
+    sans-serif;
+
+  --sidebar-width: 260px;
+
+  @media screen and (max-width: 1300px) {
+    --sidebar-width: 20vw;
+  }
+
+  & h1 {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+    font-weight: 500;
+  }
+}
+
 .main {
   flex: 1 1 100%;
   display: flex;
@@ -6,6 +33,24 @@
   font-family: var(--ff-sans);
   padding: 20px;
   background-color: var(--color-background);
+  margin-left: var(--sidebar-width);
+
+  @media screen and (max-width: 650px) {
+    margin: 0;
+  }
+}
+
+.sidebar {
+  width: var(--sidebar-width);
+  font-size: var(--text-sm);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+
+  @media screen and (max-width: 650px) {
+    display: none;
+  }
 }
 
 .landing {

diff --git a/docs/src/app/(private)/experiments/page.tsx b/docs/src/app/(private)/experiments/page.tsx
@@ -1,16 +1,16 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import classes from './page.module.css';
 import { Sidebar } from './infra/Sidebar';
+import classes from './page.module.css';
 
 export default async function Experiments() {
   return (
-    <React.Fragment>
-      <Sidebar />
+    <div className={classes.root}>
+      <Sidebar className={classes.sidebar} />
       <main className={clsx(classes.main, classes.landing)}>
         <h1>Base UI experiments</h1>
         <p>← Choose an experiment from the list</p>
       </main>
-    </React.Fragment>
+    </div>
   );
 }
diff --git a/docs/src/app/(private)/layout.tsx b/docs/src/app/(private)/layout.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import 'docs/src/styles.css';
 import './layout.css';
 
 export default function Layout({ children }: React.PropsWithChildren) {