Function Sidebar

src/components/sidebar.rs:115–207

(#[prop()] tabs: Vec<Tab>)

#[tracing::instrument(level = "debug", skip(tabs))]
#[component]
pub fn Sidebar(#[prop()] tabs: Vec<Tab>) -> impl IntoView {
    let mut active_write_signals = vec![];
    let mut active_read_signals = vec![];
    for _ in 0..tabs.len() {
        let (read, write) = signal(false);
        active_read_signals.push(read);
        active_write_signals.push(write);
    }

    let (active_tab, set_active_tab) = signal(1);
    active_write_signals[0].set(true);

    let tab_urls: Vec<String> = tabs.iter().map(|v| v.url.clone()).collect();

    let navigate = leptos_router::hooks::use_navigate();

    let ui_store = expect_context::<RwSignal<UiStore>>();

    let (sidebar_open, set_sidebar_open) = create_slice(
        ui_store,
        |u| u.get_sidebar_open(),
        |u, val| u.set_sidebar_open(val),
    );

    Effect::new(move || {
        let active_tab = active_tab.get();
        for (i, signal) in active_write_signals.iter().enumerate() {
            signal.set(i == active_tab);
        }
        let url = tab_urls.get(active_tab);
        if let Some(url) = url {
            if url == "queue" {
                ui_store.update(|s| s.show_queue(true));
            } else {
                navigate(url.as_str(), Default::default());
            }
        }
    });

    let is_mobile = create_read_slice(ui_store, |u| u.get_is_mobile()).get();

    view! {
        <div class="sidebar-container sidebar" class:sidebar-mobile=is_mobile>
            <div tabindex="-1" class="b-sidebar-outer">
                <div
                    class="b-sidebar gradient sidebar-top-low-spacing"
                    id="sidebar"
                    tabindex="-1"
                    role="dialog"
                    aria-modal="false"
                    style:width=move || if sidebar_open.get() { "261px" } else { "70px" }
                >
                    <header class="b-sidebar-header">
                        <div class="d-flex w-100 mt-3 justify-content-between"></div>
                    </header>
                    <div class="b-sidebar-body">
                        <div class="extra-margin-top">
                            <div