Sidebar Navigation Component Guide body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; } h1, h2 { color: #333; } pre { background-color: #f8f9fa; padding: 10px; border-radius: 5px; border: 1px solid #ccc; white-space: pre-wrap; word-wrap: break-word; } .code-example { margin-top: 20px; padding: 20px; background-color: #f8f9fa; border: 1px solid #ccc; border-radius: 5px; }

Sidebar Navigation Component Guide

Overview

The Sidebar component is a customizable, responsive navigation sidebar for React applications. It features a tabbed interface, nested menu items, and seamless integration with Bootstrap for responsive layouts. It is ideal for dashboards, admin panels, or any application requiring hierarchical navigation.

Installation

Prerequisites

• React 16.8 or later (for hooks support)
• Bootstrap 5 (bootstrap/dist/css/bootstrap.min.css) for styling
• A custom CSS file (styles.css) for sidebar-specific styles

Setup

1. Ensure Sidebar.jsx is in your project’s src directory.

2. Copy the provided styles.css to your project’s src directory.

3. Install Bootstrap via npm:

   npm install bootstrap

4. Alternatively, add it via CDN in your index.html:

   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Import in Your Component

import Sidebar from './Sidebar';
import './styles.css';
import 'bootstrap/dist/css/bootstrap.min.css';

Usage

The Sidebar component is typically used alongside a main content area. Here’s an example:

import React, { useState } from 'react';
import Sidebar from './Sidebar';
import './styles.css';
import 'bootstrap/dist/css/bootstrap.min.css';

const tabs = [
  {
    key: 'home',
    label: 'Home',
    menuItems: [
      { key: 'dashboard', text: 'Dashboard', onClick: () => console.log('Dashboard clicked') },
      { key: 'settings', text: 'Settings', onClick: () => console.log('Settings clicked') },
      {
        key: 'help',
        text: 'Help',
        subItems: [
          { key: 'faq', text: 'FAQ', onClick: () => console.log('FAQ clicked') },
          { key: 'contact', text: 'Contact Us', onClick: () => console.log('Contact clicked') },
        ],
      },
    ],
  },
  {
    key: 'tools',
    label: 'Tools',
    menuItems: [
      { key: 'analytics', text: 'Analytics', onClick: () => console.log('Analytics clicked') },
      // Additional menu items...
    ],
  },
];

const handleNavigate = (key) => {
  console.log(\`Navigating to: \${key}\`);
};

function App() {
  const [activeKey, setActiveKey] = useState('dashboard');
  return (
    <div className="d-flex flex-column flex-md-row min-vh-100">
      <Sidebar
        tabs={tabs}
        activeKey={activeKey}
        setActiveKey={setActiveKey}
        logoSrc="https://placehold.co/65/png"
        logoText="MyApp"
        onNavigate={handleNavigate}
        glow={false}
      />
      <div className="main-content flex-grow-1 p-3 p-md-4">
        {/* Main content goes here */}
      </div>
    </div>
  );
}

export default App;

Props

Prop

Type

Description

Default

tabs

Array

Array of tab objects with `key`, `label`, and `menuItems`.

[]

activeKey

String

The key of the currently active menu item.

''

setActiveKey

Function

Function to update the `activeKey` state.

() => {}

logoSrc

String

URL or path to the logo image.

''

logoText

String

Text displayed next to the logo.

''

onNavigate

Function

Callback triggered when a menu item is clicked, receives the key.

() => {}

glow

Boolean

Enables/disables the glow animation on menu item icons/letters.

false

Tab Structure

Each tab object in the tabs array follows this structure:

{
  key: String,        // Unique identifier for the tab
  label: String,      // Display text for the tab
  menuItems: Array    // Array of menu items
}

Each menu item in menuItems follows this structure:

{
  key: String,        // Unique identifier for the menu item
  text: String,       // Display text for the menu item
  onClick: Function,  // Callback function for click events
  subItems: Array,    // (Optional) Array of sub-menu items (same structure)
  icon: String        // (Optional) Icon class (e.g., 'eye' for Bootstrap icons)
}

Styling

The sidebar’s appearance is controlled by styles.css, which defines:

• A dark gradient background (#1F2A44 → #3A4A6E)
• Gold accents (#D4A017) for active states and borders
• Responsive behavior (collapses to 80px at max-width: 1000px)
• Animations: glow, ripple, and slide-in effects

Responsive Behavior

Desktop (≥1000px)

• Sidebar width is 360px, with visible text and icons.
• Main content has a margin-left of 360px.

Mobile (<1000px)

• Sidebar collapses to 80px, showing only icons.
• Main content adjusts margin-left to 80px.

Bootstrap Integration

<div className="d-flex flex-column flex-md-row">
  <!-- Sidebar + Main Content -->
</div>

Troubleshooting

• Styles not applied? Verify that styles.css is imported after Bootstrap.
• Responsive issues? Ensure that Bootstrap’s CSS is loaded before your custom CSS to avoid specificity conflicts.
• Glow animation lag? Set glow={false} on low-performance devices to disable animations.

License

The Sidebar component is licensed under the MIT License. Feel free to use, modify, and distribute it with attribution.

Developer Information

Maintainer / Developer
Name: Zohab Ul Hassan
Email: [email protected]

For source code access, feature requests, or contributions, please contact the development team or open an issue on GitHub.