<aside
  class="scrollbar top-0 h-screen overflow-y-auto bg-gray-900 text-white lg:absolute lg:z-40 lg:block
{{ styles[mobileOrientation] }}
{{
    sidebarOpen()
      ? 'absolute z-40 w-8/12 transition-all duration-500 ease-in sm:w-5/12 md:w-64'
      : 'hidden transition-all duration-700 ease-out lg:w-24'
  }}"
>
  <div class="pb-32 lg:pb-12">
    <sidebar-header></sidebar-header>
    <sidebar-items></sidebar-items>
  </div>
</aside>
