Context menu with different alignment sides.

<script setup lang="ts">
import { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuTrigger } from "@/components/ui/context-menu"

const sides = ["left", "top", "bottom", "right"] as const
</script>

<template>
  <div class="flex w-full items-center justify-center p-12">
    <div class="grid grid-cols-2 gap-2">
      <ContextMenu v-for="side in sides" :key="side">
        <ContextMenuTrigger class="text-muted-foreground rounded-lg flex aspect-[2/0.5] items-center justify-center border border-dashed p-4 text-sm capitalize">
          {{ side }}
        </ContextMenuTrigger>
        <ContextMenuContent :side="side">
          <ContextMenuGroup>
            <ContextMenuItem>Back</ContextMenuItem>
            <ContextMenuItem>Forward</ContextMenuItem>
            <ContextMenuItem>Reload</ContextMenuItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
    </div>
  </div>
</template>