Make the sidebar resizable, closes #1842

Author: josevalim

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 {

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;
   }
 

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