Make the sidebar resizable, closes #1842

elixir-lang · Jan 10, 2024 · a191873 · a191873
1 parent b25bf28
commit a191873
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/assets/css/layout.css b/assets/css/layout.css
@@ -7,6 +7,7 @@ body {
 
 body {
   --sidebarWidth: 300px;
+  --sidebarMinWidth: 300px;
   --sidebarTransitionDuration: 0.3s;
   background-color: var(--background);
   color: var(--textBody);
@@ -23,19 +24,20 @@ body {
 
 .main {
   display: flex;
-  justify-content: flex-end;
   height: 100%;
 }
 
 .sidebar {
   display: flex;
   flex-direction: column;
   width: var(--sidebarWidth);
+  min-width: var(--sidebarMinWidth);
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
+  resize: horizontal;
 }
 
 .sidebar-button {

diff --git a/assets/css/search-bar.css b/assets/css/search-bar.css
@@ -128,7 +128,7 @@
     height: 57px;
     left: 56px;
     right: 20px;
-    transition: top 0.3s;
+    transition: top var(--sidebarTransitionDuration) ease-in-out;
     z-index: 99;
   }
 
@@ -139,7 +139,7 @@
     right: 0;
     height: 70px;
     background-color: var(--background);
-    transition: top 0.3s;
+    transition: all var(--sidebarTransitionDuration) ease-in-out;
     z-index: 98;
   }
 

diff --git a/assets/js/sidebar/sidebar-drawer.js b/assets/js/sidebar/sidebar-drawer.js
@@ -204,3 +204,11 @@ function setPreference () {
         : (state.sidebarPreference = userPref.CLOSED)
   }
 }
+
+const resizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    document.body.style.setProperty('--sidebarWidth', `${entry.contentRect.width}px`);
+  }
+});
+
+resizeObserver.observe(document.getElementById('sidebar'));