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:

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: <FaHome />,             // icon (use react icons)
    roles: ["Admin"],             // Array of roles allowed to see this item
  },
  {
    category: "Navigation",
    label: "User Management",
    icon: <FaUsers />,
    roles: ["Admin"],
    children: [                   // Optional nested dropdown items
      { 
        label: "All Users", 
        path: "/users", 
        icon: <FaUsers /> 
      },
      { 
        label: "Settings", 
        path: "/settings", 
        icon: <FaCog /> 
      },
    ],
  },
  {
    category: "Help & Support",
    label: "Help Center",
    path: "/help",
    icon: <FaLifeRing />,
    roles: ["Admin", "User"],
  },
  // More items here...
];

Usage of SNBar Component

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

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: <FaHome />,   
    roles: ["Admin"],  
  },
  //add more items...
  ]

  const [maxWidth , setMaxWidth] = useState<boolean>(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 (
    <BrowserRouter>
      <SNBar
        navItems={sideBarItems}
        logo={image1}
        title={title} 
        role={role}
        fontFamily={font}
        backgroundColor={bg}
        color={color}
        categoryColor={categoryColor}
        activeBg={activeBg}
        activeColor={activeColor}
        toggleBtn={toggleBtn}
        setMaxWidth={setMaxWidth}
      />
      <Routes>
        <Route path='/' element={<Dashboard />} />
        <Route path='/dashboard' element={<Dashboard />} /> //your pages/routes...
      </Routes> 
    </BrowserRouter>
  );
}

Usage

Sidebar Configuration Props

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

Contact

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

Md Fardeen