Sidebar Component

The Gravity Sidebar component is a customizable sidebar navigation menu for React applications. It includes expandable and collapsible states, supports dynamic icons, and is fully configurable through props.

---

Usage

Import the Sidebar component into your React application and configure it by passing the necessary props such as options, footerOptions, and sidebarButton.

``jsx
import React from "react";
import {Sidebar} from "gravity_sidebar"

const options = [
{ name: "Home", icon: "fa fa-home" },
{ name: "Events", icon: "fa fa-envelope-open" },
{ name: "Communities", icon: "fa fa-users" },
];

const footerOptions = [
{ icon: "fa fa-user" },
{ icon: "fa fa-cog" },
{ icon: "fa fa-sign-out" },
];

export default function App() {
return (
options={options}
footerOptions={footerOptions}
sidebarButton="fa fa-bars"
/>
);
}
`

---

Props

$3

- Type: Array<{ name: string, icon: string }>
- Description: Defines the list of items to display in the sidebar menu.
- Example:

`jsx
const options = [
{ name: "Home", icon: "fa fa-home" },
{ name: "Events", icon: "fa fa-envelope-open" },
{ name: "Communities", icon: "fa fa-users" },
];
`

$3

- Type: Array<{ icon: string }>
- Description: Defines the list of icons to display in the footer section of the sidebar. Only the first three icons are displayed.
- Example:

`jsx
const footerOptions = [
{ icon: "fa fa-user" },
{ icon: "fa fa-cog" },
{ icon: "fa fa-sign-out" },
];
`

$3

- Type: string
- Description: Specifies the icon class for the sidebar toggle button.
- Example:

`jsx
const sidebarButton = "fa fa-bars";
`

---

CSS Classes

Ensure the following CSS classes are defined in your style.css file to style the component properly:

$3

- sidebar-container-collapsed: Styles for the collapsed sidebar state.
- sidebar-container-expanded: Styles for the expanded sidebar state.

$3

- sidebar-header: Styles for the header section.
- header-icon: Styles for the toggle button.

$3

- sidebar-content: Styles for the sidebar list container.
- sidebar-item: Styles for each item in the list.
- active-sidebar-item: Styles for the active item in the list.
- inactive-sidebar-item: Styles for inactive items.
- sidebar-list-icon: Styles for the icons in the list items.

$3

- sidebar-footer: Styles for the footer container.
- footer-icon: Styles for the icons in the footer.

$3

- no-sidebar: Styles for elements visible only in the expanded state.

---

Example

Below is a complete example of how to integrate the Sidebar component into an application:

$3

`jsx
import React from "react";
import { Sidebar } from "gravity-sidebar";

const options = [
{ name: "Home", icon: "fa fa-home" },
{ name: "Events", icon: "fa fa-envelope-open" },
{ name: "Communities", icon: "fa fa-users" },
];

const footerOptions = [
{ icon: "fa fa-user" },
{ icon: "fa fa-cog" },
{ icon: "fa fa-sign-out" },
];

function App() {
return (

options={options}
footerOptions={footerOptions}
sidebarButton="fa fa-bars"
/>

);
}

export default App;
`

$3

- The sidebar will display the options list as menu items.
- The footer will show the first three icons from footerOptions.
- Clicking the toggle button (defined by sidebarButton`) will expand or collapse the sidebar.