Can Sidebar support more than two levels?

[eukitout-qq]

Can Sidebar support more than two levels?

[djowvani]

You mean more nested/collapsible menu options, or something more like having access to another sidebar/drawer inside the original Sidebar?

[eric-net]

// Sidebar.tsx
import React, { useState } from 'react';
import { Sidebar, SidebarItem, SidebarHeader } from '@shadcn/ui';

const SubMenu: React.FC<{ title: string; items: string[] }> = ({ title, items }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <div onClick={() => setIsOpen(!isOpen)} style={{ cursor: 'pointer' }}>
        {title}
      </div>
      {isOpen && (
        <div style={{ paddingLeft: '20px' }}>
          {items.map((item) => (
            <SidebarItem key={item}>
              <a href={`#${item}`}>{item}</a>
            </SidebarItem>
          ))}
        </div>
      )}
    </div>
  );
};

const MySidebar: React.FC = () => {
  return (
    <Sidebar>
      <SidebarHeader>
        <h2>Mi Sidebar</h2>
      </SidebarHeader>
      <SidebarItem>
        <a href="#item1">Item 1</a>
      </SidebarItem>
      <SubMenu title="Menú 1" items={['Subitem 1', 'Subitem 2', 'Subitem 3']} />
      <SubMenu title="Menú 2" items={['Subitem A', 'Subitem B']} />
      <SidebarItem>
        <a href="#item3">Item 3</a>
      </SidebarItem>
      {/* Agrega más items según sea necesario */}
    </Sidebar>
  );
};

export default MySidebar;

// App.tsx
import React from 'react';
import MySidebar from './Sidebar';

const App: React.FC = () => {
  return (
    <div style={{ display: 'flex' }}>
      <MySidebar />
      <main style={{ padding: '20px', flexGrow: 1 }}>
        <h1>Contenido Principal</h1>
        {/* Agrega más contenido aquí */}
      </main>
    </div>
  );
};

export default App;