greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

improve(ui): nested scroll container for left sidebar dynamic modules

pull/6555/head
charlie 2022-09-01 17:52:57 +08:00 committed by Tienson Qin
parent 63d268f5f0
commit 4c84589da4
2 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/main/frontend/components/sidebar.cljs
View File

@ -208,7 +208,7 @@
href :href}]
[:div
{:class class}
[:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md
[:a.item.group.flex.items-center.text-sm.font-medium.rounded-md
{:on-click on-click-handler
:class (when active "active")
:href href}
@ -218,7 +218,14 @@
(rum/defc sidebar-nav
[route-match close-modal-fn left-sidebar-open? srs-open?]
(let [default-home (get-default-home-if-valid)
route-name (get-in route-match [:data :name])]
route-name (get-in route-match [:data :name])
on-contents-scroll #(when-let [^js el (.-target %)]
(let [top (.-scrollTop el)
cls (.-classList el)
cls' "is-scrolled"]
(if (> top 2)
(.add cls cls')
(.remove cls cls'))))]
[:div.left-sidebar-inner.flex-1.flex.flex-col.min-h-0
{:on-click #(when-let [^js target (and (util/sm-breakpoint?) (.-target %))]
@ -226,14 +233,15 @@
[".favorites .bd" ".recent .bd" ".dropdown-wrapper" ".nav-header"])
(close-modal-fn)))}
[:div.flex.flex-col.pb-4.wrap.gap-4.relative
[:div.flex.flex-col.wrap.gap-1.relative
(when (mobile-util/native-platform?)
[:div.fake-bar.absolute
[:button
{:on-click state/toggle-left-sidebar!}
(ui/icon "menu-2" {:style {:fontSize ui/icon-size}})]])
[:nav.px-4.flex.flex-col.gap-1 {:aria-label "Navigation menu"}
[:nav.px-4.flex.flex-col.gap-1
{:aria-label "Navigation menu"}
(repo/repos-dropdown)
[:div.nav-header.flex.gap-1.flex-col
@ -276,9 +284,13 @@
:active (and (not srs-open?) (= route-name :all-pages))
:icon "files"})]]
(when left-sidebar-open? (favorites t))
[:div.nav-contents-container.flex.flex-col.gap-1.pt-1
{:on-scroll on-contents-scroll}
(when left-sidebar-open?
(favorites t))
(when (and left-sidebar-open? (not config/publishing?)) (recent-pages t))
(when (and left-sidebar-open? (not config/publishing?))
(recent-pages t))]
[:footer.px-2 {:class "new-page"}
(when-not config/publishing?

14
src/main/frontend/components/sidebar.css
View File

@ -88,7 +88,6 @@
> .wrap {
height: calc(100vh - var(--ls-headbar-inner-top-padding) - 50px);
margin-top: 40px;
padding-bottom: 60px;
width: 100%;
> .fake-bar {
@ -123,6 +122,8 @@
}
a.item {
@apply px-2 py-2 sm:py-1.5;
user-select: none;
transition: background-color .3s;
@ -146,6 +147,17 @@
}
}
.nav-contents-container {
@apply h-full flex-grow-0 flex-grow-0
overflow-x-hidden overflow-y-auto;
padding-bottom: 60px;
&.is-scrolled {
border-top: 1px solid var(--ls-tertiary-border-color);
}
}
.nav-content-item {
&-inner {
border-radius: 8px;