Simple Sidebar

Simple Sidebar is a customizable and reusable React component that provides a responsive sidebar for your applications. It supports icons, logout functionality, and an expandable/collapsible design, making it ideal for dashboards, admin panels, or navigation menus.

Features

• 🧩 Customizable: Supports dynamic background colors, fonts, and hover/expanded states.
• 🎨 Icon Flexibility: Use React components (like react-icons) or image URLs as icons.
• 🖱️ Interactive: Includes hover effects and a configurable "Logout" button.
• 📐 Responsive Design: Collapsible by default with smooth transitions.
• ⚙️ Expandable: Use the isExpanded prop to keep the sidebar always expanded.

Installation

Install the package via npm:

npm install simple-sidebar

or via yarn:

yarn add simple-sidebar

Basic Usage

Here’s how you can quickly integrate the SimpleSidebar into your React app:

import React from "react";
import Sidebar from "simple-sidebar";
import { FaHome, FaCog } from "react-icons/fa";

const App = () => {
  const sidebarItems = [
    {
      text: "Home",
      icon: <FaHome />, // React Icon
      onClick: () => console.log("Home clicked"),
    },
    {
      text: "Settings",
      icon: <FaCog />, // React Icon
      onClick: () => console.log("Settings clicked"),
    },
  ];

  return (
    <Sidebar
      sidebarItems={sidebarItems}
      hasLogout={true}
      onLogout={() => console.log("Logged out")}
      backgroundColor="#1f2937"
      font="Arial, sans-serif"
      isExpanded={false} // Sidebar is collapsible by default
    />
  );
};

export default App;

Props

The component accepts the following props for customization:

| Prop Name | Type | Default | Description | | ----------------- | ---------- | --------------------------------- | ------------------------------------------------------------------------------------------------ | | sidebarItems | Array | [] | List of items to display in the sidebar. Each item should include text, icon, and onClick. | | hasLogout | Boolean | true | Whether to display the logout button. | | onLogout | Function | () => console.log("Logged out") | Callback function triggered when the logout button is clicked. | | backgroundColor | String | "#ffffff" | The background color of the sidebar. | | font | String | "Arial, sans-serif" | Font family for sidebar text. | | isExpanded | Boolean | false | If true, the sidebar will remain in the expanded state without hovering. |

Styling

Default Styles

The sidebar comes with default styles that can be overridden using CSS. These include:

• Sidebar background: #1f2937
• Collapsed width: 80px
• Expanded width: 200px

You can include your own styles if needed or use the backgroundColor and font props for quick customization.

Example Sidebar Items

The sidebarItems array defines the menu items to display in the sidebar. Each item is an object with the following properties:

| Key | Type | Description | | --------- | ------------ | ---------------------------------------------- | | text | String | The label text for the sidebar item. | | icon | React.Node | The icon to display (React Icon or image URL). | | onClick | Function | Function to execute when the item is clicked. |

Example:

const sidebarItems = [
  {
    text: "Dashboard",
    icon: <FaHome />, // React Icon
    onClick: () => console.log("Go to Dashboard"),
  },
  {
    text: "Profile",
    icon: <img src="https://example.com/profile-icon.png" alt="Profile" />, // Image
    onClick: () => console.log("Go to Profile"),
  },
];

Advanced Usage

Always-Expanded Sidebar

If you want the sidebar to always remain expanded, set isExpanded to true:

<Sidebar
  sidebarItems={sidebarItems}
  hasLogout={true}
  onLogout={() => console.log("Logged out")}
  backgroundColor="#282c34"
  font="Roboto, sans-serif"
  isExpanded={true}
/>

Custom Logout Button

If you want to customize the logout behavior:

<Sidebar
  sidebarItems={sidebarItems}
  hasLogout={true}
  onLogout={() => {
    console.log("Custom logout logic");
    // Add your logout logic here
  }}
/>

Complete Example

Here’s a complete example that demonstrates all features:

import React from "react";
import Sidebar from "simple-sidebar";
import { FaHome, FaCog, FaUser } from "react-icons/fa";

const App = () => {
  const sidebarItems = [
    {
      text: "Home",
      icon: <FaHome />,
      onClick: () => alert("Navigating to Home"),
    },
    {
      text: "Profile",
      icon: <FaUser />,
      onClick: () => alert("Navigating to Profile"),
    },
    {
      text: "Settings",
      icon: <FaCog />,
      onClick: () => alert("Navigating to Settings"),
    },
  ];

  return (
    <Sidebar
      sidebarItems={sidebarItems}
      hasLogout={true}
      onLogout={() => alert("Logged out!")}
      backgroundColor="#1f2937"
      font="Tahoma, sans-serif"
      isExpanded={false}
    />
  );
};

export default App;

Development

Running Locally

To run this package locally for development:

1. Clone the repository:

   git clone https://github.com/msweat254/simple-sidebar.git
   cd simple-sidebar

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

Issues and Feedback

If you encounter any issues or have feedback, feel free to open an issue.

License

This project is licensed under the ISC License. See the LICENSE file for details.