Context Menu

---
import ContextMenu from '../components/astro/ContextMenu.astro';
---

<ContextMenu>
  <div slot="trigger" data-context-menu-trigger>Right click here</div>
  <button type="button" class="context-menu__item">Profile</button>
  <button type="button" class="context-menu__item">Billing</button>
  <div class="context-menu__separator"></div>
  <button type="button" class="context-menu__item">Settings</button>
</ContextMenu>

<!-- Rizzo CSS + context-menu script from package/vanilla docs. data-context-menu-trigger on trigger; menu uses context-menu, context-menu__item, context-menu__separator. -->

<script>
  import { ContextMenu } from '$lib/rizzo';
</script>

<ContextMenu>
  <div data-context-menu-trigger>Right click here</div>
  <button type="button" class="context-menu__item">Profile</button>
  <button type="button" class="context-menu__item">Billing</button>
  <div class="context-menu__separator"></div>
  <button type="button" class="context-menu__item">Settings</button>
</ContextMenu>

<script setup>
import ContextMenu from '@/components/rizzo/ContextMenu.vue';
</script>

<template>
  <ContextMenu>
    <span>Right-click</span>
    <div class="context-menu__item">Edit</div>
    <div class="context-menu__separator" role="separator" />
    <div class="context-menu__item">Delete</div>
  </ContextMenu>
</template>

import { ContextMenu } from './components/react';

<ContextMenu trigger={<span>Right-click</span>}>
  <div className="context-menu__item">Edit</div>
  <div className="context-menu__separator" role="separator" />
  <div className="context-menu__item">Delete</div>
</ContextMenu>