soma-ui 0.1.1

A Leptos 0.8 component library: 160+ accessible UI components, blocks, charts, and a ChartDB-style schema diagram — with a prebuilt stylesheet.
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
45
46
47
48
49
50
51
52
53
54
55
56
57

use crate::icons::{icondata, Icon};
use leptos::prelude::*;

/// A single nav item for the Sidebar.
#[derive(Clone)]
pub struct SidebarItem {
    pub label: String,
    pub href: String,
    pub icon: Option<icondata::Icon>,
}

#[component]
pub fn Sidebar(
    #[prop(into)] items: Vec<SidebarItem>,
    #[prop(into)] active_path: Signal<String>,
    #[prop(optional)] brand: Option<AnyView>,
    #[prop(default = String::new())] class: String,
) -> impl IntoView {
    let nav_class = format!(
        "bg-card border-e border-border w-60 flex flex-col h-full {}",
        class
    );

    let items_view = items
        .into_iter()
        .map(|item| {
            let href_attr = item.href.clone();
            let href_cmp = item.href.clone();
            let label = item.label.clone();
            let icon = item.icon;
            view! {
                <a
                    href=href_attr
                    class=move || {
                        if active_path.get() == href_cmp {
                            "flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium bg-accent text-foreground transition-colors".to_string()
                        } else {
                            "flex items-center gap-2 px-3 py-2 rounded-md text-sm text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors".to_string()
                        }
                    }
                >
                    {icon.map(|ic| view! { <Icon icon=Signal::derive(move || ic) attr:class="w-4 h-4 shrink-0" /> })}
                    <span class="truncate">{label}</span>
                </a>
            }
        })
        .collect::<Vec<_>>();

    view! {
        <nav class=nav_class>
            {brand.map(|b| view! { <div class="p-4 border-b border-border">{b}</div> })}
            <div class="flex flex-col gap-0.5 p-2 flex-1">
                {items_view}
            </div>
        </nav>
    }
}