Sidebar Component Showcase

Introduction

The Sidebar component can be customized to fit various needs. Below are examples showcasing different styles and configurations.

Usage Examples

Basic Sidebar


import { useState } from 'react';
import Sidebar from '../../components/Sidebar'; 

const Layout: React.FC = () => {
  const [isSidebarOpen, setSidebarOpen] = useState(true);

  return (
    <div className="relative">
      <Sidebar isOpen={isSidebarOpen} onClose={() => setSidebarOpen(false)} />
      <button
        className="fixed top-4 left-4 z-50 p-2 text-xl bg-gray-800 text-white rounded-full hover:bg-gray-700"
        onClick={() => setSidebarOpen(!isSidebarOpen)}
      >
        {isSidebarOpen ? '&times;' : '☰'}
      </button>
      <main className="ml-60 p-8">Content goes here</main>
    </div>
  );
};

export default Layout;

Collapsible Sidebar


import { useState } from 'react';
import Sidebar from '../../components/Sidebar'; 

const Layout: React.FC = () => {
  const [isSidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div className="relative">
      <Sidebar isOpen={isSidebarOpen} onClose={() => setSidebarOpen(false)} />
      <button
        className="fixed top-4 left-4 z-50 p-2 text-xl bg-gray-800 text-white rounded-full hover:bg-gray-700"
        onClick={() => setSidebarOpen(!isSidebarOpen)}
      >
        {isSidebarOpen ? '&times;' : '☰'}
      </button>
      <main className="p-8">Content goes here</main>
    </div>
  );
};

export default Layout;

Sidebar with Icons


import { useState } from 'react';
import Sidebar from '../../components/Sidebar'; 

const Layout: React.FC = () => {
  const [isSidebarOpen, setSidebarOpen] = useState(true);

  return (
    <div className="relative">
      <Sidebar isOpen={isSidebarOpen} onClose={() => setSidebarOpen(false)}>
        <ul>
          <li><FaHome /> Home</li>
          <li><FaUser /> Profile</li>
          <li><FaCog /> Settings</li>
        </ul>
      </Sidebar>
      <button
        className="fixed top-4 left-4 z-50 p-2 text-xl bg-gray-800 text-white rounded-full hover:bg-gray-700"
        onClick={() => setSidebarOpen(!isSidebarOpen)}
      >
        {isSidebarOpen ? '&times;' : '☰'}
      </button>
      <main className="ml-60 p-8">Content goes here</main>
    </div>
  );
};

export default Layout;

Sidebar with Animation


import { useState } from 'react';
import Sidebar from '../../components/Sidebar'; 
import { motion } from 'framer-motion';

const Layout: React.FC = () => {
  const [isSidebarOpen, setSidebarOpen] = useState(true);

  return (
    <div className="relative">
      <Sidebar isOpen={isSidebarOpen} onClose={() => setSidebarOpen(false)}>
        <motion.ul
          initial={{ opacity: 0, x: -100 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5 }}
        >
          <li>Animated Item 1</li>
          <li>Animated Item 2</li>
          <li>Animated Item 3</li>
        </motion.ul>
      </Sidebar>
      <button
        className="fixed top-4 left-4 z-50 p-2 text-xl bg-gray-800 text-white rounded-full hover:bg-gray-700"
        onClick={() => setSidebarOpen(!isSidebarOpen)}
      >
        {isSidebarOpen ? '&times;' : '☰'}
      </button>
      <main className="ml-60 p-8">Content goes here</main>
    </div>
  );
};

export default Layout;