SideNavbar
SideNavbar
The SideNavbar
component provides a responsive and collapsible sidebar navigation menu. It includes support for user profiles, menus, and submenus, making it ideal for dashboard-like layouts.
Usage
import SideNavbar from './SideNavbar';
<SideNavbar
logo="path/to/logo.png"
logoTrademark="path/to/logo_trademark.png"
collapsed={false}
user={{
name: 'John Doe',
image: 'path/to/avatar.png',
role: 'Admin',
email: '[email protected]',
}}
dashboardMenu={[
{ text: 'Dashboard', href: '/dashboard', icon: 'dashboard-icon' },
{ text: 'Reports', href: '/reports', icon: 'reports-icon', children: [{ text: 'Daily Report', href: '/reports/daily' }] },
]}
dashboardFooter={[
{ text: 'Settings', href: '/settings', icon: 'settings-icon' },
{ text: 'Help', href: '/help', icon: 'help-icon' },
]}
profileMenu={[
{ text: 'Profile', href: '/profile' },
{ text: 'Log out', href: '/logout', onClick: handleLogout },
]}
/>
Props
SideNavbar
Prop | Type | Default | Description |
---|---|---|---|
logo | string | '' | Path to the logo image when the sidebar is collapsed. |
logoTrademark | string | '' | Path to the trademark logo when the sidebar is expanded. |
collapsed | bool | false | Whether the sidebar is collapsed or expanded. |
user | object | {} | The current user information, including name , image , role , and email . |
dashboardMenu | array | [] | Array of menu items for the sidebar. Each menu item contains text , href , icon , and optionally children . |
dashboardFooter | array | [] | Array of footer links displayed at the bottom of the sidebar. |
profileMenu | array | [] | Array of profile menu options, such as "View profile" or "Log out". |
SideNavbarItem
A helper component for rendering nested menus inside the SideNavbar
.
Prop | Type | Default | Description |
---|---|---|---|
menu | object | {} | A menu item object, containing text , href , icon , and children . |
index | number | 0 | The index of the menu item. Used for rendering nested menus. |
SideNavbarContainer
Wraps the sidebar content in a container with an overlay.
Prop | Type | Default | Description |
---|---|---|---|
children | node | null | The content to be rendered inside the sidebar container. |
Example
import { Outlet } from "react-router-dom";
import { PageHeader, SideNavbar, SideNavbarContainer } from "../blendx-ui/src";
import { DashboardMenu, DashboardFooter, ProfileMenu } from "../routes/DashboardMenu";
const DashboardIndex = () => {
const user = {
name: 'John Doe',
email: '[email protected]',
role: 'Admin',
image: 'https://i.postimg.cc/7Z8vQ0Y9/Rectangle-2.png'
}
return (
<SideNavbarContainer>
<SideNavbar
logo={'https://i.postimg.cc/tTr1MbMr/logo-1-1.png'}
logoTrademark={'https://i.postimg.cc/SNRLqTL2/logo-1.png'}
collapsed={false}
user={user}
dashboardMenu={DashboardMenu}
dashboardFooter={DashboardFooter}
profileMenu={ProfileMenu}
/>
<div className="content">
<PageHeader title="Dashboard" streakCount={3} mailCount={5} notificationCount={10} />
<Outlet />
</div>
</SideNavbarContainer>
)
}
export default DashboardIndex;
Customization
- The component supports custom role badges using the
getRoleVariant
function, which assigns color badges for roles like "admin", "instructor", etc. - The profile menu and dashboard/footer menu items can be customized with additional actions such as logging out or navigating to different sections.