Add page transition

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

@@ -215,7 +215,7 @@
             :options {:href (str "/file/" (util/url-encode config/config-file))}}
            {:title "Sign out"
             :options {:on-click handler/sign-out!}}])]]]
-      [:main.flex-1.relative.z-0.overflow-y-auto.py-6.focus:outline-none
+      [:main.flex-1.relative.z-0.overflow-y-scroll.py-6.focus:outline-none
        {:tabIndex "0"}
        [:div.flex.justify-center
         [:div.flex-1.m-6 {:style {:position "relative"

web/src/main/frontend/page.cljs

@@ -1,13 +1,31 @@
 (ns frontend.page
   (:require [rum.core :as rum]
             [frontend.state :as state]
-            [frontend.components.sidebar :as sidebar]))
+            [frontend.components.sidebar :as sidebar]
+            [frontend.ui :as ui]))
+
+(rum/defc route-view
+  [view route-match]
+  (view route-match))
 
 (rum/defc current-page < rum/reactive
   []
   (let [route-match (state/sub :route-match)]
     (if route-match
-      (when-let [view (:view (:data route-match))]
+      (let [route-name (get-in route-match [:data :name])
-        (sidebar/sidebar route-match
+            no-animate? (contains? #{:repos :repo-add :file}
-         (view route-match)))
+                                   route-name)]
+        (when-let [view (:view (:data route-match))]
+          (sidebar/sidebar
+           route-match
+           (if no-animate?
+             (route-view view route-match)
+             (ui/transition-group
+              {:class-name "router-wrapper"}
+              (ui/css-transition
+               {:class-names "pageChange"
+                :key route-name
+                :timeout {:enter 300
+                          :exit 200}}
+               (route-view view route-match)))))))
       [:div "404 Page"])))