enhance(ux): polish left sidebar items

src/main/frontend/components/repo.cljs

@@ -242,7 +242,9 @@
         (when (seq repos)
           (ui/dropdown-with-links
            (fn [{:keys [toggle-fn]}]
-             [:a#repo-switch.block.pr-2.whitespace-nowrap {:on-click toggle-fn}
+             (state/set-state! :ui/repos-switcher-toggle-fn toggle-fn)
+             [:a#repo-switch.block.pr-2.whitespace-nowrap
+              {:on-click toggle-fn}
               [:span
                (let [repo-name (get-repo-name current-repo)
                      repo-name (if (or (util/electron?)

src/main/frontend/components/sidebar.cljs

@@ -181,10 +181,15 @@
           left-sidebar? (state/sub :ui/left-sidebar-open?)]
       (when left-sidebar?
         [:div.left-sidebar-inner.flex-1.flex.flex-col.min-h-0
-         [:div.flex.flex-col.pb-4 {:style {:padding-top "1.25rem"}}
+         [:div.flex.flex-col.pb-4.wrap
           [:nav.flex-1.px-2.space-y-1 {:aria-label "Sidebar"}
            (when-not (util/mobile?)
-             [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {}
+             [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md.ignore-outside-event
+              {:on-click #(let [^js target (.-target %)
+                                ^js switcher (gdom/getElement "repo-switch")]
+                            (when-not (.closest target ".repos")
+                              (when-let [toggle (:ui/repos-switcher-toggle-fn @state/state)]
+                                (toggle))))}
               (ui/icon "database mr-3" {:style {:font-size 20}})
               [:div.repos
                (repo/repos-dropdown nil nil)]])

src/main/frontend/components/sidebar.css

@@ -11,9 +11,8 @@
 }
 
 .is-electron.is-mac .cp__sidebar-left-layout {
-    padding-top: 42px;
-    transition: all 0.25s;
-    -webkit-transition: all 0.25s;
+  transition: all 0.25s;
+  -webkit-transition: all 0.25s;
 }
 
 #app-container {
@@ -71,14 +70,22 @@
 }
 
 .left-sidebar-inner {
- height: 100%;
+  height: 100%;
 
- .dropdown-wrapper {
+  > .wrap {
+    padding-top: 42px;
+  }
+
+  .dropdown-wrapper {
     min-width: 180px;
   }
 
-  a.item > span {
-    margin-top: 3px;
+  a.item {
+    user-select: none;
+
+    > span {
+      margin-top: 3px;
+    }
   }
 
   .nav-content-item {
@@ -88,7 +95,6 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-bottom: 5px;
       user-select: none;
       cursor: pointer;
       padding: 0 18px;
@@ -106,6 +112,8 @@
 
           &:last-child {
             transform: translateY(-6px) translateX(2px) rotate(90deg);
+            transform-origin: center center;
+            transition: .25s transform;
           }
         }
       }
@@ -122,6 +130,10 @@
           }
         }
       }
+
+      &:active {
+        opacity: .8;
+      }
     }
 
     > .bd {
@@ -133,21 +145,21 @@
         margin: 0;
 
         a {
-            width: 100%;
-            padding: 2px 20px;
-            display: block;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            color: var(--ls-primary-text-color);
+          width: 100%;
+          padding: 2px 20px;
+          display: block;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          color: var(--ls-primary-text-color);
 
-            &:hover {
-                background-color: var(--ls-quaternary-background-color);
-            }
+          &:hover {
+            background-color: var(--ls-quaternary-background-color);
+          }
 
-            &:active {
-                opacity: .7;
-            }
+          &:active {
+            opacity: .7;
+          }
         }
       }
     }
@@ -155,7 +167,7 @@
     &.is-expand {
       > .hd > span > a {
         &:last-child {
-          transform: translateY(2px);
+          transform: translateY(2px) translateX(-3px);
         }
       }
 
@@ -166,12 +178,12 @@
   }
 
   a.item:hover {
-      background-color: var(--ls-quaternary-background-color);
+    background-color: var(--ls-quaternary-background-color);
   }
 }
 
-.white-theme .left-sidebar-inner a{
-    color: var(--ls-primary-text-color);
+.white-theme .left-sidebar-inner a {
+  color: var(--ls-primary-text-color);
 }
 
 .cp__sidebar-left-layout {
@@ -356,5 +368,5 @@
 }
 
 .favorites li.dragging-target {
-    border-left: 5px solid green;
+  border-left: 5px solid green;
 }

src/main/frontend/mixins.cljs

@@ -58,9 +58,11 @@
         (or (false? outside?)
             (listen state js/window "mousedown"
                     (fn [e]
-                      ;; If the click target is outside of current node
-                      (when-not (dom/contains dom-node (.. e -target))
-                        (on-hide state e :click)))))
+                      (let [target (.. e -target)]
+                        ;; If the click target is outside of current node
+                        (when (and (not (dom/contains dom-node target))
+                                   (not (.contains (.-classList target) "ignore-outside-event")))
+                          (on-hide state e :click))))))
         (listen state js/window "keydown"
                 (fn [e]
                   (case (.-keyCode e)

src/main/frontend/state.cljs

@@ -58,6 +58,7 @@
       :modal/show? false
 
       ;; right sidebar
+      :ui/repos-switcher-toggle-fn nil
       :ui/fullscreen? false
       :ui/settings-open? false
       :ui/sidebar-open? false