sidebar 0.0.1

🗃️ A highly customizable sidebar component for WASM frameworks like Yew, Dioxus, and Leptos.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

use yew::prelude::*;

#[derive(Properties, Clone, PartialEq)]
pub struct ProfileProps {
    #[prop_or_default]
    pub user_name: &'static str,
    #[prop_or_default]
    pub designation: &'static str,
    #[prop_or_default]
    pub user_img: &'static str,
    #[prop_or_default]
    pub is_collapsed: bool,
    #[prop_or_default]
    pub on_logout: Callback<()>,

    #[prop_or(
        "display: flex; align-items: center; gap: 10px; margin: 1rem; padding: 1rem; background: #f0f0f0; border-radius: 8px;"
    )]
    pub style: &'static str,
    #[prop_or_default]
    pub class: &'static str,
}

#[function_component(Profile)]
pub fn profile(props: &ProfileProps) -> Html {
    if props.is_collapsed {
        html! {}
    } else {
        html! {
            <div
                class={props.class}
                style={props.style}
                aria-label="User Profile"
            >
                <img src={props.user_img} style="width: 40px; height: 40px; border-radius: 50%;" alt="User" />
                <div>
                    <strong>{ props.user_name }</strong>
                    <div style="font-size: 12px;">{ props.designation }</div>
                </div>
                <button onclick={props.on_logout.reform(|_| ())} style="margin-left:auto;">{ "⏻" }</button>
            </div>
        }
    }
}