📁 Yew Sidebar

Example	Demo	URL
Basic
X Clone
Youtube Clone

📜 Introduction

Yew Sidebar is a powerful and responsive sidebar component for the Yew framework. It provides a feature-rich sidebar that can be easily integrated into your Yew applications.

🤔 Why is this Component Useful?

This sidebar component offers several benefits to enhance your web application's navigation experience:

1. 🌐 Customization: Tailor the appearance and behavior of the sidebar to suit your application's design.

2. 🚀 Responsive Design: Ensures optimal viewing and navigation across various devices and screen sizes.

3. 💬 Easy Integration: Seamless integration into Yew projects with minimal setup and configuration.

⚙️ Installation

Integrating Yew Sidebar into your Yew project is a straightforward process. Follow these steps:

1. Make sure you have Yew set up in your project. If not, refer to the Yew documentation for installation instructions.

2. Install the library using your preferred package manager:

   $ cargo add yew-sidebar
   

3. Start using the sidebar component to enhance your application's navigation.

🛠️ Usage

Incorporating Yew Sidebar into your application is easy. Follow these steps:

1. Import the sidebar component into your Yew project:

   use yew::prelude::*;
   use yew_sidebar::{Sidebar, SidebarProps, MenuItem};
   
   #[function_component(App)]
   pub fn app() -> Html {
       // Tailwind css utility classes
        let toggle_icon_collapsed = html! {
            <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="white"
                class="m-3 w-6 h-6"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M6 4v16m6-16v16m6-16v16"
                />
            </svg>
        };
        let toggle_icon_expanded = html! {
            <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="white"
                class="m-3 w-6 h-6"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M4 6h16M4 12h16m-7 6h7"
                />
            </svg>
        };
        let sidebar_props = SidebarProps {
            sider_collapsed: true,
            title: "Dashboard",
            menu_items: vec![
                MenuItem {
                    icon: html! {
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    },
                    text: "Overview",
                    link: "#overview",
                    class: "",
                    title: "",
                    submenus: vec![],
                },
                MenuItem {
                    icon: html! {
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 4v16m6-16v16m6-16v16"></path>
                        </svg>
                    },
                    text: "Analytics",
                    link: "#analytics",
                    class: "",
                    title: "",
                    submenus: vec![],
                },
                MenuItem {
                    icon: html! {
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10V3L6 14h7v7l9-11h-7z"></path>
                        </svg>
                    },
                    text: "Reports",
                    link: "#reports",
                    class: "",
                    title: "",
                    submenus: vec![],
                },
            ],
            width_collapsed: "w-20",
            toggle_icon_expanded: toggle_icon_expanded,
            toggle_icon_collapsed: toggle_icon_collapsed,
            width_expanded: "w-72",
            padding_collapsed: "p-2",
            padding_expanded: "p-4",
            display_collapsed: "hidden",
            display_expanded: "flex",
            justify_content: "flex-col",
            align_items: "items-start",
            height: "h-screen",
            background_color: "bg-gray-800",
            font: "text-white",
            icon_color: "yellow",
            button_border_radius: "rounded-md",
            button_background_color: "bg-blue-600",
            button_width: "w-3/4",
            button_height: "h-10",
            ..SidebarProps::default()
        };
   
       html! {
           <Sidebar ..sidebar_props />
       }
   }
   

2. Customize the sidebar appearance and behavior using provided props.

3. Enjoy an enhanced navigation experience with Yew Sidebar.

🔧 Props

Main Props

Layout Props

Style Props

Title Props

Logo Props

Bottom Section Props

Submenus Props

📙 Examples

If you're curious about how to use it with different styling or additional features, you can check out the examples folder for more information.

🤝 Contribution

We welcome contributions from the community to enhance this Sidebar component. Feel free to open issues, submit pull requests, or provide feedback. Let's collaborate to make navigation in Yew even more stylish and functional!

📜 License

Yew Sidebar is licensed under the MIT License, allowing you to use, modify, and distribute it freely. Refer to the LICENSE file for more details.