Move styles for SlidePanel to a CSS module

Author: severo

src/components/viewers/SlidePanel.tsx

@@ -1,5 +1,7 @@
-import React, { ReactNode, useCallback, useEffect, useState } from 'react'
+import React, { CSSProperties, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
+import { cn } from '../../lib/utils.js'
+import styles from '../../styles/viewers/SlidePanel.module.css'
 
 interface SlidePanelProps {
   mainContent: ReactNode
@@ -16,7 +18,7 @@ const WIDTH = {
  * Slide out panel component with resizing.
  */
 export default function SlidePanel({ mainContent, panelContent, isPanelOpen }: SlidePanelProps) {
-  const { slidePanel } = useConfig()
+  const { slidePanel, customClass } = useConfig()
   const minWidth = slidePanel?.minWidth && slidePanel.minWidth > 0 ? slidePanel.minWidth : WIDTH.MIN
   function validWidth(width?: number): number | undefined {
     if (width && minWidth <= width) {
@@ -74,24 +76,32 @@ export default function SlidePanel({ mainContent, panelContent, isPanelOpen }: S
     }
   }, [panelRef, panelWidth])
 
+  const panelWidthStyle = useMemo(() => {
+    return isPanelOpen ? {
+      '--panel-width': `${panelWidth}px`,
+    } as CSSProperties :
+      undefined
+  }, [panelWidth, isPanelOpen])
+
   return (
-    <div className="slideContainer">
-      <div className="slideMain">
+    <div className={cn(styles.slidePanel, customClass?.slidePanel)}>
+      <article>
         {mainContent}
-      </div>
+      </article>
       {isPanelOpen &&
         <div
-          className="resizer"
+          role="separator"
+          aria-orientation="vertical"
           onMouseDown={handleMouseDown}
         />
       }
-      <div
-        className={resizingClientX === -1 ? 'slidePanel' : 'slidePanel slideDragging'}
+      <article
         ref={panelRef}
-        style={isPanelOpen ? { width: panelWidth } : undefined}
+        data-resizing={resizingClientX !== -1}
+        style={panelWidthStyle}
       >
         {panelContent}
-      </div>
+      </article>
     </div>
   )
 }

src/hooks/useConfig.ts

@@ -17,6 +17,7 @@ export interface Config {
     markdownView?: string
     sideBar?: string
     slideCloseButton?: string
+    slidePanel?: string
     spinner?: string
     textView?: string
     welcome?: string

src/styles/app.css

@@ -262,40 +262,3 @@ input.search:focus {
 .folder {
   background-image: url("../assets/folder.svg");
 }
-
-.slideContainer {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-.slideMain {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 100px;
-  overflow: auto;
-}
-
-.slidePanel {
-  display: flex;
-  flex-direction: column;
-  width: 0;
-  transition: width 0.2s;
-}
-
-.slideDragging {
-  transition: none;
-}
-
-.resizer {
-  width: 5px;
-  cursor: col-resize;
-  background-color: #bfbbbb;
-  transition: background-color 0.2s;
-  user-select: none;
-}
-
-.resizer:hover {
-  background-color: #9f9999;
-}

src/styles/viewers/SlidePanel.module.css

@@ -0,0 +1,39 @@
+.slidePanel {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+
+  & > article {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* main content */
+  & > article:nth-of-type(1) {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+  /* panel content */
+  & > article:nth-of-type(2) {
+    width: var(--panel-width, 0);
+    transition: width 0.2s;
+
+    &[data-resizing="true"] {
+      transition: none;
+    }
+  }
+
+  /* resizer separator */
+  & > [role="separator"] {
+    width: 5px;
+    cursor: col-resize;
+    background-color: #bfbbbb;
+    transition: background-color 0.2s;
+    user-select: none;
+
+    &:hover {
+      background-color: #9f9999;
+    }
+  }
+}