Sidenav
Rust UI component that displays a sidenav.
use leptos::prelude::*;
use crate::components::ui::sidenav::{Sidenav, SidenavH2, SidenavLink, SidenavSection};
#[component]
pub fn DemoSidenav() -> impl IntoView {
view! {
<Sidenav>
<SidenavLink href="/">"Home"</SidenavLink>
<SidenavSection>
<SidenavLink href="#">"Posts"</SidenavLink>
<SidenavLink href="#">"Comments"</SidenavLink>
<SidenavLink href="#">"Social Networks"</SidenavLink>
</SidenavSection>
<SidenavSection>
<SidenavH2>"Strategy"</SidenavH2>
<SidenavLink href="#">"Calendar"</SidenavLink>
<SidenavLink href="#">"Campaigns"</SidenavLink>
</SidenavSection>
<SidenavSection>
<SidenavH2>"Content"</SidenavH2>
<SidenavLink href="#">"Fragments"</SidenavLink>
<SidenavLink href="#">"Mentions"</SidenavLink>
<SidenavLink href="#">"Media Library"</SidenavLink>
</SidenavSection>
</Sidenav>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_sidenavui add sidenavUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/sidenav.rs
use leptos::prelude::*;
use leptos_ui::{a, clx};
mod components {
use super::*;
clx! {Sidenav, div, "flex flex-col gap-6 p-4 h-full bg-accent w-[250px]"}
clx! {SidenavSection, div, "flex flex-col gap-2"}
clx! {SidenavH2, h2, "text-sm font-medium text-muted-foreground"}
a! {SidenavLink, "hover:bg-neutral-500 rounded-md transition-colors duration-200 p-1"}
}
pub use components::*;
Update the imports to match your project setup.
Usage
// Coming soon 🦀