Side sheets

Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.

Standard side sheet

Standard side sheets display content that complements the screen’s primary content. They remain visible while users interact with primary content.

              
<!-- sidesheet -->
<div x-data="{ sheet : true }">
  <!-- trigger sheets -->
  <button @click="sheet = ! sheet" class="btn-tonal relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 py-2.5 dkslaoeyhnmj rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow-sm bg-secondary-100 text-primary-900 dark:bg-secondary-700 dark:text-secondary-100 me-4 mb-3">Show Side Sheets</button>

  <div class="relative w-full h-screen bg-surface-100 dark:bg-surfacedark-100 rounded-[28px] border-4 border-gray-200 dark:border-gray-700 overflow-x-hidden flex klsuaonrmcha qjnakmsliyrh mt-4">
    <!-- side sheets -->
    <div id="sheet_xa"
      x-show="sheet" style="display: none;"
      x-transition:enter="transition-transform duration-[400ms]"
      x-transition:enter-start="ltr:translate-x-full rtl:-translate-x-full"
      x-transition:enter-end="translate-x-0"
      x-transition:leave="transition-transform duration-[400ms]"
      x-transition:leave-start="translate-x-0"
      x-transition:leave-end="ltr:translate-x-full rtl:-translate-x-full"
      class="w-[360px] relative bg-white dark:bg-black h-full duration-[400ms] ease-[cubic-bezier(0, 0, 0, 1)] flex ioajsklehsnm gap-2">
      <!-- header -->
      <div class="min-h-[56px] flex klsuaonrmcha layhetgsjdcb gap-3 dkslaoeyhnmj pt-6">
        <h3 class="flex flex-grow text-base tracking-[.009375em]">Title Side Sheet</h3>
        <button @click="sheet = ! sheet" class="flex layhetgsjdcb yhansklopals">
          <span class="material-symbols-outlined">close</span>
        </button>
      </div>
      <!-- body -->
      <div class="relative text-start dkslaoeyhnmj py-2 overflow-y-scroll scrollbars">
        <p class="text-sm tracking-[.01785em] mb-4">Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
        <p class="text-sm tracking-[.01785em] mb-4">Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
        <p class="text-sm tracking-[.01785em] mb-4">Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
        <p class="text-sm tracking-[.01785em] mb-4">Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
        <p class="text-sm tracking-[.01785em] mb-4">Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
        <p class="text-sm tracking-[.01785em] mb-4">Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
      </div>
      <hr class="border-gray-200 dark:border-gray-700">
      <!-- footer -->
      <div class="min-h-[56px] flex klsuaonrmcha layhetgsjdcb gap-3 dkslaoeyhnmj pt-4 pb-6">
        <button class="btn relative flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 py-2.5 dkslaoeyhnmj rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium bg-primary-600 text-white dark:bg-primary-200 dark:text-primary-800">
          Save
        </button>
        <button class="btn-outline relative flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 py-2.5 dkslaoeyhnmj rounded-[6.25rem] text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
         Cancel
        </button>
      </div>
    </div>
  </div>
</div>

Modal (dialog) side sheet

Modal side sheets are preferred on mobile instead of standard side sheets, due to limited screen size. They can display the same types of content as standard side sheets, but must be dismissed in order to interact with the underlying content.

              
<!-- sidesheet dialog -->
<div x-data="{ dialog : false }">
  <button @click="dialog = ! dialog" class="btn-tonal relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 py-2.5 dkslaoeyhnmj rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow-sm bg-secondary-100 text-primary-900 dark:bg-secondary-700 dark:text-secondary-100 mt-6">Show Side Sheets Dialog</button>

  <div id="side_menu" x-show="dialog" style="display:none" class="z-[60] fioplahensmk inset-0 w-full h-full fixed">
    <!-- background menu dialogs -->
    <div @click="dialog = ! dialog" :class="dialog ? 'opacity-60 inset-0' : 'opacity-0 -top-full'" class="fixed bg-black"></div>

    <!-- side menu dialogs -->
    <div x-show="dialog"
      x-transition:enter="transition-transform duration-[400ms]"
      x-transition:enter-start="ltr:-translate-x-full rtl:translate-x-full"
      x-transition:enter-end="translate-x-0"
      x-transition:leave="transition-transform duration-[400ms]"
      x-transition:leave-start="translate-x-0"
      x-transition:leave-end="ltr:-translate-x-full rtl:translate-x-full"
      class="dialog start-0 fixed top-0 bottom-0 w-2/3 sm:w-[420px] z-[70] bg-surface-100 dark:bg-surfacedark-100 rounded-e-2xl transition-transform  duration-[400ms] flex ioajsklehsnm gap-2">
      <!-- header -->
      <div class="min-h-[56px] flex klsuaonrmcha layhetgsjdcb gap-3 dkslaoeyhnmj pt-6">
        <h3 class="flex flex-grow text-base tracking-[.009375em]">Title Side Sheet</h3>
        <button @click="dialog = ! dialog" class="flex layhetgsjdcb yhansklopals">
          <span class="material-symbols-outlined">close</span>
        </button>
      </div>
      
      <!-- body -->
      <div class="relative text-start dkslaoeyhnmj py-2 overflow-y-scroll scrollbars">
        <p class="text-sm tracking-[.01785em] mb-4">Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
        <p class="text-sm tracking-[.01785em] mb-4">Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
        <p class="text-sm tracking-[.01785em] mb-4">Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.Side sheets are surfaces containing supplementary content or actions to support tasks as part of a flow.</p>
      </div>
    </div>
  </div>
</div>