@wornpage/sidebar — web component demo

Standalone web component

This page loads <worn-sidebar> from a single JavaScript file. No bundler, no framework, no npm install.

🔧 Control panel

Events appear here…

💻 How to use

<script type="module">
  import '@wornpage/sidebar';  // or load dist/worn-sidebar.js

  const sb = document.querySelector('worn-sidebar');
  sb.items = [{ id: 'home', href: '/', label: 'Home', icon: '<path d="…"/>' }];
  sb.addEventListener('worn-nav', e => {
    console.log('Navigate to', e.detail.href);
  });
</script>

📦 Bundle size

110 KB (31 KB gzipped) — self-contained, zero dependencies. Includes the Svelte runtime compiled into the output.