fix(ui): close mobile left sidebar modal after clicking items link

ivokun · Oct 25, 2021 · 0357959 · 0357959
1 parent 06b517c
commit 0357959
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/src/main/frontend/components/header.css b/src/main/frontend/components/header.css
@@ -14,6 +14,7 @@
   right: 0;
   user-select: none;
   line-height: 1;
+  white-space: nowrap;
 
   > .l {
     width: var(--ls-left-sidebar-width);

diff --git a/src/main/frontend/components/sidebar.cljs b/src/main/frontend/components/sidebar.cljs
@@ -85,7 +85,6 @@
   [name]
   (let [original-name (db-model/get-page-original-name name)]
     [:a {:on-click (fn [e]
-                     (util/stop e)
                      (let [name (util/safe-lower-case name)]
                        (if (gobj/get e "shiftKey")
                          (when-let [page-entity (db/entity [:block/name name])]
@@ -196,22 +195,28 @@
           left-sidebar? (state/sub :ui/left-sidebar-open?)]
       (when left-sidebar?
         [:div.left-sidebar-inner.flex-1.flex.flex-col.min-h-0
+         {:on-click #(when-let [^js target (and (util/mobile?) (.-target %))]
+                       (when (some (fn [sel] (boolean (.closest target sel)))
+                                   [".favorites" ".recent" ".dropdown-wrapper" ".nav-header"])
+                         (close-modal-fn)))}
          [:div.flex.flex-col.pb-4.wrap
           [:nav.flex-1.px-2.space-y-1 {:aria-label "Sidebar"}
            (repo/repos-dropdown)
-           [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:on-click route-handler/go-to-journals!}
-            (ui/icon "calendar mr-3" {:style {:font-size 20}})
-            [:span.flex-1 "Journals"]]
 
-           (flashcards)
+           [:div.nav-header
+            [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:on-click route-handler/go-to-journals!}
+             (ui/icon "calendar mr-3" {:style {:font-size 20}})
+             [:span.flex-1 "Journals"]]
 
-           [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:href (rfe/href :graph)}
-            (ui/icon "hierarchy mr-3" {:style {:font-size 20}})
-            [:span.flex-1 "Graph view"]]
+            (flashcards)
 
-           [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:href (rfe/href :all-pages)}
-            (ui/icon "files mr-3" {:style {:font-size 20}})
-            [:span.flex-1 "All pages"]]]
+            [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:href (rfe/href :graph)}
+             (ui/icon "hierarchy mr-3" {:style {:font-size 20}})
+             [:span.flex-1 "Graph view"]]
+
+            [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md {:href (rfe/href :all-pages)}
+             (ui/icon "files mr-3" {:style {:font-size 20}})
+             [:span.flex-1 "All pages"]]]]
 
           (favorites t)
 
@@ -231,7 +236,7 @@
               "-translate-x-full")
      :style {:max-width "86vw"}}
     (when @open?
-      [:div.absolute.top-0.right-0.p-1
+      [:div.absolute.top-0.right-0.p-1.z-10
        [:a.button
         {:on-click close-fn}
         (ui/icon "x" {:style {:font-size 24}})]])