enhance: remove ui/repos-switcher-toggle-fn from state

src/main/frontend/components/header.css

@@ -18,14 +18,6 @@
     transform: scale(0.8);
   }
 
-  .repos {
-    .dropdown-wrapper {
-      left: unset;
-      right: -46px;
-      min-width: 14rem;
-    }
-  }
-
   a.button {
     margin: 0 4px;
   }

src/main/frontend/components/repo.cljs

@@ -173,14 +173,13 @@
                (t :git/version) (str " " version/version)]]])))])))
 
 (rum/defc repos-dropdown < rum/reactive
-  [on-click close-modal-fn]
+  [toggle-dropdown-f]
   (when-let [current-repo (state/sub :git/current-repo)]
     (rum/with-context [[t] i18n/*tongue-context*]
       (let [get-repo-name (fn [repo]
                             (if (config/local-db? repo)
                               (config/get-local-dir repo)
                               (db/get-repo-path repo)))
-            close-modal-fn (if (fn? close-modal-fn) close-modal-fn (fn []))
             repos (state/sub [:me :repos])
             repos (remove (fn [r] (= config/local-repo (:url r))) repos)
             switch-repos (remove (fn [repo]
@@ -197,10 +196,7 @@
                                                  (common-handler/reset-config! url nil)
                                                  (shortcut/refresh!)
                                                  (when-not (= :draw (state/get-current-route))
-                                                   (route-handler/redirect-to-home!))
-                                                 (when on-click
-                                                   (on-click url))
-                                                 (close-modal-fn))}})
+                                                   (route-handler/redirect-to-home!)))}})
                         switch-repos)
             links (concat repo-links
                           [(when (seq switch-repos)
@@ -242,9 +238,8 @@
         (when (seq repos)
           (ui/dropdown-with-links
            (fn [{:keys [toggle-fn]}]
-             (state/set-state! :ui/repos-switcher-toggle-fn toggle-fn)
-             [:a#repo-switch.block.pr-2.whitespace-nowrap
-              {:on-click toggle-fn}
+             (reset! toggle-dropdown-f toggle-fn)
+             [:span#repo-switch.block.pr-2.whitespace-nowrap
               [:span
                (let [repo-name (get-repo-name current-repo)
                      repo-name (if (or (util/electron?)

src/main/frontend/components/sidebar.cljs

@@ -178,21 +178,20 @@
     (let [active? (fn [route] (= route (get-in route-match [:data :name])))
           page-active? (fn [page]
                          (= page (get-in route-match [:parameters :path :name])))
-          left-sidebar? (state/sub :ui/left-sidebar-open?)]
+          left-sidebar? (state/sub :ui/left-sidebar-open?)
+          toggle-dropdown-f (atom nil)]
       (when left-sidebar?
         [:div.left-sidebar-inner.flex-1.flex.flex-col.min-h-0
          [: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.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)]])
+           [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md.ignore-outside-event
+            {:on-mouse-down (fn [e]
+                              (util/stop e)
+                              (when-let [f @toggle-dropdown-f]
+                                (f)))}
+            (ui/icon "database mr-3" {:style {:font-size 20}})
+            [:div.graphs
+             (repo/repos-dropdown toggle-dropdown-f)]]
            [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:href (rfe/href :all-journals)}
             (ui/icon "calendar mr-3" {:style {:font-size 20}})
             [:span.flex-1 "Journals"]]
@@ -226,17 +225,9 @@
      :style {:max-width "86vw"}}
     (when @open?
       [:div.absolute.top-0.right-0.p-1
-       [:button#close-left-bar.close-panel-btn.flex.items-center.justify-center.h-12.w-12.rounded-full.focus:outline-none.focus:bg-gray-600
+       [:a.button
         {:on-click close-fn}
-        [:svg.h-6.w-6
-         {:viewBox "0 0 24 24", :fill "none", :stroke "currentColor"}
-         [:path
-          {:d "M6 18L18 6M6 6l12 12"
-           :stroke-width "2"
-           :stroke-linejoin "round"
-           :stroke-linecap "round"}]]]])
-    [:div.flex-shrink-0.flex.items-center.px-4.h-16.head-wrap
-     (repo/repos-dropdown nil close-fn)]
+        (ui/icon "x" {:style {:font-size 24}})]])
     [:div.flex-1.h-0.overflow-y-auto
      (sidebar-nav route-match close-fn)]]])
 

src/main/frontend/components/sidebar.css

@@ -67,6 +67,10 @@
   nav > a {
     color: var(--ls-icon-color);
   }
+
+  a {
+    color: var(--ls-primary-text-color);
+  }
 }
 
 .left-sidebar-inner {
@@ -182,7 +186,7 @@
   }
 }
 
-.white-theme .left-sidebar-inner a {
+.white-theme .left-sidebar-inner a, .white-theme .left-bar a {
   color: var(--ls-primary-text-color);
 }
 

src/main/frontend/state.cljs

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