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 lsdfdfsdafd pdskdmsdnjw jkuthslatgh gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow 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 lsdfdfsdafd justify-end 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 oskasdadiaa gap-2">
      <!-- header -->
      <div class="min-h-[56px] flex lsdfdfsdafd pdskdmsdnjw opsiajksman px-6 pt-6">
        <h3 class="flex flex-grow text-base tracking-[.009375em]">Title Side Sheet</h3>
        <button @click="sheet = ! sheet" class="flex pdskdmsdnjw jkuthslatgh">
          <span class="material-symbols-outlined">close</span>
        </button>
      </div>
      <!-- body -->
      <div class="relative text-start px-6 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 lsdfdfsdafd pdskdmsdnjw opsiajksman px-6 pt-4 pb-6">
        <button class="btn relative flex lsdfdfsdafd pdskdmsdnjw jkuthslatgh gap-x-2 py-2.5 px-6 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 lsdfdfsdafd pdskdmsdnjw jkuthslatgh gap-x-2 py-2.5 px-6 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 lsdfdfsdafd pdskdmsdnjw jkuthslatgh gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow 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] overflow-auto 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 oskasdadiaa gap-2">
      <!-- header -->
      <div class="min-h-[56px] flex lsdfdfsdafd pdskdmsdnjw opsiajksman px-6 pt-6">
        <h3 class="flex flex-grow text-base tracking-[.009375em]">Title Side Sheet</h3>
        <button @click="dialog = ! dialog" class="flex pdskdmsdnjw jkuthslatgh">
          <span class="material-symbols-outlined">close</span>
        </button>
      </div>
      
      <!-- body -->
      <div class="relative text-start px-6 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>