feat(sidebar): resize width

resources/electron-dev.html

@@ -101,8 +101,9 @@ const portal = new MagicPortal(worker);
   window.workerThread = workerThread
 })()
 </script>
-<script src="./js/main.js"></script>
-<script src="./js/highlight.min.js"></script>
-<script src="./js/code-editor.js"></script>
+<script defer src="./js/highlight.min.js"></script>
+<script defer src="./js/interact.min.js"></script>
+<script defer src="./js/main.js"></script>
+<script defer src="./js/code-editor.js"></script>
 </body>
 </html>

resources/electron.html

@@ -102,8 +102,9 @@ const portal = new MagicPortal(worker);
   window.workerThread = workerThread
 })()
 </script>
-<script src="./js/main.js"></script>
-<script src="./js/highlight.min.js"></script>
-<script src="./js/code-editor.js"></script>
+<script defer src="./js/highlight.min.js"></script>
+<script defer src="./js/interact.min.js"></script>
+<script defer src="./js/main.js"></script>
+<script defer src="./js/code-editor.js"></script>
 </body>
 </html>

src/main/frontend/components/right_sidebar.cljs

@@ -208,6 +208,32 @@
         theme (:ui/theme @state/state)]
     (get-page match)))
 
+(rum/defc sidebar-resizer
+  []
+  (let [el-ref (rum/use-ref nil)]
+    (rum/use-effect!
+     (fn []
+       (when-let [el (and (fn? js/interact) (rum/deref el-ref))]
+         (-> (js/interact el)
+             (.draggable
+              (bean/->js
+               {:listeners
+                {:move
+                 (fn [^js/MouseEvent e]
+                   (let [width js/document.documentElement.clientWidth
+                         offset (.-left (.-rect e))
+                         to-val (- 1 (.toFixed (/ offset width) 6))
+                         to-val (cond
+                                  (< to-val 0.2) 0.2
+                                  (> to-val 0.7) 0.7
+                                  :else to-val)]
+                     (.setProperty (.-style js/document.documentElement)
+                                   "--ls-right-sidebar-width"
+                                   (str (* to-val 100) "%"))))}}))))
+       #())
+     [])
+    [:span.resizer {:ref el-ref}]))
+
 (rum/defcs sidebar < rum/reactive
   [state]
   (let [blocks (state/sub :sidebar/blocks)
@@ -224,6 +250,7 @@
        {:class (if sidebar-open? "is-open")}
        (if sidebar-open?
          [:div.cp__right-sidebar-inner
+          (sidebar-resizer)
           [:div.flex.flex-row.justify-between.items-center
            [:div.cp__right-sidebar-settings.hide-scrollbar {:key "right-sidebar-settings"}
             [:div.ml-4.text-sm

src/main/frontend/components/sidebar.css

@@ -66,7 +66,7 @@
 
 .cp__sidebar-layout.is-right-sidebar-open {
   .cp__sidebar-main-layout {
-    margin-right: 40%;
+    margin-right: var(--ls-right-sidebar-width);
   }
 }
 
@@ -139,6 +139,16 @@
   &-inner {
     padding: 15px;
     padding-top: 0;
+
+    .resizer {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 4px;
+      user-select: none;
+      cursor: col-resize !important;
+    }
   }
 
   &-settings {
@@ -156,13 +166,14 @@
   }
 
   .close-arrow svg {
-      transform: scale(0.8);
+    transform: scale(0.8);
   }
 
   &.is-open {
     display: block;
-    width: 40%;
+    width: var(--ls-right-sidebar-width);
     opacity: 1;
+    transition: width 0.2s;
   }
 
   .page {

src/main/frontend/components/theme.css

@@ -8,6 +8,8 @@
   --ls-z-index-level-3: 999;
   --ls-z-index-level-4: 9999;
   --ls-z-index-level-5: 99999;
+
+  --ls-right-sidebar-width: 40%;
 }
 
 html {