use leptos::prelude::*;
use crate::meta::{VisibilityState, ActivityState, DisabledState};
#[derive(Clone, Copy, PartialEq, Default, Debug)]
pub enum SidebarVariant {
#[default]
Default,
Rail,
}
impl SidebarVariant {
pub fn as_str(&self) -> &'static str {
match self {
Self::Default => "default",
Self::Rail => "rail",
}
}
}
#[component]
pub fn SidebarPrimitive(
children: Children,
#[prop(default = VisibilityState::Open)] state: VisibilityState,
#[prop(default = SidebarVariant::Default)] variant: SidebarVariant,
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
let uid_sb = crate::infra::uid::generate("sb");
let state_str = match state {
VisibilityState::Open => "expanded",
_ => "collapsed",
};
view! {
<aside
data-rs-sidebar=""
data-rs-uid=uid_sb
data-rs-interaction="nav"
data-rs-state=state_str
data-rs-variant=variant.as_str()
aria-hidden=state.aria_hidden()
role="complementary"
class=class
>
{children()}
</aside>
}
}
#[component]
pub fn SidebarHeaderPrimitive(
children: Children,
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
view! {
<div data-rs-sidebar-header="" class=class>
{children()}
</div>
}
}
#[component]
pub fn SidebarContentPrimitive(
children: Children,
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
view! {
<div data-rs-sidebar-content="" class=class>
{children()}
</div>
}
}
#[component]
pub fn SidebarFooterPrimitive(
children: Children,
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
view! {
<div data-rs-sidebar-footer="" class=class>
{children()}
</div>
}
}
#[component]
pub fn SidebarMenuPrimitive(
children: Children,
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
view! {
<nav data-rs-sidebar-menu="" role="navigation" class=class>
{children()}
</nav>
}
}
#[component]
pub fn SidebarMenuItemPrimitive(
children: Children,
#[prop(into, default = String::new())] href: String,
#[prop(default = ActivityState::Inactive)] active: ActivityState,
#[prop(default = DisabledState::Enabled)] disabled: DisabledState,
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
let is_active = active == ActivityState::Active;
view! {
<a
data-rs-sidebar-menu-item=""
data-rs-activity=active.as_str()
data-rs-disabled=if disabled.disabled() { Some("disabled") } else { None }
href=if disabled.disabled() { "#".to_string() } else { href }
aria-current=if is_active { Some("page") } else { None }
aria-disabled=disabled.aria_disabled()
tabindex=if disabled.disabled() { "-1" } else { "0" }
class=class
>
{children()}
</a>
}
}
#[component]
pub fn SidebarMenuGroupPrimitive(
children: Children,
#[prop(into, optional)] label: Option<String>,
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
view! {
<div data-rs-sidebar-menu-group="" role="group" aria-label=label class=class>
{children()}
</div>
}
}
#[component]
pub fn SidebarSeparatorPrimitive(
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
view! {
<div data-rs-sidebar-separator="" role="separator" aria-orientation="horizontal" class=class />
}
}
#[component]
pub fn SidebarGroupLabelPrimitive(
children: Children,
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
view! {
<div data-rs-sidebar-group-label="" role="presentation" class=class>
{children()}
</div>
}
}
#[component]
pub fn SidebarGroupPrimitive(
children: Children,
#[prop(into, default = String::new())] class: String,
#[prop(default = false)] root: bool,
#[prop(default = VisibilityState::Open)] state: VisibilityState,
) -> impl IntoView {
let state_str = match state {
VisibilityState::Open => "expanded",
_ => "collapsed",
};
view! {
<div
data-rs-sidebar-group=""
data-rs-sidebar-group-root=if root { Some("true") } else { None }
data-rs-state=state_str
class=class
>
{children()}
</div>
}
}
#[component]
pub fn SidebarGroupTriggerPrimitive(
children: Children,
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
view! {
<button type="button" data-rs-sidebar-group-toggle="" class=class>
{children()}
</button>
}
}
#[component]
pub fn SidebarGroupContentPrimitive(
children: Children,
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
view! {
<div data-rs-sidebar-group-content="" class=class>
{children()}
</div>
}
}
#[component]
pub fn SidebarTriggerPrimitive(
children: Children,
#[prop(into, default = String::new())] class: String,
#[prop(into, default = String::new())] style: String,
) -> impl IntoView {
view! {
<button type="button" data-rs-sidebar-toggle="" aria-expanded="false" class=class style=style>
{children()}
</button>
}
}
#[component]
pub fn SidebarLabelPrimitive(
children: Children,
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
view! {
<span data-rs-sidebar-label="" class=class>
{children()}
</span>
}
}
#[component]
pub fn SidebarIconPrimitive(
children: Children,
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
view! {
<span data-rs-sidebar-icon="" class=class>
{children()}
</span>
}
}
#[component]
pub fn SidebarUserPrimitive(
children: Children,
#[prop(into, default = String::new())] class: String,
) -> impl IntoView {
view! {
<div data-rs-sidebar-user="" class=class>
{children()}
</div>
}
}