fix: add back animation to right sidebar

logseq · Apr 17, 2021 · 4f88415 · 4f88415
1 parent c134aa1
commit 4f88415
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 18 deletions.
diff --git a/src/main/frontend/components/right_sidebar.cljs b/src/main/frontend/components/right_sidebar.cljs
@@ -232,15 +232,12 @@
                                           (< right-el-ratio 0.2) 0.2
                                           (> right-el-ratio 0.7) 0.7
                                           :else right-el-ratio)
-                         left-el (js/document.getElementById "left-main")
                          right-el (js/document.getElementById "right-sidebar")]
-                     (when (and left-el right-el)
-                       (.setProperty (.-style left-el)
-                                     "flex"
-                                     (str (- 1 right-el-ratio)))
+                     (when right-el
+
                        (.setProperty (.-style right-el)
-                                     "flex"
-                                     (str right-el-ratio)))))}}))
+                                     "width"
+                                     (str (* right-el-ratio 100) "%")))))}}))
              (.styleCursor false)
              (.on "dragstart" #(.. js/document.documentElement -classList (add "is-resizing-buf")))
              (.on "dragend" #(.. js/document.documentElement -classList (remove "is-resizing-buf")))))
@@ -261,7 +258,7 @@
         t (i18n/use-tongue)]
     (rum/with-context [[t] i18n/*tongue-context*]
       [:div#right-sidebar.cp__right-sidebar.h-screen.overflow-x-hidden
-       {:class (if sidebar-open? "is-open")}
+       {:class (if sidebar-open? "open" "closed")}
        (if sidebar-open?
          [:div.cp__right-sidebar-inner.flex.flex-col.h-full
 

diff --git a/src/main/frontend/components/sidebar.cljs b/src/main/frontend/components/sidebar.cljs
@@ -333,7 +333,7 @@
           :close-fn    close-fn
           :route-match route-match})
         [:div.#app-container.h-screen.flex
-         [[:div.flex-1.h-full.flex.flex-col#left-main {:class (if sidebar-open? "sidebar-open")}
+         [[:div.flex-1.h-full.flex.flex-col
            [(header/header {:open-fn        open-fn
                             :white?         white?
                             :current-repo   current-repo

diff --git a/src/main/frontend/components/sidebar.css b/src/main/frontend/components/sidebar.css
@@ -52,10 +52,6 @@
   }
 }
 
-#left-main:not(.sidebar-open) {
-  flex: 1 !important;
-}
-
 .settings-modal {
   margin: -15px;
 }
@@ -101,15 +97,17 @@
 }
 
 .cp__right-sidebar {
-  display: none;
-  width: var(--ls-right-sidebar-width);
   z-index: var(--ls-z-index-level-1);
-  transition: width 0.3s, opacity 0.2s;
+  transition: width 0.3s;
   border-radius: var(--ls-border-radius-low) 0 0 0;
   background-color: var(--ls-secondary-background-color, #d8e1e8);
 
-  &.is-open {
-    display: block;
+  &.closed {
+    width: 0 !important;
+  }
+
+  &.open {
+    width: var(--ls-right-sidebar-width);
   }
 
   &::-webkit-scrollbar {