react-dynamic-snbar

SNBar

Demo

SNBar Items Structure

The sidebar navigation items are defined as an array of objects, each representing a menu item or a category with optional nested children. Each object has the following structure:

``tsx
const sideBarItems = [
{
category: "Navigation", // Category under which the item is grouped
label: "Dashboard", // Text label for the navigation item
path: "/dashboard", // Route path (optional if there are children)
icon: , // icon (use react icons)
roles: ["Admin"], // Array of roles allowed to see this item
},
{
category: "Navigation",
label: "User Management",
icon: ,
roles: ["Admin"],
children: [ // Optional nested dropdown items
{
label: "All Users",
path: "/users",
icon:
},
{
label: "Settings",
path: "/settings",
icon:
},
],
},
{
category: "Help & Support",
label: "Help Center",
path: "/help",
icon: ,
roles: ["Admin", "User"],
},
// More items here...
];
`


$3

Use the SNBar sidebar component inside a React Router to enable routing.

`tsx
import { BrowserRouter , Routes , Route } from "react-router-dom";
import { Sidebar as SNBar } from "react-dynamic-snbar";
import 'react-dynamic-snbar/dist/index.css';
import image1 from "/image1.png";

function App() {
const sideBarItems = [
{
category: "Navigation",
label: "Dashboard",
path: "/dashboard",
icon: ,
roles: ["Admin"],
},
//add more items...
]

const [maxWidth , setMaxWidth] = useState(true) //Important
console.log(maxWidth);

//All these values can be dynamic
const title = "SNBar";
const role= "Admin";
const font= "cursive";
const bg = "white";
const color = "black";
const categoryColor = "gray";
const activeBg = "black";
const activeColor = "white";
const toggleBtn = true;


return (

navItems={sideBarItems}
logo={image1}
title={title}
role={role}
fontFamily={font}
backgroundColor={bg}
color={color}
categoryColor={categoryColor}
activeBg={activeBg}
activeColor={activeColor}
toggleBtn={toggleBtn}
setMaxWidth={setMaxWidth}
/>

} />
} /> //your pages/routes...


);
}
`

Usage

$3

| Prop | Type | Description |
|------------------|-----------------|---------------------------------------------|
| navItems | NavItem[] | Array of navigation items with labels, paths, icons, roles, and optional children dropdowns |
| logo | string | URL or import path of the logo image |
| title | string | Sidebar title text |
| role | string | Current user role (e.g., "Admin", "User") |
| setMaxWidth | boolean(opt.) | Indicates whether the sidebar is open (true) or closed (false). Useful for adjusting the width of UI components accordingly. |
| fontFamily | string (opt.) | Font family for sidebar text |
| backgroundColor| string (opt.) | Background color of the sidebar |
| color | string (opt.) | Text color |
| categoryColor | string (opt.) | Color for category headings |
| activeBg | string (opt.) | Background color for active nav item |
| activeColor | string (opt.) | Text color for active nav item |
| toggleBtn | boolean (opt.)| To hide open/close Sidebar toggleBTN {not for mobile screens.} |


---> Note1 :
> If you face difficulty managing the width of UI components when the sidebar opens or closes (especially due to z-index issues), use the setMaxWidth prop. This prop returns true when the sidebar is open and false when it's closed.
> Based on this state, you can dynamically adjust the size of the UI or its components.
> Best Practice: Wrap each page or its components inside a single parent container and control the container’s width based on the setMaxWidth state.
> If you're still facing difficulty adjusting the UI, you can use the toggleBtn prop.
Set toggleBtn to false, and the sidebar will remain fixed (i.e., users won’t be able to close it).
This can help maintain consistent layout and avoid dynamic width changes.

---> Note2 :
> This component is designed specifically for React applications and does not support Next.js out of the box.
> It provides easy role-based user access for routing through the role` prop, but it does not include built-in protected route functionality. You will need to implement protected routes yourself in your code to control access to certain pages.

---

$3

If you have any questions or want to connect, feel free to reach out to me:

Md Fardeen