Dropdown menus opening positions

<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

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

<template>
  <div class="grid grid-cols-2 gap-2">
    <DropdownMenu v-for="side in sides" :key="side">
      <DropdownMenuTrigger as-child>
        <Button variant="outline" class="w-full">{{
          side.replace("-", " ").charAt(0).toUpperCase() + side.replace("-", " ").slice(1)
        }}</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent :side="side">
        <DropdownMenuGroup>
          <DropdownMenuItem>Profile</DropdownMenuItem>
          <DropdownMenuItem>Billing</DropdownMenuItem>
          <DropdownMenuItem>Settings</DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  </div>
</template>