tallyweb_components/
sidebar.rs

1use leptos::*;
2
3#[derive(Debug, Clone, Copy, PartialEq, Eq)]
4pub enum SidebarLayout {
5    Portrait,
6    Hover,
7    Landscape,
8}
9
10#[derive(Debug, Clone, PartialEq, Eq)]
11pub struct ShowSidebar(pub bool);
12
13#[component(transparent)]
14pub fn Sidebar(
15    #[prop(optional, into, default=ShowSidebar(true).into())] display: MaybeSignal<ShowSidebar>,
16    #[prop(optional, into, default=400.into())] width: MaybeSignal<usize>,
17    #[prop(optional, into, default=SidebarLayout::Hover.into())] layout: MaybeSignal<SidebarLayout>,
18    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
19    children: ChildrenFn,
20) -> impl IntoView {
21    let aside_transform = move || match (layout(), display().0) {
22        (SidebarLayout::Landscape, false) => {
23            "transform: TranslateX(-2px); width: 0px; overflow-x: hidden;".into()
24        }
25        (SidebarLayout::Landscape, true) => {
26            format!("border-right: 2px solid #FFFFFF80; width: {}px;", width())
27        }
28        (SidebarLayout::Portrait, true) => "width: 100vw;".into(),
29
30        (_, false) => "transform: TranslateX(-120%);".into(),
31        (_, true) => Default::default(),
32    };
33
34    let sidebar_style = move || match layout() {
35        SidebarLayout::Landscape => format!("width: {}px", width()),
36        SidebarLayout::Hover => format!("width: {}px", width() - 12),
37        SidebarLayout::Portrait => String::new(),
38    };
39
40    view! {
41        <aside {..attrs} style=aside_transform>
42            <side-bar data-testid="test-sidebar" style=sidebar_style>
43                {children()}
44            </side-bar>
45        </aside>
46    }
47}
tallyweb_components/sidebar.rs

tallyweb_components/
sidebar.rs
