fix: recent in sidebar do not remember it's state (#6144)

* fix: recent in sidebar do not remember it's state

* fix: recent in sidebar do not remember it's state

* fix: store the collapsed state of navigatin item in left side bar

* enhance: use react to handle toggling

Co-authored-by: Junyi Du <[email protected]>

src/main/frontend/components/sidebar.cljs

@@ -41,18 +41,15 @@
             [reitit.frontend.easy :as rfe]
             [rum.core :as rum]))
 
-(rum/defc nav-content-item
+(rum/defc nav-content-item < rum/reactive
   [name {:keys [class]} child]
 
-  [:div.nav-content-item.is-expand
-   {:class class}
+  [:div.nav-content-item
+   {:class (util/classnames [class {:is-expand (not (state/sub [:ui/navigation-item-collapsed? class]))}])}
    [:div.nav-content-item-inner
     [:div.header.items-center.mb-1
-     {:on-click (fn [^js/MouseEvent e]
-                  (let [^js target (.-target e)
-                        ^js parent (.closest target ".nav-content-item")]
-                    (.toggle (.-classList parent) "is-expand")))}
-
+     {:on-click (fn [^js/MouseEvent _e]
+                  (state/toggle-navigation-item-collapsed! class))}
      [:div.font-medium.fade-link name]
      [:span
       [:a.more svg/arrow-down-v2]]]
@@ -263,7 +260,7 @@
            :active (and (not srs-open?) (= route-name :all-pages))
            :icon   "files"})]]
 
-      (favorites t)
+      (when (and left-sidebar-open? (not config/publishing?)) (favorites t))
 
       (when (and left-sidebar-open? (not config/publishing?)) (recent-pages t))
 

src/main/frontend/state.cljs

@@ -60,6 +60,8 @@
      :modal/close-btn?                      nil
      :modal/subsets                         []
 
+     ;; left sidebar
+     :ui/navigation-item-collapsed?         {}
 
      ;; right sidebar
      :ui/fullscreen?                        false
@@ -738,6 +740,10 @@
          :custom-context-menu/show? false
          :custom-context-menu/links nil))
 
+(defn toggle-navigation-item-collapsed!
+  [item]
+  (update-state! [:ui/navigation-item-collapsed? item] not))
+
 (defn toggle-sidebar-open?!
   []
   (swap! state update :ui/sidebar-open? not))