feat(fsn-components): add FsnSidebar collapsible sidebar component

Add FsnSidebarItem, FSN_SIDEBAR_CSS, and FsnSidebar — a 48px icon-only
sidebar that expands to 220px on hover, usable by all Desktop crates.

Author: FreeSynergy

fsn-components/src/lib.rs

@@ -50,7 +50,7 @@ pub mod chat;
 // ── Re-exports ─────────────────────────────────────────────────────────────────
 
 #[cfg(feature = "dioxus")]
-pub use nav::{SidebarNavBtn, TabBtn};
+pub use nav::{FsnSidebar, FsnSidebarItem, FSN_SIDEBAR_CSS, SidebarNavBtn, TabBtn};
 #[cfg(feature = "dioxus")]
 pub use button::{Button, ButtonSize, ButtonVariant, IconButton};
 #[cfg(feature = "dioxus")]

fsn-components/src/nav.rs

@@ -1,4 +1,4 @@
-/// Shared navigation components — tab bar buttons and sidebar nav buttons.
+/// Shared navigation components — tab bar buttons, sidebar nav buttons, and collapsible sidebar.
 use dioxus::prelude::*;
 
 /// Horizontal tab-bar button with a bottom-border active indicator.
@@ -21,6 +21,110 @@ pub fn TabBtn(label: String, is_active: bool, on_click: EventHandler) -> Element
     }
 }
 
+// ── FsnSidebar ────────────────────────────────────────────────────────────────
+
+/// A sidebar item descriptor.
+#[derive(Clone, PartialEq, Debug)]
+pub struct FsnSidebarItem {
+    pub id:    String,
+    pub icon:  String,
+    pub label: String,
+}
+
+impl FsnSidebarItem {
+    /// Create a new sidebar item.
+    pub fn new(id: impl Into<String>, icon: impl Into<String>, label: impl Into<String>) -> Self {
+        Self { id: id.into(), icon: icon.into(), label: label.into() }
+    }
+}
+
+/// CSS for the collapsible FsnSidebar (icons-only → expands on hover).
+/// Inject this once at the app root.
+pub const FSN_SIDEBAR_CSS: &str = r#"
+.fsn-sidebar {
+    width: 48px;
+    background: var(--fsn-bg-sidebar, #0a0f1a);
+    border-right: 1px solid var(--fsn-border, rgba(148,170,200,0.18));
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: width 180ms ease;
+    flex-shrink: 0;
+    height: 100%;
+}
+.fsn-sidebar:hover { width: 220px; }
+.fsn-sidebar__section-label {
+    padding: 12px 14px 4px;
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--fsn-text-muted, #5a6e88);
+    white-space: nowrap;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 120ms ease;
+}
+.fsn-sidebar:hover .fsn-sidebar__section-label { opacity: 1; }
+.fsn-sidebar__item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 9px 14px;
+    border: none;
+    border-left: 2px solid transparent;
+    background: transparent;
+    cursor: pointer;
+    color: var(--fsn-sidebar-text, #a0b0c8);
+    white-space: nowrap;
+    overflow: hidden;
+    transition: background 120ms, color 120ms, border-color 120ms;
+    text-align: left;
+    font-size: 13px;
+}
+.fsn-sidebar__item:hover {
+    background: var(--fsn-sidebar-hover-bg, rgba(255,255,255,0.05));
+    color: var(--fsn-text-primary, #e8edf5);
+}
+.fsn-sidebar__item--active {
+    background: var(--fsn-sidebar-active-bg, rgba(77,139,245,0.15));
+    color: var(--fsn-sidebar-active, #4d8bf5);
+    border-left-color: var(--fsn-sidebar-active, #4d8bf5);
+}
+.fsn-sidebar__icon { font-size: 18px; min-width: 20px; text-align: center; flex-shrink: 0; }
+.fsn-sidebar__label { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
+"#;
+
+/// Collapsible sidebar: 48px icons-only, expands to 220px on hover.
+/// Inject `FSN_SIDEBAR_CSS` once at the app root.
+#[component]
+pub fn FsnSidebar(
+    items:     Vec<FsnSidebarItem>,
+    active_id: String,
+    on_select: EventHandler<String>,
+) -> Element {
+    rsx! {
+        nav { class: "fsn-sidebar",
+            for item in &items {
+                button {
+                    class: if item.id == active_id { "fsn-sidebar__item fsn-sidebar__item--active" }
+                           else                    { "fsn-sidebar__item" },
+                    title: "{item.label}",
+                    onclick: {
+                        let id = item.id.clone();
+                        move |_| on_select.call(id.clone())
+                    },
+                    span { class: "fsn-sidebar__icon", "{item.icon}" }
+                    span { class: "fsn-sidebar__label", "{item.label}" }
+                }
+            }
+        }
+    }
+}
+
+// ── SidebarNavBtn ─────────────────────────────────────────────────────────────
+
 /// Sidebar navigation button with icon + label and optional left-border active indicator.
 ///
 /// Set `left_border = true` for conductor-style active left border;