Components / Sidebar
Sidebar
Navigation column with sections, items and counts.
Example
The component itself, running in WebAssembly, beside its code in a playground. Try it.
Code
use ravenrs::prelude::*;
fn sidebar() -> impl View {
let state = SidebarState::new(true);
HStack::new((
Sidebar::new((
SidebarGroup::new(
"Workspace",
(
SidebarItem::new(IconName::LayoutDashboard, "Overview").selected(true),
SidebarItem::new(IconName::Users, "Customers").badge(Badge::new("12")),
SidebarItem::new(IconName::Settings, "Settings")
.item(SidebarItem::text("General").compact())
.item(SidebarItem::text("Billing").compact()),
),
),
SidebarGroup::new("Projects", (SidebarSkeleton::new(2),)).collapsible(),
))
.collapsible(SidebarCollapse::Icons)
.state(state.clone())
.footer(
HStack::new((Avatar::new("Ana Lima"), Text::new("Ana Lima").style(TextStyle::Callout)))
.spacing(12.0)
.align(Align::Center),
),
VStack::new((SidebarTrigger::new(state), Text::new("Or press Cmd/Ctrl+B.")))
.spacing(12.0)
.padding(16.0)
.grow(1.0),
))
.height(420.0)
.align(Align::Stretch)
}