Sidebar

Adding Sidebar to your project is simple:

Make sure your project is set up with Yew. Follow their Getting Started Guide for setup instructions.
Add the Sidebar component to your dependencies by including it in your Cargo.toml file:
```
cargo add sidebar --features=yew
```
Import the Sidebar component into your Yew component and start using it in your app.

🛠️ Usage

Integrating the Sidebar into your Yew application is straightforward. Follow the steps below:

Import the Sidebar, Menu, MenuItem, Submenu, and Profile components:

use yew::prelude::*;
use sidebar::yew::item::MenuItem;
use sidebar::yew::menu::Menu;
use sidebar::yew::sidebar::Sidebar;
use sidebar::yew::submenu::Submenu;

Use them in your application:

use yew::prelude::*;
use sidebar::yew::item::MenuItem;
use sidebar::yew::menu::Menu;
use sidebar::yew::sidebar::Sidebar;
use sidebar::yew::submenu::Submenu;

#[function_component(App)]
pub fn app() -> Html {
    let selected = use_state(|| String::from("Dashboard"));

    html! {
        <Sidebar
            user_name="Ferris"
            designation="Admin"
            user_img="/assets/logo.webp"
            on_logout={Callback::from(|_| log::info!("Logout!"))}
            logo_img_url="/logo.svg"
            logo_href="/"
        >
            <Menu sub_heading="Main">
                <MenuItem
                    label="Dashboard"
                    href="/dashboard"
                    icon_html={html! {<span>{ "📊" }</span>}}
                    selected={selected.clone()}
                />
                <MenuItem
                    label="Settings"
                    href="/settings"
                    icon_html={html! {<span>{ "⚙️" }</span>}}
                    selected={selected.clone()}
                />
                <Submenu title="More" icon_html={html! {<span>{ "➕" }</span>}}>
                    <MenuItem
                        label="Reports"
                        href="/reports"
                        icon_html={html! {<span>{ "📁" }</span>}}
                        selected={selected.clone()}
                    />
                </Submenu>
            </Menu>
        </Sidebar>
    }
}

🔧 Props

+---------------------------------------------------------------+
|                          Sidebar                              |
|  (style: width: 270px; background: white;)                    |
|                                                               |
|  +---------------------------------------------------------+  |
|  |                     Header (Logo + Toggle)              |  |
|  |   (header_style: display: flex; align-items: center;)   |  |
|  |                                                         |  |
|  |   [Logo]                             [Toggle ◀ or ▶]    |  |
|  +---------------------------------------------------------+  |
|                                                               |
|  +---------------------------------------------------------+  |
|  |                        Menu                             |  |
|  |  (sub_heading shown if not collapsed)                   |  |
|  |                                                         |  |
|  |   +-------------------+   +-------------------+         |  |
|  |   |    MenuItem       |   |    MenuItem       |         |  |
|  |   |  [Icon] Label     |   |  [Icon] Label     |         |  |
|  |   +-------------------+   +-------------------+         |  |
|  |                                                         |  |
|  |   +-------------------+                                 |  |
|  |   |     Submenu       |                                 |  |
|  |   |  [Icon] Label  ▼  |(click to expand ▼ or collapse ▲)|  |
|  |   +-------------------+                                 |  |
|  |       |                                                 |  |
|  |       |--> +-------------------+                        |  |
|  |            |    MenuItem       |                        |  |
|  |            |  [Icon] Label     |                        |  |
|  |            +-------------------+                        |  |
|  +---------------------------------------------------------+  |
|                                                               |
|  +---------------------------------------------------------+  |
|  |                       Profile                           |  |
|  |  (shown only if not collapsed)                          |  |
|  |                                                         |  |
|  |  [Avatar] Username        Designation          [-]      |  |
|  +---------------------------------------------------------+  |
+---------------------------------------------------------------+

