Add a scrollbar to the sidebar navigation using SimpleBar

- use simplebar for sidebar as well

Author: robertpiosik

packages/ui/src/components/editor/settings/Layout/Layout.module.scss

@@ -16,8 +16,10 @@
   flex-direction: column;
   gap: 31px;
   width: var(--sidebar-width);
-  top: calc(40px - 5px);
+  top: 35px;
+  bottom: 0;
   left: 30px;
+  overflow: hidden;
   @media (min-width: 770px) {
     left: 60px;
   }
@@ -36,6 +38,11 @@
     white-space: nowrap;
   }
 
+  &__scroll {
+    flex: 1;
+    min-height: 0;
+  }
+
   &__navigation {
     display: flex;
     flex-direction: column;

packages/ui/src/components/editor/settings/Layout/Layout.tsx

@@ -13,7 +13,9 @@ export const Layout = forwardRef<HTMLDivElement, Props>((props, ref) => {
     <div className={styles.container}>
       <div className={styles.sidebar}>
         <div className={styles.sidebar__title}>{props.title}</div>
-        <div className={styles.sidebar__navigation}>{props.sidebar}</div>
+        <SimpleBar className={styles.sidebar__scroll}>
+          <div className={styles.sidebar__navigation}>{props.sidebar}</div>
+        </SimpleBar>
       </div>
       <div className={styles.content}>
         <SimpleBar scrollableNodeProps={{ ref }}>