I am using Nuxt and have added a Sheet component from shadcn-vue (https://www.shadcn-vue.com/docs/components/sheet.html) into my project. The example provided in the documentation uses a SheetTrigger to open the sheet, but it’s button is unstyled and positioned not how I want it. I want to place the button in the header, which is part of a parent component. From their API reference, it seems like I can use the ‘open’ attribute to trigger the open state, so by passing a prop to <Sheet>, but how can I close it when there’s no access to the close button? Looking for a possible solution.

Child Component ‘ItemSheet’:

<template>
  <Sheet>
    <SheetTrigger>Open</SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Are you absolutely sure?</SheetTitle>
        <SheetDescription>
          This action cannot be undone. This will permanently delete your account
          and remove your data from our servers.
        </SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
</template>

Parent Component:

<template>
  <div>
    <header>
      <button class="row-start-2 hidden md-max:block" type="button">
        <img src="/images/icons/hamburger.svg" alt="menu icon" />
      </button>
    </header>
    <ItemSheet/>
  </div>
</template>

<script setup>
    import ItemSheetfrom '@/components/ItemSheet.vue';
</script>