extract SideBar to its component + CSS module

Author: severo

src/components/Layout.tsx

@@ -1,8 +1,9 @@
 import { ReactNode, useEffect, useState } from 'react'
 import { cn } from '../lib/utils.js'
+import SideBar, { SideBarConfig } from './SideBar.js'
 import Welcome, { WelcomeConfig } from './Welcome.js'
 
-export type LayoutConfig = WelcomeConfig
+export type LayoutConfig = WelcomeConfig & SideBarConfig
 
 interface LayoutProps {
   children: ReactNode
@@ -46,7 +47,7 @@ export default function Layout({ children, className, progress, error, title, co
   }, [title])
 
   return <main className='main'>
-    <Sidebar />
+    <SideBar config={config} />
     <div className='content-container'>
       <div className={cn('content', className)}>
         {children}
@@ -62,14 +63,6 @@ export default function Layout({ children, className, progress, error, title, co
   </main>
 }
 
-function Sidebar() {
-  return <nav className='nav'>
-    <div>
-      <a className="brand" href='/'>hyperparam</a>
-    </div>
-  </nav>
-}
-
 export function Spinner({ className }: { className?: string }) {
   return <div className={cn('spinner', className)}></div>
 }

src/components/SideBar.tsx

@@ -0,0 +1,23 @@
+import { cn } from '../lib/utils.js'
+import styles from '../styles/SideBar.module.css'
+
+export interface SideBarConfig {
+  sideBar?: {
+    className?: string
+  },
+  brand?: {
+    className?: string
+  }
+}
+
+interface SideBarProps {
+  config?: SideBarConfig
+}
+
+export default function SideBar({ config }: SideBarProps) {
+  return <nav className={cn(styles.sideBar, config?.sideBar?.className)}>
+    <div>
+      <a className={cn(styles.brand, config?.brand?.className)} href='/'>hyperparam</a>
+    </div>
+  </nav>
+}

src/styles/SideBar.module.css

@@ -0,0 +1,45 @@
+/* sidebar */
+.sideBar {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 48px;
+  height: 100vh;
+}
+.sideBar > div {
+  background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4);
+  box-shadow: 0 0 6px rgba(10, 10, 10, 0.4);
+  height: 100vh;
+  position: absolute;
+  width: 48px;
+  z-index: 30;
+}
+
+/* brand logo */
+.brand {
+  align-items: center;
+  color: #222;
+  display: flex;
+  filter: drop-shadow(0 0 2px #bbb);
+  font-family: "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 1.1em;
+  font-weight: bold;
+  text-orientation: mixed;
+  letter-spacing: 0.3px;
+  padding: 10px 12px;
+  user-select: none;
+  writing-mode: vertical-rl;
+}
+.brand:hover {
+  color: #222;
+  filter: drop-shadow(0 0 2px #afa6b9);
+  text-decoration: none;
+}
+.brand::before {
+  content: "";
+  background: url("../assets/logo.svg") no-repeat 0 center;
+  background-size: 26px;
+  height: 26px;
+  width: 26px;
+  margin-bottom: 10px;
+}

src/styles/app.css

@@ -56,35 +56,6 @@ li {
   height: 100vh;
 }
 
-/* brand logo */
-.brand {
-  align-items: center;
-  color: #222;
-  display: flex;
-  filter: drop-shadow(0 0 2px #bbb);
-  font-family: 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 1.1em;
-  font-weight: bold;
-  text-orientation: mixed;
-  letter-spacing: 0.3px;
-  padding: 10px 12px;
-  user-select: none;
-  writing-mode: vertical-rl;
-}
-.brand:hover {
-  color: #222;
-  filter: drop-shadow(0 0 2px #afa6b9);
-  text-decoration: none;
-}
-.brand::before {
-  content: '';
-  background: url("../assets/logo.svg") no-repeat 0 center;
-  background-size: 26px;
-  height: 26px;
-  width: 26px;
-  margin-bottom: 10px;
-}
-
 a {
   color: #342267;
   cursor: pointer;
@@ -125,23 +96,6 @@ main {
   justify-content: center;
 }
 
-/* sidebar */
-.nav {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 48px;
-  height: 100vh;
-}
-.nav > div {
-  background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4);
-  box-shadow: 0 0 6px rgba(10, 10, 10, 0.4);
-  height: 100vh;
-  position: absolute;
-  width: 48px;
-  z-index: 30;
-}
-
 /* content area */
 .content-container {
   min-width: 0;