Overview

The SideBar component provides a vertical navigation menu for your application. It is designed to be flexible, allowing you to pass different sets of links and group them visually.

Usage

To use the SideBar component in your Next.js application, follow these steps:

1. Add the SideBar Component

First, import the SideBar component into your page or layout file:

npm i @anakin-gbit/side-bar

2. Define the Links

Create an array of link objects. Each link object should include the href, label, and optionally a group to categorize the links.

The id is used for mapping over the array and must be unique.

const links = [
  { id: '1', href: '/docs', label: '← Back to index' },
  { id: '2', href: '#', label: 'Profile', group: 'User' },
  { id: '3', href: '#', label: 'Settings', group: 'User' },
]

3. Render the SideBar Component

Include the SideBar component in your layout or page, passing the links array as a prop:

Include a margin for your page content so that it is not hidden beneath the side bar:

const MyPage = () => {
  return (
    <div style={{ marginLeft: '250px' }}>
      <SideBar links={links} />
      {/* Page content goes here */}
    </div>
  );
};

The SideBar component allows you to create a flexible navigation menu with grouped links. Ensure proper layout adjustments to prevent content overlap. For further customization, modify the component and styles as needed.