Property	Type	Description	Default
`children`	`ChildrenWithProps<Menu>`	The `Menu` components rendered in sidebar	`[]`
`show_profile`	`bool`	Whether to show the profile section	`true`
`user_name`	`&'static str`	User's name displayed in profile	`""`
`designation`	`&'static str`	User role/designation	`""`
`user_img`	`&'static str`	Path to user image	`""`
`on_logout`	`Callback<()>`	Callback invoked when logout is clicked	`No-op`
`style`	`&'static str`	Inline CSS for sidebar container	`"width: 270px; background: white;"`
`class`	`&'static str`	CSS class for sidebar container	`""`
`header_style`	`&'static str`	CSS for the sidebar header section	`"display: flex; ..."`
`header_class`	`&'static str`	Class for the header div	`""`
`logo_img_url`	`&'static str`	Logo image path	`""`
`logo_href`	`&'static str`	Logo link target	`""`

Property	Type	Description	Default
`sub_heading`	`&'static str`	Optional section heading	`""`
`children`	`Children`	Children `MenuItem` or `Submenu`	`[]`
`style`	`&'static str`	Inline styles	`"padding: 1rem;"`
`class`	`&'static str`	CSS class	`""`

`MenuItem` Component Props

Property	Type	Description	Default
`label`	`&'static str`	Menu item label	`""`
`href`	`&'static str`	Navigation URL	`""`
`icon_html`	`Html`	Icon HTML for the item	`html!{}`
`badge`	`Option<&'static str>`	Optional badge (e.g., "3", "new")	`None`
`selected`	`UseStateHandle<String>`	Currently selected item state	Required
`anchor_style`	`&'static str`	Styles for anchor wrapper	`"text-decoration: none;"`
`anchor_class`	`&'static str`	Class for anchor wrapper	`""`
`item_style`	`&'static str`	Styles when sidebar is expanded	`"display: flex; ..."`
`item_class`	`&'static str`	Class for item container	`""`
`collapsed_style`	`&'static str`	Styles for collapsed sidebar	`"display: flex; ..."`
`collapsed_label_style`	`&'static str`	Styles for label text in collapsed mode	`"font-size: 10px; text-align: center;"`
`selected_style`	`&'static str`	Styles for selected item	`"background-color: #1e293b; color: white;"`
`badge_style`	`&'static str`	Style for badge	`"background: red; ..."`

`Submenu` Component Props

Property	Type	Description	Default
`title`	`&'static str`	Submenu title	`""`
`icon_html`	`Html`	Optional icon	`html!{}`
`children`	`ChildrenWithProps<MenuItem>`	Menu items to be shown when expanded	`[]`
`class`	`&'static str`	CSS class	`""`
`style`	`&'static str`	Inline style	`"padding: 10px; cursor: pointer; ..."`

`Profile` Component Props

Property	Type	Description	Default
`user_name`	`&'static str`	Name of the user	`""`
`designation`	`&'static str`	User's designation/role	`""`
`user_img`	`&'static str`	Profile image path	`""`
`is_collapsed`	`bool`	Whether sidebar is collapsed	`false`
`on_logout`	`Callback<()>`	Callback triggered on logout click	`No-op`
`style`	`&'static str`	Styling for the profile container	`"display: flex; align-items: center; ..."`
`class`	`&'static str`	Class for the container	`""`

💡 Notes

Sidebar handles responsive behavior based on viewport width (< 768px = collapsed).
MenuItem auto-detects and highlights current item using the selected state and URL query param selected.
You must pass a shared UseStateHandle<String> to selected in every MenuItem to track active selection.
Submenu provides collapsible behavior to group nested items.
Profile is automatically hidden in collapsed mode.
Customize with style and class props for full design flexibility.
ContextProvider enables state sharing (collapsed/expanded) across components via SidebarContext.

Usage

CLI Usage

You can import Sidebar directly into your project to customize and modify it using the opensass cli:

os add sidebar yew

Open SASS Components Kit

Y Sidebar Yew Usage