Sidebar Layouts

<div className="grid grid-cols-1 lg:grid-cols-[250px_1fr] min-h-screen">
  {/* Sidebar */}
  <div className="bg-primary text-white">
    <nav className="p-4">
      <ul className="space-y-2">
        <li><a href="#" className="block p-2 hover:bg-primary">Home</a></li>
        <li><a href="#" className="block p-2 hover:bg-primary">About</a></li>
      </ul>
    </nav>
  </div>
  
  {/* Main Content */}
  <main className="p-6">
    <AnchorHeading as="h1">Page Content</AnchorHeading>
  </main>
</div>

const [isOpen, setIsOpen] = useState(true)

<div className="grid grid-cols-[var(--sidebar-width)_1fr]"
     style={{ '--sidebar-width': isOpen ? '250px' : '60px' }}>
  
  <div className="bg-primary transition-all duration-300">
    <button onClick={() => setIsOpen(!isOpen)}>
      <Menu className="w-5 h-5" />
    </button>
    
    <nav>
      {menuItems.map(item => (
        <div key={item.label} className="flex items-center gap-3 p-2">
          <item.icon className="w-5 h-5" />
          {isOpen && <span>{item.label}</span>}
        </div>
      ))}
    </nav>
  </div>
  
  <main className="p-6">Content</main>
</div>