a lot of progress towards unification.

src/cljs/auto_ap/views/components/layouts.cljs

@@ -1,5 +1,7 @@
 (ns auto-ap.views.components.layouts
   (:require
+   [cljsjs.react-transition-group]
+   [reagent.core :as reagent]
    [re-frame.core :as re-frame]
    [bidi.bidi :as bidi]
    [auto-ap.routes :as routes]
@@ -8,7 +10,8 @@
    [auto-ap.views.utils :refer [active-when active-when= login-url dispatch-event]]
    
    [auto-ap.views.components.vendor-dialog :refer [vendor-dialog]]))
-
+(def css-transition-group
+  (reagent/adapt-react-class js/ReactTransitionGroup.CSSTransition))
 (defn login-dropdown []
   (let [user (re-frame/subscribe [::subs/user])
         menu (re-frame/subscribe [::subs/menu])]
@@ -82,7 +85,16 @@
       [:a {:class "icon", :href "https://github.com/dansup/bulma-templates"}
        [:i {:class "fa fa-github"}]]]]]])
 
-(defn side-bar-layout [{:keys [side-bar main ap bottom right-side-bar]}]
+(defn appearing-side-bar [{:keys [visible?]} & children ]
+  (let [final-state (reagent/atom visible?)]
+    (fn [{:keys [visible?]} & children]
+      [css-transition-group {:in visible? :class-names {:exitDone "bounce animated" :exit "fadeOutRight animated" :enter "fadeInRight animated"} :timeout 300 :onEnter (fn [] (reset! final-state true )) :onExited (fn [] (reset! final-state false))} 
+       (if (or @final-state visible?)
+         [:div.aside
+          [:div.sub-main children]]
+         [:div])])))
+
+(defn side-bar-layout [{:keys [side-bar main ap bottom right-side-bar right-side-bar-visible?]}]
   (let [ap @(re-frame/subscribe [::subs/active-page])
         client @(re-frame/subscribe [::subs/client])]
     [:div 
@@ -94,10 +106,7 @@
       [:div {:class "column messages hero is-fullheight", :id "message-feed"}
        ^{:key (str "active-page-" (:name client))}
        [:div.inbox-messages main]]
-      (when right-side-bar
-        [:aside.fadeInRight.animated {:class "column aside is-narrow menu hero is-fullheight" :style {:animation-duration "0.75s"}}
-         [:div.sub-main
-          right-side-bar]])]
+      [appearing-side-bar {:visible? right-side-bar-visible?} right-side-bar]]
      [footer]
      bottom
      [:div#dz-hidden]]))