Skip to main content

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

PropTypeDefaultDescription
logostring''Path to the logo image when the sidebar is collapsed.
logoTrademarkstring''Path to the trademark logo when the sidebar is expanded.
collapsedboolfalseWhether the sidebar is collapsed or expanded.
userobject{}The current user information, including name, image, role, and email.
dashboardMenuarray[]Array of menu items for the sidebar. Each menu item contains text, href, icon, and optionally children.
dashboardFooterarray[]Array of footer links displayed at the bottom of the sidebar.
profileMenuarray[]Array of profile menu options, such as "View profile" or "Log out".

SideNavbarItem

A helper component for rendering nested menus inside the SideNavbar.

PropTypeDefaultDescription
menuobject{}A menu item object, containing text, href, icon, and children.
indexnumber0The index of the menu item. Used for rendering nested menus.

SideNavbarContainer

Wraps the sidebar content in a container with an overlay.

PropTypeDefaultDescription
childrennodenullThe 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.