Collapsible Sidebar (Full ↔ Mini)

Toggle between full sidebar with labels and mini icon-only mode

Collapsible Sidebar Demo

This sidebar can toggle between two modes:

Full Mode

  • Shows icons and labels
  • Section titles visible
  • Brand name displayed
  • Takes up standard width (~250px)

Mini Mode

  • Shows only icons
  • Labels hidden but accessible
  • Compact width (~60px)
  • More space for content

Try it! Click the toggle button in the sidebar header to switch between full and mini modes. The transition is smooth and maintains the active state.

Implementation Tips

  • Save the collapsed state in localStorage to remember user preference
  • Add tooltips in mini mode for better UX
  • Ensure all icons are clear and recognizable
  • Consider auto-collapse on smaller screens
  • Maintain keyboard navigation in both modes
Back to Docs
`; navigator.clipboard.writeText(code).then(() => { // Show toast if available if (window.showToast) { window.showToast('Code copied to clipboard!', { variant: 'success' }); } else { // Fallback const button = event.target.closest('button'); const originalText = button.innerHTML; button.innerHTML = ' Copied!'; setTimeout(() => { button.innerHTML = originalText; }, 2000); } }); }