fix(docusaurus): sidebar enhancements (#963)

* Fix Dialog component * Add changeset for Dialog * Keep Docusaurus sidebar link color * Don't overflow sidebar --------- Co-authored-by: sushitommy <>
nl-design-system · Dec 16, 2024 · 103e6af · 103e6af
1 parent 2854c96
commit 103e6af
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 9 deletions.
diff --git a/.changeset/spotty-pumas-crash.md b/.changeset/spotty-pumas-crash.md
@@ -0,0 +1,7 @@
+---
+"@nl-rvo/css-dialog": patch
+"@nl-rvo/component-library-css": patch
+"@nl-rvo/component-library-react": patch
+---
+
+Fixed Dialog border and margin
diff --git a/components/dialog/src/index.scss b/components/dialog/src/index.scss
@@ -1,5 +1,6 @@
 // Dialog
 .rvo-dialog {
+  border: none;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -30,6 +31,7 @@
 .rvo-dialog--drawer-left {
   height: 100vh;
   left: 0;
+  margin: initial;
   max-width: var(--rvo-dialog-drawer-max-width);
   min-width: var(--rvo-dialog-drawer-min-width);
   position: fixed;
@@ -40,6 +42,7 @@
 
 .rvo-dialog--drawer-right {
   height: 100vh;
+  margin: initial;
   max-width: var(--rvo-dialog-drawer-max-width);
   min-width: var(--rvo-dialog-drawer-min-width);
   position: fixed;

diff --git a/components/max-width-layout/src/defaultArgs.ts b/components/max-width-layout/src/defaultArgs.ts
@@ -5,4 +5,5 @@ export const defaultArgs: IMaxWidthLayoutProps = {
   content: 'Deze gecentreerde layout container heeft een maximale breedte van {maxWidth}.',
   centered: true,
   inlinePadding: 'none',
+  useAsMinWidthToo: true,
 };
diff --git a/components/max-width-layout/src/index.scss b/components/max-width-layout/src/index.scss
@@ -14,16 +14,25 @@
 
 .rvo-max-width-layout--sm {
   max-width: var(--rvo-layout-max-width-sm);
-  min-width: var(--rvo-layout-max-width-sm);
 }
 
 .rvo-max-width-layout--md {
   max-width: var(--rvo-layout-max-width-md);
-  min-width: var(--rvo-layout-max-width-md);
 }
 
 .rvo-max-width-layout--lg {
   max-width: var(--rvo-layout-max-width-lg);
+}
+
+.rvo-min-width-layout--sm {
+  min-width: var(--rvo-layout-max-width-sm);
+}
+
+.rvo-min-width-layout--md {
+  min-width: var(--rvo-layout-max-width-md);
+}
+
+.rvo-min-width-layout--lg {
   min-width: var(--rvo-layout-max-width-lg);
 }
 

diff --git a/components/max-width-layout/src/template.tsx b/components/max-width-layout/src/template.tsx
@@ -15,6 +15,7 @@ export interface IMaxWidthLayoutProps {
   content?: string;
   inlinePadding?: 'none' | 'sm' | 'md' | 'lg';
   centered?: boolean;
+  useAsMinWidthToo?: boolean;
   /** @uxpinignoreprop */
   className?: string | string[];
   /** @uxpinpropname Content */
@@ -29,6 +30,9 @@ export const argTypes = {
   content: {
     control: 'text',
   },
+  useAsMinWidthToo: {
+    control: 'boolean',
+  },
   centered: {
     control: 'boolean',
   },
@@ -48,6 +52,7 @@ export const MaxWidthLayout: React.FC<IMaxWidthLayoutProps> = ({
   content = defaultArgs.content,
   inlinePadding = defaultArgs.inlinePadding,
   centered = defaultArgs.centered,
+  useAsMinWidthToo = defaultArgs.useAsMinWidthToo,
   children,
   className = [],
   ...props
@@ -75,6 +80,7 @@ export const MaxWidthLayout: React.FC<IMaxWidthLayoutProps> = ({
       className={clsx(
         'rvo-max-width-layout',
         `rvo-max-width-layout--${size}`,
+        useAsMinWidthToo && `rvo-min-width-layout--${size}`,
         `rvo-max-width-layout-inline-padding--${inlinePadding}`,
         !centered && 'rvo-max-width-layout--uncentered',
         className,

diff --git a/packages/docusaurus/src/theme/DocRoot/Layout/Sidebar/styles.module.css b/packages/docusaurus/src/theme/DocRoot/Layout/Sidebar/styles.module.css
@@ -20,11 +20,4 @@
     cursor: pointer;
     width: var(--doc-sidebar-hidden-width);
   }
-
-  .sidebarViewport {
-    top: var(--ifm-navbar-height);
-    position: sticky;
-    height: 100%;
-    max-height: calc(100vh - 137px);
-  }
 }
diff --git a/packages/docusaurus/src/theme/DocSidebarItem/Link/index.tsx b/packages/docusaurus/src/theme/DocSidebarItem/Link/index.tsx
@@ -5,6 +5,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import { Link } from '@nl-rvo/components';
 import type { Props } from '@theme/DocSidebarItem/Link';
 import clsx from 'clsx';
+import styles from './styles.module.css';
 
 export default function DocSidebarItemLink({ item, onItemClick, activePath, level, ...props }: Props): JSX.Element {
   const { href, label, className } = item;
@@ -32,6 +33,7 @@ export default function DocSidebarItemLink({ item, onItemClick, activePath, leve
         {...props}
         showIcon={!isInternalLink ? 'after' : 'no'}
         icon={!isInternalLink ? 'externe-link' : undefined}
+        className={styles['sidebar-link']}
       >
         {label}
       </Link>

diff --git a/packages/docusaurus/src/theme/DocSidebarItem/Link/styles.module.css b/packages/docusaurus/src/theme/DocSidebarItem/Link/styles.module.css
@@ -0,0 +1,4 @@
+.sidebar-link:hover,
+.sidebar-link:focus {
+  color: var(--rvo-color-grijs-700) !important;
+}