Drawer

This drawer uses PrimeVue's Sidebar component to create a right-aligned modal for adding a new team member.

It is styled to resemble a drawer with a custom header and body content.

🔧 Component: Sidebar (PrimeVue)

Usage Summary

Triggered by the reactive variable: showModal

Appears from the right side of the screen

Custom close button and header section

Contains a component

    <Sidebar
      v-model:visible="showModal"
      position="right"
      :style="{ maxWidth: '400px', width: '100%' }"
      modal
      class="custom-modal-drawer rounded-tl-lg rounded-bl-lg"
      :showCloseIcon="false"
      :show-header="false"
    >
      <div class="flex items-center justify-between px-6 py-3 bg-neutral-20">
        <div class="flex items-center gap-4">
          <BaseCustomIcon name="teams" />
          <h5 class="text-neutral-500 body-large">Add New Team Member</h5>
        </div>
        <button @click="showModal = false">
          <i
            class="pi pi-times text-neutral-500 text-base hover:bg-primary-50 p-3 hover:rounded-full"
          />
        </button>
      </div>
      <div class="">
        <TeamsAddTeam />
      </div>
    </Sidebar>
    
    <script setup>
    const showModal = ref(false)
    </script>
Edit this page on GitHub