extract Layout styles to CSS Module

Author: severo

src/components/Layout.tsx

@@ -1,13 +1,14 @@
 import { ReactNode, useEffect, useState } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
 import { cn } from '../lib/utils.js'
+import styles from '../styles/Layout.module.css'
 import ErrorBar from './ErrorBar.js'
 import ProgressBar from './ProgressBar.js'
 import SideBar from './SideBar.js'
 import Welcome from './Welcome.js'
 
 interface LayoutProps {
   children: ReactNode
-  className?: string
   progress?: number
   error?: Error
   title?: string
@@ -19,13 +20,13 @@ interface LayoutProps {
  *
  * @param props
  * @param props.children - content to display inside the layout
- * @param props.className - additional class names to apply to the content container
  * @param props.progress - progress bar value
  * @param props.error - error message to display
  * @param props.title - page title
  */
-export default function Layout({ children, className, progress, error, title }: LayoutProps) {
+export default function Layout({ children, progress, error, title }: LayoutProps) {
   const [showWelcome, setShowWelcome] = useState(false)
+  const { customClass } = useConfig()
 
   // Check localStorage on mount to see if the user has seen the welcome popup
   useEffect(() => {
@@ -44,15 +45,15 @@ export default function Layout({ children, className, progress, error, title }:
     document.title = title ? `${title} - hyperparam` : 'hyperparam'
   }, [title])
 
-  return <main className='main'>
+  return <div className={cn(styles.layout, customClass?.layout)}>
     <SideBar />
-    <div className='content-container'>
-      <div className={cn('content', className)}>
+    <main>
+      <div>
         {children}
       </div>
       <ErrorBar error={error}></ErrorBar>
-    </div>
+    </main>
     {progress !== undefined && progress < 1 && <ProgressBar value={progress} />}
     {showWelcome && <Welcome onClose={handleCloseWelcome} />}
-  </main>
+  </div>
 }

src/hooks/useConfig.ts

@@ -15,6 +15,7 @@ export interface Config {
     errorBar?: string
     highTable?: string
     imageView?: string
+    layout?: string
     markdownView?: string
     path?: string
     progressBar?: string

src/styles/Layout.module.css

@@ -0,0 +1,25 @@
+.layout {
+  /* layout */
+  display: flex;
+  height: 100vh;
+  max-width: 100vw;
+
+  /* content area */
+  main {
+    min-width: 0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    & > div:first-child {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      height: 100vh;
+      padding: 0;
+      /* no outer scrollbars */
+      overflow: hidden;
+    }
+  }
+}

src/styles/app.css

@@ -66,38 +66,13 @@ a:hover {
   text-decoration: underline;
 }
 
-/* layout */
-main {
-  display: flex;
-  height: 100vh;
-  max-width: 100vw;
-}
-
 .center {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-/* content area */
-.content-container {
-  min-width: 0;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  height: 100vh;
-  padding: 0;
-  /* no outer scrollbars */
-  overflow: hidden;
-}
-
 .top-actions {
   left: auto;
 }