Explorar el Código

fix(ui): response visibility for left mobile sidebar

charlie hace 4 años
padre
commit
ea81ff8b67

+ 7 - 5
src/main/frontend/components/sidebar.cljs

@@ -223,8 +223,9 @@
           (recent-pages t)]]))))
           (recent-pages t)]]))))
 
 
 (rum/defc sidebar-mobile-sidebar < rum/reactive
 (rum/defc sidebar-mobile-sidebar < rum/reactive
-  [{:keys [open? close-fn route-match]}]
-  [:div.md:hidden
+  [{:keys [open? left-sidebar-open? close-fn route-match]}]
+  [:div.md:hidden.ls-mobile-left-sidebar
+   {:class (if left-sidebar-open? "is-left-sidebar-open" "")}
    [:div.fixed.inset-0.z-30.bg-gray-600.pointer-events-none.ease-linear.duration-300
    [:div.fixed.inset-0.z-30.bg-gray-600.pointer-events-none.ease-linear.duration-300
     {:class (if @open?
     {:class (if @open?
               "opacity-75 pointer-events-auto"
               "opacity-75 pointer-events-auto"
@@ -490,9 +491,10 @@
         {:class (util/classnames [{:ls-left-sidebar-open left-sidebar-open?}])}
         {:class (util/classnames [{:ls-left-sidebar-open left-sidebar-open?}])}
 
 
         (sidebar-mobile-sidebar
         (sidebar-mobile-sidebar
-         {:open?       open?
-          :close-fn    close-fn
-          :route-match route-match})
+          {:open?       open?
+           :left-sidebar-open? left-sidebar-open?
+           :close-fn    close-fn
+           :route-match route-match})
 
 
         [:div.#app-container.h-screen.flex
         [:div.#app-container.h-screen.flex
          [:div.flex-1.h-full.flex.flex-col#left-container.relative
          [:div.flex-1.h-full.flex.flex-col#left-container.relative

+ 9 - 0
src/main/frontend/components/sidebar.css

@@ -68,6 +68,15 @@
   }
   }
 }
 }
 
 
+.ls-mobile-left-sidebar {
+  position: relative;
+  z-index: -1;
+
+  &.is-left-sidebar-open {
+    z-index: var(--ls-z-index-level-3);
+  }
+}
+
 .left-sidebar-inner {
 .left-sidebar-inner {
   position: relative;
   position: relative;
   height: 100%;
   height: 100%;