enhance(ui): polish left sidebar ui & transition

resources/css/common.css

@@ -6,6 +6,7 @@
   --ls-font-family: 'Inter';
   --ls-main-content-max-width: 810px;
   --ls-main-content-max-width-wide: 100%;
+  --ls-scrollbar-width: 6px;
   --ls-border-radius-low: 4px;
   --ls-border-radius-medium: 8px;
   --ls-left-sidebar-width: 240px;

src/main/frontend/components/header.cljs

@@ -178,66 +178,67 @@
                              (when (and (util/electron?)
                                         (or (.. target -classList (contains "cp__header"))))
                                (js/window.apis.toggleMaxOrMinActiveWindow))))}
-       (left-menu-button {:on-click (fn []
+       [:div.l.flex
-                                      (open-fn)
+        (left-menu-button {:on-click (fn []
-                                      (state/set-left-sidebar-open!
+                                       (open-fn)
-                                       (not (:ui/left-sidebar-open? @state/state))))})
+                                       (state/set-left-sidebar-open!
+                                         (not (:ui/left-sidebar-open? @state/state))))})
 
-       (when current-repo
+        (when current-repo
-         (ui/tippy
+          (ui/tippy
-          {:html [:div.text-sm.font-medium
+            {:html        [:div.text-sm.font-medium
-                  "Shortcut: "
+                           "Shortcut: "
-                  ;; TODO: Pull from config so it displays custom shortcut, not just the default
+                           ;; TODO: Pull from config so it displays custom shortcut, not just the default
-                  [:code (util/->platform-shortcut "Ctrl + k")]]
+                           [:code (util/->platform-shortcut "Ctrl + k")]]
-           :interactive true
+             :interactive true
-           :delay [2000, 0]
+             :delay       2000
-           :arrow true}
+             :position    "right"
-          [:a.button#search-button
+             :arrow       true}
-           {:on-click #(state/pub-event! [:go/search])}
+            [:a.button#search-button
-           (ui/icon "search" {:style {:fontSize 20}})]))
+             {:on-click #(state/pub-event! [:go/search])}
+             (ui/icon "search" {:style {:fontSize 20}})]))]
 
-       [:div.flex-1.flex] ;; Spacer in the middle ------------------------------
+       [:div.r.flex
+        (when (and
+                (not (mobile-util/is-native-platform?))
+                (not (util/electron?)))
+          (login logged?))
 
-       (when (and
+        (when plugin-handler/lsp-enabled?
-              (not (mobile-util/is-native-platform?))
+          (plugins/hook-ui-items :toolbar))
-              (not (util/electron?)))
-         (login logged?))
 
-       (when plugin-handler/lsp-enabled?
+        (when (not= (state/get-current-route) :home)
-         (plugins/hook-ui-items :toolbar))
+          (home-button))
 
-       (when (not= (state/get-current-route) :home)
+        (when (util/electron?) (back-and-forward))
-         (home-button))
 
-       (when (util/electron?) (back-and-forward))
+        (new-block-mode)
 
-       (new-block-mode)
+        (when refreshing?
+          [:div {:class "animate-spin-reverse"}
+           svg/refresh])
 
-       (when refreshing?
+        (repo/sync-status current-repo)
-         [:div {:class "animate-spin-reverse"}
-          svg/refresh])
 
-       (repo/sync-status current-repo)
+        (when show-open-folder?
+          [:a.text-sm.font-medium.button
+           {:on-click #(page-handler/ls-dir-files! shortcut/refresh!)}
+           [:div.flex.flex-row.text-center.open-button__inner.items-center
+            [:span.inline-block.open-button__icon-wrapper svg/folder-add]
+            (when-not config/mobile?
+              [:span.ml-1 {:style {:margin-top (if electron-mac? 0 2)}}
+               (t :open)])]])
 
-       (when show-open-folder?
+        (when config/publishing?
-         [:a.text-sm.font-medium.button
+          [:a.text-sm.font-medium.button {:href (rfe/href :graph)}
-          {:on-click #(page-handler/ls-dir-files! shortcut/refresh!)}
+           (t :graph)])
-          [:div.flex.flex-row.text-center.open-button__inner.items-center
-           [:span.inline-block.open-button__icon-wrapper svg/folder-add]
-           (when-not config/mobile?
-             [:span.ml-1 {:style {:margin-top (if electron-mac? 0 2)}}
-              (t :open)])]])
 
-       (when config/publishing?
+        (dropdown-menu {:me           me
-         [:a.text-sm.font-medium.button {:href (rfe/href :graph)}
+                        :t            t
-          (t :graph)])
+                        :current-repo current-repo
+                        :default-home default-home})
 
-       (dropdown-menu {:me me
+        (when (not (state/sub :ui/sidebar-open?))
-                       :t t
+          (sidebar/toggle))
-                       :current-repo current-repo
-                       :default-home default-home})
 
-       (when (not (state/sub :ui/sidebar-open?))
+        (updater-tips-new-version t)]])))
-         (sidebar/toggle))
-
-       (updater-tips-new-version t)])))

src/main/frontend/components/header.css

@@ -5,6 +5,7 @@
   padding-right: 0.5rem;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   flex: 0 0 auto;
   position: sticky;
   position: -webkit-sticky;
@@ -14,6 +15,12 @@
   user-select: none;
   line-height: 1;
 
+  > .l {
+    width: var(--ls-left-sidebar-width);
+    height: 100%;
+    align-items: center;
+  }
+
   .it svg {
     transform: scale(0.8);
   }
@@ -72,9 +79,9 @@
 }
 
 .is-electron.is-mac .cp__header {
+  > .l {
     padding-left: 78px;
-    transition: all 0.25s;
+  }
-    -webkit-transition: all 0.25s;
 }
 
 .cp__header .navigation svg {

src/main/frontend/components/sidebar.css

@@ -11,13 +11,10 @@
 }
 
 .is-electron.is-mac .cp__sidebar-left-layout {
-  transition: all 0.25s;
-  -webkit-transition: all 0.25s;
 }
 
 #app-container {
   flex: 0 0 100%;
-  transition: all 200ms ease-in 0s;
 }
 
 #main-container {
@@ -43,8 +40,6 @@
   position: absolute;
   z-index: 11;
   opacity: 0;
-  transition: all 0.25s;
-  -webkit-transition: all 0.25s;
   background-color: #002b36;
 
   .enter {
@@ -74,7 +69,10 @@
 }
 
 .left-sidebar-inner {
+  position: relative;
   height: 100%;
+  z-index: 1;
+  overflow: auto;
 
   > .wrap {
     padding-top: 60px;
@@ -203,6 +201,18 @@
 
   transition: transform .25s;
   transform: translateX(-100%);
+  overflow: hidden;
+
+  &:before {
+    content: " ";
+    height: 3rem;
+    width: calc(var(--ls-left-sidebar-width) - var(--ls-scrollbar-width));
+    background-color: var(--ls-secondary-background-color);
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 2;
+  }
 
   &.is-open {
     transform: translateX(0);

src/main/frontend/components/theme.css

@@ -27,7 +27,7 @@ html {
   }
 
   ::-webkit-scrollbar {
-    width: 8px;
+    width: var(--ls-scrollbar-width);
     height: 8px;
   }