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'));