Added support to manually resize the collections sidebar

ui/src/components/base/Dragline.svelte

@@ -0,0 +1,108 @@
+<script>
+    import { createEventDispatcher } from "svelte";
+
+    const dispatch = createEventDispatcher();
+
+    export let tolerance = 0;
+
+    let elem;
+    let startX = 0;
+    let startY = 0;
+    let shiftX = 0;
+    let shiftY = 0;
+    let dragStarted = false;
+
+    function dragInit(e) {
+        e.stopPropagation();
+
+        startX = e.clientX;
+        startY = e.clientY;
+        shiftX = e.clientX - elem.offsetLeft;
+        shiftY = e.clientY - elem.offsetTop;
+
+        document.addEventListener("touchmove", onMove);
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("touchend", onStop);
+        document.addEventListener("mouseup", onStop);
+    }
+
+    function onStop(e) {
+        if (dragStarted) {
+            e.preventDefault();
+
+            dragStarted = false;
+
+            elem.classList.remove("no-pointer-events");
+
+            dispatch("dragstop", { event: e, elem: elem });
+        }
+
+        document.removeEventListener("touchmove", onMove);
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("touchend", onStop);
+        document.removeEventListener("mouseup", onStop);
+    }
+
+    function onMove(e) {
+        let diffX = e.clientX - startX;
+        let diffY = e.clientY - startY;
+        let left = e.clientX - shiftX;
+        let top = e.clientY - shiftY;
+
+        if (
+            !dragStarted &&
+            Math.abs(left - elem.offsetLeft) < tolerance &&
+            Math.abs(top - elem.offsetTop) < tolerance
+        ) {
+            return;
+        }
+
+        e.preventDefault();
+
+        if (!dragStarted) {
+            dragStarted = true;
+            elem.classList.add("no-pointer-events");
+            dispatch("dragstart", { event: e, elem: elem });
+        }
+
+        dispatch("dragging", { event: e, elem: elem, diffX: diffX, diffY: diffY });
+    }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<span
+    bind:this={elem}
+    class="dragline"
+    class:dragging={dragStarted}
+    on:mousedown={(e) => {
+        if (e.button == 0) {
+            dragInit(e);
+        }
+    }}
+    on:touchstart={dragInit}
+/>
+
+<style lang="scss">
+    .dragline {
+        position: relative;
+        z-index: 99999;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 5px;
+        padding: 0;
+        margin: 0;
+        margin-left: -1px;
+        margin-right: -3px;
+        background: none;
+        cursor: ew-resize;
+        box-sizing: content-box;
+        transition: box-shadow var(--activeAnimationSpeed);
+        box-shadow: inset 1px 0 0 0 var(--baseAlt2Color);
+        &:hover,
+        &.dragging {
+            box-shadow: inset 3px 0 0 0 var(--baseAlt2Color);
+        }
+    }
+</style>

ui/src/components/collections/CollectionSidebarItem.svelte

@@ -51,7 +51,7 @@
     .pin-collection {
         margin: 0 -5px 0 -15px;
         opacity: 0;
-        transition: opacity 0.2s;
+        transition: opacity var(--baseAnimationSpeed);
         i {
             font-size: inherit;
         }

ui/src/components/collections/CollectionsSidebar.svelte

@@ -1,9 +1,8 @@
 <script>
-    import { link } from "svelte-spa-router";
-    import CommonHelper from "@/utils/CommonHelper";
-    import tooltip from "@/actions/tooltip";
     import { hideControls } from "@/stores/app";
     import { collections, activeCollection, isCollectionsLoading } from "@/stores/collections";
+    import CommonHelper from "@/utils/CommonHelper";
+    import Dragline from "@/components/base/Dragline.svelte";
     import CollectionUpsertPanel from "@/components/collections/CollectionUpsertPanel.svelte";
     import CollectionSidebarItem from "@/components/collections/CollectionSidebarItem.svelte";
 
@@ -12,9 +11,17 @@
     let collectionPanel;
     let searchTerm = "";
     let pinnedIds = [];
+    let sidebarElem;
+    let initialSidebarWidth;
+    let sidebarWidth = localStorage.getItem("adminSidebarWidth") || null;
 
     loadPinned();
 
+    $: if (sidebarWidth && sidebarElem) {
+        sidebarElem.style.width = sidebarWidth;
+        localStorage.setItem("adminSidebarWidth", sidebarWidth);
+    }
+
     $: if ($collections) {
         syncPinned();
         scrollIntoView();
@@ -65,7 +72,7 @@
     }
 </script>
 
-<aside class="page-sidebar collection-sidebar">
+<aside bind:this={sidebarElem} class="page-sidebar collection-sidebar">
     <header class="sidebar-header">
         <div class="form-field search" class:active={hasSearch}>
             <div class="form-field-addon">
@@ -125,6 +132,18 @@
     {/if}
 </aside>
 
+<Dragline
+    on:dragstart={() => {
+        initialSidebarWidth = sidebarElem.offsetWidth;
+    }}
+    on:dragging={(e) => {
+        sidebarWidth = initialSidebarWidth + e.detail.diffX + "px";
+    }}
+    on:dragstop={() => {
+        CommonHelper.triggerResize();
+    }}
+/>
+
 <CollectionUpsertPanel
     bind:this={collectionPanel}
     on:save={(e) => {

ui/src/scss/_layout.scss

@@ -98,12 +98,13 @@
 .page-sidebar {
     --sidebarListItemMargin: 10px;
 
+    position: relative;
     z-index: 0;
     display: flex;
     flex-direction: column;
     width: var(--pageSidebarWidth);
     min-width: 220px;
-    max-width: 265px;
+    max-width: 400px;
     flex-shrink: 0;
     flex-grow: 0;
     overflow-x: hidden;
@@ -221,7 +222,7 @@
         --sidebarListItemMargin: 5px;
     }
     @media screen and (max-width: 1100px) {
-        min-width: 190px;
+        min-width: 195px;
         & > * {
             padding-left: 10px;
             padding-right: 10px;

ui/src/scss/_vars.scss

@@ -58,7 +58,7 @@
     --lgWrapperWidth: 1200px;
 
     --appSidebarWidth: 75px;
-    --pageSidebarWidth: 12.5%;
+    --pageSidebarWidth: 235px;
 
     --baseAnimationSpeed: 150ms;
     --activeAnimationSpeed: 70ms;

ui/src/utils/CommonHelper.js

@@ -1954,6 +1954,13 @@ export default class CommonHelper {
         }, data);
     }
 
+    /**
+     * Triggers a window resize event.
+     */
+    static triggerResize() {
+        window.dispatchEvent(new Event("resize"))
+    }
+
     /**
      * Extracts the query parameters from the current url.
      *