Collapsible Sidebar Component for React, Astro, and Svelte

A clean, responsive, and configurable <Sidebar /> component for your existing React, Astro, or Svelte projects. Easily integrate it into your codebase by copy-pasting the component, or bootstrap a new project with the help of this package with the <Sidebar /> component already integrated. The component can be configured in the following way:

// Import the relevant component
import { Sidebar } from '@components/Sidebar.tsx'
import Sidebar from '@components/Sidebar.svelte'
import Sidebar from '@components/Sidebar.astro'

// Call the component with the following props
<Sidebar
    logo="path/to/logo.png"
    searchPage="/search"
    items={[{
        label: 'Dashboard',
        link: '/',
        icon: 'home'
    }, { ... }]}
    collapseLabel="Collapse"
    showThemeToggle={true}
/>

The package comes with the following features:

• Multiple framework support: The package includes code for the <Sidebar /> component written for React, Astro, and Svelte, meaning you’ll get three different implementation with this product, so you can use it with different tech stacks.
• Configurable: Pass your menu items to the <Sidebar /> component to generate your menus. The component can be used as-is, with easy configuration through props.
• Easy to style: Styles can also be configured via Sass variables through the stylesheet provided with the component. SVG icons are included.
• Responsive: The component is fully responsive that adapts perfectly for all device resolutions like mobiles, tablets and desktops.
  • Light & dark themes: Inside the stylesheet, configurations for dark/light themes are also included.
• Cross-browser support: The component was tested on major browsers (Chrome, Firefox, Edge) to ensure cross-browser compatibility.
• No third-party dependency: The component is written in React, Astro, and Svelte without the use of extra external libraries, making it performant and lightweight compared to other solutions. There are no dependencies on other third-party packages.