react-dynamic-snbar/README.md

Responsive React sidebar with role-based navigation support and easy customization.

## SNBar

[**Demo**](https://snbar.netlify.app/)

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

```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: <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**](https://www.linkedin.com/in/fardeenxmohammed/)