Sidebar nav v-scroll - switcher static

Added a nice little gradient overlay for the nav to scroll under too
seqeralabs · Sep 27, 2024 · 367b163 · 367b163
1 parent 6e69fee
commit 367b163
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 9 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -116,7 +116,6 @@ svg.excalidraw path[fill="#fff"] {
 /* Custom styling for sidebar nav links */
 .theme-doc-sidebar-container > div {
   top: 74px;
-  overflow-y: auto;
 }
 nav.menu .menu__list .menu__link {
   border-radius: 5px;

diff --git a/src/theme/DocSidebar/Desktop/ProductSwitcher/styles.module.css b/src/theme/DocSidebar/Desktop/ProductSwitcher/styles.module.css
@@ -1,6 +1,6 @@
 .switcher {
   position: relative;
-  margin: 8px 0 15px 0;
+  margin: 8px 0 0 0;
   .button {
     border-bottom-color: var(--color-brand-200) !important;
     z-index: 10;

diff --git a/src/theme/DocSidebar/Desktop/index.tsx b/src/theme/DocSidebar/Desktop/index.tsx
@@ -27,11 +27,16 @@ type Props = {
 const DesktopWrapper: React.FC<Props> = (props) => {
   return (
     <div className={styles.sidebar}>
-      <SearchBar />
-      <ProductSwitcher isDropdown={!!props.sidebar} />
-      {!!props.sidebar && <TOC {...props} />}
-      <hr />
-      <NavbarColorModeToggle className={styles.colorModeToggle} />
+      <div className={styles.sidebarHeader}>
+        <SearchBar />
+        <ProductSwitcher isDropdown={!!props.sidebar} />
+        <div className={styles.sidebarHeaderFade}></div>
+      </div>
+      <div className={styles.sidebarNav}>
+        {!!props.sidebar && <TOC {...props} />}
+        <hr />
+        <NavbarColorModeToggle className={styles.colorModeToggle} />
+      </div>
     </div>
   );
 };

diff --git a/src/theme/DocSidebar/Desktop/styles.module.css b/src/theme/DocSidebar/Desktop/styles.module.css
@@ -10,9 +10,10 @@
 }
 
 .sidebar {
-  padding: 30px 30px 0;
-  max-height: 100dvh;
+  padding-top: 30px;
+  height: 100dvh;
   width: 300px;
+  position: relative;
   & nav {
     padding: 0;
   }
@@ -22,6 +23,27 @@
     width: auto !important;
   }
 }
+.sidebarHeader {
+  position: relative;
+  z-index: 10;
+  padding: 0 30px;
+}
+.sidebarHeaderFade {
+  height: 15px;
+  background: linear-gradient(180deg, rgba(249,249,249,1) 0%, rgba(249,249,249,0) 100%);
+}
+.sidebarNav {
+  margin-top: -15px;
+  padding: 30px;
+  height: calc(100% - 180px);
+  overflow-y: auto;
+  & > div {
+    margin-top: 15px;
+  }
+  & div {
+    height: auto;
+  }
+}
 
 .colorModeToggle {
   margin-bottom: 16px;