Menu

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-menu> is the SAME shared custom element React and Vue consume — here in its
     native form. Theming comes only from the --aha-* tokens in tokens.css. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/icons.js';      // registers <aha-icon> for leading + caret glyphs
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-menu.js';   // registers <aha-menu>
</script>

<!-- mode="vertical" (default) | "inline" (sidebar tree) | "horizontal" (top nav bar) -->
<aha-menu id="nav" value="polls"
  items='[
    {"type":"group","label":"Workspace","children":[
      {"key":"polls","label":"Polls","icon":"system-chart-bar"},
      {"key":"quizzes","label":"Quizzes","icon":"system-question"}
    ]},
    {"key":"library","label":"Content library","icon":"system-folder","children":[
      {"key":"templates","label":"Templates"},
      {"key":"archived","label":"Archived","disabled":true}
    ]},
    {"type":"divider"},
    {"key":"delete","label":"Delete workspace","icon":"system-trash","danger":true}
  ]'>
</aha-menu>

<script>
  // Selection animates on a persistent row; each pick emits a composed `select` event.
  document.getElementById('nav').addEventListener('select', (e) => console.log('selected', e.detail.key));
</script>

import '@ahaslides-product/design/icons';       // registers <aha-icon> for leading + caret glyphs
import '@ahaslides-product/design/aha-menu';    // registers <aha-menu>
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper for the composed `select` event; React 19 can bind onSelect directly.
function AhaMenu({ items, value, mode, onSelect }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    const h = (e) => onSelect?.(e.detail.key);
    el.addEventListener('select', h);
    return () => el.removeEventListener('select', h);
  });
  return <aha-menu ref={ref} value={value} mode={mode} items={JSON.stringify(items)} />;
}

// usage — icons, a titled group, a submenu, a danger action; mode: vertical | inline | horizontal
<AhaMenu
  value={view}
  mode="vertical"
  items={[
    { type: 'group', label: 'Workspace', children: [
      { key: 'polls', label: 'Polls', icon: 'system-chart-bar' },
      { key: 'quizzes', label: 'Quizzes', icon: 'system-question' },
    ] },
    { key: 'library', label: 'Content library', icon: 'system-folder', children: [
      { key: 'templates', label: 'Templates' },
      { key: 'archived', label: 'Archived', disabled: true },
    ] },
    { type: 'divider' },
    { key: 'delete', label: 'Delete workspace', icon: 'system-trash', danger: true },
  ]}
  onSelect={setView}
/>

// main.ts — register the element + mark aha-* as custom elements
import '@ahaslides-product/design/icons';       // registers <aha-icon> for leading + caret glyphs
import '@ahaslides-product/design/aha-menu';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue — icons, a titled group, a submenu, a danger action; mode: vertical | inline | horizontal
<script setup>
import { ref, computed } from 'vue';
const view = ref('polls');
const items = computed(() => JSON.stringify([
  { type: 'group', label: 'Workspace', children: [
    { key: 'polls', label: 'Polls', icon: 'system-chart-bar' },
    { key: 'quizzes', label: 'Quizzes', icon: 'system-question' },
  ] },
  { key: 'library', label: 'Content library', icon: 'system-folder', children: [
    { key: 'templates', label: 'Templates' },
    { key: 'archived', label: 'Archived', disabled: true },
  ] },
  { type: 'divider' },
  { key: 'delete', label: 'Delete workspace', icon: 'system-trash', danger: true },
]));
function onSelect(e) { view.value = e.detail.key; }
</script>

<template>
  <aha-menu :value="view" mode="vertical" :items="items" @select="onSelect" />
</template>