Add feed sidebar navigation #8
2 changed files with 35 additions and 29 deletions
|
|
@ -2,7 +2,14 @@ body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; height: 10
|
||||||
.app-shell { display: flex; height: 100vh; }
|
.app-shell { display: flex; height: 100vh; }
|
||||||
.content-header { display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem 1.5rem 0.5rem; }
|
.content-header { display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem 1.5rem 0.5rem; }
|
||||||
.content-header h2 { margin: 0; }
|
.content-header h2 { margin: 0; }
|
||||||
.article-scroll-area { flex: 1; min-height: 0; padding: 0 1.5rem 1.5rem; }
|
/* Target the primitive's own stable data attribute, not a class we pass in:
|
||||||
|
ScrollArea sets its own `class` after spreading our attributes, so a
|
||||||
|
caller-supplied class never reaches the DOM (confirmed by inspecting the
|
||||||
|
live element — it only ever carries "dx-scroll-area-auto-hide"). Without
|
||||||
|
this, the scroll div has no bounded height, so it just grows to fit every
|
||||||
|
article (nothing to scroll) while its ancestor's overflow: hidden clips
|
||||||
|
everything past the viewport instead. */
|
||||||
|
main > [data-scroll-direction] { flex: 1; min-height: 0; padding: 0 1.5rem 1.5rem; }
|
||||||
.article-list { list-style: none; padding: 0; margin: 0; }
|
.article-list { list-style: none; padding: 0; margin: 0; }
|
||||||
.article-row { border-bottom: 1px solid #ddd; padding: 1rem 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
|
.article-row { border-bottom: 1px solid #ddd; padding: 1rem 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
|
||||||
.article-row-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
|
.article-row-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
|
||||||
|
|
|
||||||
|
|
@ -85,7 +85,6 @@ pub fn App() -> Element {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
SidebarInset {
|
SidebarInset {
|
||||||
main {
|
|
||||||
div { class: "content-header",
|
div { class: "content-header",
|
||||||
SidebarTrigger {}
|
SidebarTrigger {}
|
||||||
h2 {
|
h2 {
|
||||||
|
|
@ -104,7 +103,8 @@ pub fn App() -> Element {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ScrollArea { class: "article-scroll-area",
|
ScrollArea {
|
||||||
|
direction: dioxus_primitives::scroll_area::ScrollDirection::Vertical,
|
||||||
match articles.read().as_ref() {
|
match articles.read().as_ref() {
|
||||||
Some(Ok(articles)) => rsx! {
|
Some(Ok(articles)) => rsx! {
|
||||||
ul { class: "article-list",
|
ul { class: "article-list",
|
||||||
|
|
@ -121,5 +121,4 @@ pub fn App() -> Element {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue