Make graph in the right sidebar toggleable

web/src/main/frontend/components/right_sidebar.cljs

@@ -79,40 +79,53 @@
 
 (defn render-graph
   [state]
-  (when-let [graph (first (:rum/args state))]
+  (let [match (:route-match @state/state)
+        theme (:ui/theme @state/state)
+        page (get-page match)
+        graph (db/build-page-graph page theme)]
     (vis/new-network "page-graph" graph))
   state)
 
-(rum/defc graph < rum/static
+
+(defonce *show-graph? (atom false))
+(rum/defc graph < rum/reactive
   {:did-mount render-graph
    :did-update render-graph}
-  [graph-data dark?]
+  [dark?]
   [:div.sidebar-item.flex-col.flex-1
-   [:div#theme-selector.flex.flex-row.justify-between
-    [:div.ml-2.font-bold "Dark theme"]
-    [:div.px-1
-     (ui/toggle dark? (fn []
-                        (state/set-theme! (if dark? "white" "dark"))))]]
    [:div#page-graph]])
 
 (rum/defcs sidebar < rum/reactive
   [state]
   (let [blocks (state/sub :sidebar/blocks)
         repo (state/sub :git/current-repo)
-        starred (state/sub [:config repo :starred])]
+        starred (state/sub [:config repo :starred])
+        match (state/sub :route-match)
+        theme (state/sub :ui/theme)
+        dark? (= "dark" theme)
+        show-graph? (rum/react *show-graph?)]
     [:div#right-sidebar.flex.flex-col.p-2.shadow-xs.overflow-y-auto
+     [:div#theme-selector.flex.flex-row.justify-between.sidebar-item {:style {:padding-top 12
+                                                                              :margin-bottom 12}}
+      [:div.flex.flex-row {:key "right-sidebar-settings"}
+       [:div.mr-1.font-bold.text-sm "Dark theme"]
+       [:div.px-1
+        (ui/toggle dark? (fn []
+                           (state/set-theme! (if dark? "white" "dark"))))]]
+      [:div.flex.flex-row
+       [:div.mr-1.font-bold.text-sm "Graph"]
+       [:div.px-1
+        (ui/toggle show-graph? (fn []
+                           (swap! *show-graph? not)))]]]
+
      (for [[idx [repo db-id block-type block-data]] (medley/indexed blocks)]
        (rum/with-key
          (sidebar-item repo idx db-id block-type block-data)
          (str "sidebar-block-" idx)))
-     (let [match (state/sub :route-match)
-           theme (state/sub :ui/theme)
-           dark? (= "dark" theme)
-           page (get-page match)
-           graph-data (db/build-page-graph page theme)]
-       (graph graph-data dark?))
+     (when show-graph?
+       (graph dark?))
      (when (and repo (seq starred))
-       [:div.sidebar-item.flex-col.flex-1.content
+       [:div.sidebar-item.flex-col.flex-1.content {:key "starred-pages"}
         [:div.flex.flex-row
          [:div.ml-2.font-bold "Starred pages"]]
         (for [page starred]

web/src/main/frontend/handler.cljs

@@ -529,7 +529,7 @@
   [name path-params]
   (case name
     :home
-    "Home"
+    "Journals"
     :repos
     "Repos"
     :repo-add