Tailwind CSS Sidenav - Free Examples & Tutorial

Responsive Sidenav built with the latest Tailwind CSS. Sidebar navigation provides an easy way to navigate through many pages. Free download.

Basic example

In the basic version, the side navigation will appear over your website's content after clicking on a toggler.

Note: Adding data-twe-collapse-show to a data-twe-sidenav-collapse-ref element will expand this category on render.

Note: When you are using data-twe-sidenav-position="absolute" attribute, change nav position class from fixed to absolute and h-screen to h-full.

HTML
javascript

        
            
      <!-- Sidenav -->
      <nav
        id="sidenav-1"
        class="fixed left-0 top-0 z-[1035] h-full w-60 -translate-x-full overflow-hidden bg-white shadow-dark-mild data-[twe-sidenav-hidden='false']:translate-x-0 dark:bg-surface-dark"
        data-twe-sidenav-init
        data-twe-sidenav-hidden="false">
        <ul
          class="relative m-0 list-none px-[0.2rem]"
          data-twe-sidenav-menu-ref>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" />
                </svg>
              </span>
              <span>Link 1</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 1</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="!visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref
              data-twe-collapse-show>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 2</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 3</a
                >
              </li>
            </ul>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 2</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 4</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 5</a
                >
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- Sidenav -->

      <!-- Toggler -->
      <button
        class="mt-10 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        data-twe-sidenav-toggle-ref
        data-twe-target="#sidenav-1"
        aria-controls="#sidenav-1"
        aria-haspopup="true">
        <span class="block [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-white">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
              clip-rule="evenodd" />
          </svg>
        </span>
      </button>
      <!-- Toggler -->

        
            
      // Initialization for ES Users
      import {
        Sidenav,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Sidenav });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Positioning

While using the side and push modes, you can specify the selector for your page's content - this way, the component will automatically update paddings and margins.

Note: Make sure to give initial styles to the content wrapper. Paddings and margins with ! signs will be removed as they will only be used for the initial positioning of the element.

Select mode:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna massa, ornare quis interdum a, cursus in quam. Quisque risus libero, cursus eget eros vitae, aliquam placerat velit. Vivamus luctus eros id sagittis luctus. Pellentesque felis nulla, rhoncus viverra nunc vitae, viverra aliquam ante. Ut feugiat mattis tempor.

HTML
javascript
umd

ES UMD

        
            
      <p>Select mode:</p>
      <div class="d-flex my-4">
        <button
          id="push"
          class="me-4 inline-block rounded border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-accent-300 hover:bg-primary-50/50 hover:text-primary-accent-300 focus:border-primary-600 focus:bg-primary-50/50 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 dark:text-primary-500 dark:hover:bg-blue-950 dark:focus:bg-blue-950">
          Push
        </button>
        <button
          id="side"
          class="me-4 inline-block rounded border-2 border-transparent bg-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
          Side
        </button>
        <button
          id="over"
          class="inline-block rounded border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-accent-300 hover:bg-primary-50/50 hover:text-primary-accent-300 focus:border-primary-600 focus:bg-primary-50/50 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 dark:text-primary-500 dark:hover:bg-blue-950 dark:focus:bg-blue-950">
          Over
        </button>
      </div>

      <!-- Sidenav -->
      <nav
        id="sidenav-2"
        class="fixed left-0 top-0 z-[1035] h-full w-60 -translate-x-full overflow-hidden bg-white shadow-dark-mild data-[twe-sidenav-hidden='false']:translate-x-0 dark:bg-surface-dark"
        data-twe-sidenav-init
        data-twe-sidenav-hidden="false"
        data-twe-sidenav-mode="side"
        data-twe-sidenav-content="#content">
        <ul
          class="relative m-0 list-none px-[0.2rem]"
          data-twe-sidenav-menu-ref>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" />
                </svg>
              </span>
              <span>Link 1</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 1</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="!visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 2</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 3</a
                >
              </li>
            </ul>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 2</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 4</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 5</a
                >
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- Sidenav -->
      <div class="p-5 !ps-[260px] text-center" id="content">
        <!-- Toggler -->
        <button
          class="mt-10 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
          data-twe-sidenav-toggle-ref
          data-twe-target="#sidenav-2"
          aria-controls="#sidenav-2"
          aria-haspopup="true">
          <span class="block [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-white">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor">
              <path
                fill-rule="evenodd"
                d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
                clip-rule="evenodd" />
            </svg>
          </span>
        </button>
        <!-- Toggler -->
        <div class="my-5 flex text-start">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc magna
          massa, ornare quis interdum a, cursus in quam. Quisque risus libero,
          cursus eget eros vitae, aliquam placerat velit. Vivamus luctus eros id
          sagittis luctus. Pellentesque felis nulla, rhoncus viverra nunc vitae,
          viverra aliquam ante. Ut feugiat mattis tempor.
        </div>
      </div>

        
            
      import {
        Sidenav,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Sidenav });

      const instanceMode = Sidenav.getInstance(
        document.getElementById("sidenav-2")
      );
      const modes = ["push", "over", "side"];

      modes.forEach((mode) => {
        const modeSwitch = document.getElementById(mode);
        modeSwitch.addEventListener("click", () => {
          const instance = Sidenav.getInstance(
            document.getElementById("sidenav-2")
          );
          instance.changeMode(mode);
          modes.forEach((el) => {
            if (el === mode) {
              [
                "text-primary",
                "border-primary",
                "hover:border-primary-accent-300",
                "hover:bg-primary-50/50",
                "hover:text-primary-accent-300",
                "focus:border-primary-600",
                "focus:bg-primary-50/50",
                "focus:text-primary-600",
                "active:border-primary-700",
                "active:text-primary-700",
                "dark:text-primary-500",
                "dark:hover:bg-blue-950",
                "dark:focus:bg-blue-950",
              ].forEach((item) => modeSwitch.classList.remove(item));
              modeSwitch.className +=
                " bg-primary text-white border-transparent shadow-primary-3 hover:bg-primary-accent-300 hover:shadow-primary-2 active:bg-primary-600 active:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong";
            } else {
              const node = document.getElementById(el);
              node.className +=
                " text-primary border-primary hover:border-primary-accent-300 hover:bg-primary-50/50 hover:text-primary-accent-300 focus:border-primary-600 focus:bg-primary-50/50 focus:text-primary-600 active:border-primary-700 active:text-primary-700 dark:text-primary-500 dark:hover:bg-blue-950 dark:focus:bg-blue-950";
              [
                "bg-primary",
                "text-white",
                "border-transparent",
                "shadow-primary-3",
                "hover:bg-primary-accent-300",
                "hover:shadow-primary-2",
                "active:bg-primary-600",
                "active:shadow-primary-2",
                "focus:bg-primary-accent-300",
                "focus:shadow-primary-2",
                "dark:shadow-black/30",
                "dark:hover:shadow-dark-strong",
                "dark:focus:shadow-dark-strong",
                "dark:active:shadow-dark-strong",
              ].forEach((item) => node.classList.remove(item));
            }
          });
        });
      });

        
            
      const instanceMode = twe.Sidenav.getInstance(
        document.getElementById("sidenav-2")
      );
      const modes = ["push", "over", "side"];

      modes.forEach((mode) => {
        const modeSwitch = document.getElementById(mode);
        modeSwitch.addEventListener("click", () => {
          const instance = twe.Sidenav.getInstance(
            document.getElementById("sidenav-2")
          );
          instance.changeMode(mode);
          modes.forEach((el) => {
            if (el === mode) {
              [
                "text-primary",
                "border-primary",
                "hover:border-primary-accent-300",
                "hover:bg-primary-50/50",
                "hover:text-primary-accent-300",
                "focus:border-primary-600",
                "focus:bg-primary-50/50",
                "focus:text-primary-600",
                "active:border-primary-700",
                "active:text-primary-700",
                "dark:text-primary-500",
                "dark:hover:bg-blue-950",
                "dark:focus:bg-blue-950",
              ].forEach((item) => modeSwitch.classList.remove(item));
              modeSwitch.className +=
                " bg-primary text-white border-transparent shadow-primary-3 hover:bg-primary-accent-300 hover:shadow-primary-2 active:bg-primary-600 active:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong";
            } else {
              const node = document.getElementById(el);
              node.className +=
                " text-primary border-primary hover:border-primary-accent-300 hover:bg-primary-50/50 hover:text-primary-accent-300 focus:border-primary-600 focus:bg-primary-50/50 focus:text-primary-600 active:border-primary-700 active:text-primary-700 dark:text-primary-500 dark:hover:bg-blue-950 dark:focus:bg-blue-950";
              [
                "bg-primary",
                "text-white",
                "border-transparent",
                "shadow-primary-3",
                "hover:bg-primary-accent-300",
                "hover:shadow-primary-2",
                "active:bg-primary-600",
                "active:shadow-primary-2",
                "focus:bg-primary-accent-300",
                "focus:shadow-primary-2",
                "dark:shadow-black/30",
                "dark:hover:shadow-dark-strong",
                "dark:focus:shadow-dark-strong",
                "dark:active:shadow-dark-strong",
              ].forEach((item) => node.classList.remove(item));
            }
          });
        });
      });

Slim

You can hide/show elements in the slim mode by setting data-twe-sidenav-slim attribute on them - depending on value they will be either visible only in a slim or an expanded mode. Elements without this attribute will appear in both modes.

Note: For slim to work correctly make sure to add proper classes to the data-twe-sidenav-init and data-twe-sidenav-link-ref elements.

HTML
javascript
umd

ES UMD

        
            
      <!-- Sidenav -->
      <nav
        id="sidenav-4"
        class="group fixed left-0 top-0 z-[1035] h-full w-60 -translate-x-full overflow-hidden bg-white shadow-dark-mild data-[twe-sidenav-slim='true']:hidden data-[twe-sidenav-slim-collapsed='true']:w-[77px] data-[twe-sidenav-slim='true']:w-[77px] data-[twe-sidenav-hidden='false']:translate-x-0 dark:bg-surface-dark [&[data-twe-sidenav-slim-collapsed='true'][data-twe-sidenav-slim='false']]:hidden [&[data-twe-sidenav-slim-collapsed='true'][data-twe-sidenav-slim='true']]:[display:unset]"
        data-twe-sidenav-init
        data-twe-sidenav-hidden="false"
        data-twe-sidenav-mode="side"
        data-twe-sidenav-slim="true"
        data-twe-sidenav-content="#slim-content"
        data-twe-sidenav-slim-collapsed="true">
        <ul
          class="relative m-0 list-none px-[0.2rem]"
          data-twe-sidenav-menu-ref>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" />
                </svg>
              </span>
              <span
                class="group-data-[twe-sidenav-slim-collapsed='true']:data-[twe-sidenav-slim='false']:hidden"
                data-twe-sidenav-slim="false"
                >Link 1</span
              >
            </a>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span
                class="group-data-[twe-sidenav-slim-collapsed='true']:data-[twe-sidenav-slim='false']:hidden"
                data-twe-sidenav-slim="false"
                >Category 1</span
              >
              <span
                class="absolute end-0 me-[0.5rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="!visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 2</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 3</a
                >
              </li>
            </ul>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span
                class="group-data-[twe-sidenav-slim-collapsed='true']:data-[twe-sidenav-slim='false']:hidden"
                data-twe-sidenav-slim="false"
                >Category 2</span
              >
              <span
                class="absolute end-0 me-[0.5rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 4</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 5</a
                >
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- Sidenav -->

      <div id="slim-content" class="flex !ps-[77px]">
        <!-- Toggler -->
        <button
          class="me-1 mt-10 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
          data-twe-sidenav-toggle-ref
          data-twe-target="#sidenav-4"
          aria-controls="#sidenav-4"
          aria-haspopup="true">
          <span class="block [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-white">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor">
              <path
                fill-rule="evenodd"
                d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
                clip-rule="evenodd" />
            </svg>
          </span>
        </button>
        <!-- Toggler -->
        <button
          class="mt-10 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
          aria-haspopup="true"
          id="slim-toggler">
          Toggle Slim
        </button>
      </div>

        
            
      import {
        Sidenav,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Sidenav });

      document
      .getElementById("slim-toggler")
      .addEventListener("click", () => {
        const instance = Sidenav.getInstance(
          document.getElementById("sidenav-4")
        );
        instance.toggleSlim();
      });

        
            
      document
        .getElementById("slim-toggler")
        .addEventListener("click", () => {
          const instance = twe.Sidenav.getInstance(
            document.getElementById("sidenav-4")
          );
          instance.toggleSlim();
        });

Accordion

Using accordion option will allow expanding only one category at once.

HTML
javascript

        
            
      <!-- Sidenav -->
      <nav
        id="sidenav-5"
        class="fixed left-0 top-0 z-[1035] h-full w-60 -translate-x-full overflow-hidden bg-white shadow-dark-mild data-[twe-sidenav-hidden='false']:translate-x-0 dark:bg-surface-dark"
        data-twe-sidenav-init
        data-twe-sidenav-hidden="false"
        data-twe-sidenav-accordion="true">
        <ul
          class="relative m-0 list-none px-[0.2rem]"
          data-twe-sidenav-menu-ref>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" />
                </svg>
              </span>
              <span>Link 1</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 1</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="!visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 2</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 3</a
                >
              </li>
            </ul>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 2</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 4</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 5</a
                >
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- Sidenav -->

      <!-- Toggler -->
      <button
        class="mt-10 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        data-twe-sidenav-toggle-ref
        data-twe-target="#sidenav-5"
        aria-controls="#sidenav-5"
        aria-haspopup="true">
        <span class="block [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-white">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
              clip-rule="evenodd" />
          </svg>
        </span>
      </button>
      <!-- Toggler -->

        
            
      // Initialization for ES Users
      import {
        Sidenav,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Sidenav });

Groups

You can use more than one menu inside the side navigation - in this case, accordions will be independent of one another.

HTML
javascript

        
            
      <!-- Sidenav -->
      <nav
        id="sidenav-6"
        class="fixed left-0 top-0 z-[1035] h-full w-60 -translate-x-full overflow-hidden bg-white shadow-dark-mild data-[twe-sidenav-hidden='false']:translate-x-0 dark:bg-surface-dark"
        data-twe-sidenav-init
        data-twe-sidenav-hidden="false"
        data-twe-sidenav-accordion="true">
        <ul
          class="relative m-0 list-none px-[0.2rem]"
          data-twe-sidenav-menu-ref>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" />
                </svg>
              </span>
              <span>Link 1</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 1</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="!visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 2</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 3</a
                >
              </li>
            </ul>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 2</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 4</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 5</a
                >
              </li>
            </ul>
          </li>
        </ul>
        <hr class="my-4 border-neutral-100 dark:border-white/10" />
        <ul
          class="relative m-0 list-none px-[0.2rem]"
          data-twe-sidenav-menu-ref>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" />
                </svg>
              </span>
              <span>Link 6</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 3</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="!visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 7</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 8</a
                >
              </li>
            </ul>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 4</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 9</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 10</a
                >
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- Sidenav -->

      <!-- Toggler -->
      <button
        class="mt-10 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        data-twe-sidenav-toggle-ref
        data-twe-target="#sidenav-6"
        aria-controls="#sidenav-6"
        aria-haspopup="true">
        <span class="block [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-white">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
              clip-rule="evenodd" />
          </svg>
        </span>
      </button>
      <!-- Toggler -->

        
            
      // Initialization for ES Users
      import {
        Sidenav,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Sidenav });

Right

Place the navigation on the other side by setting the right attribute to true.

Note: Sidenav right needs to have overflow-x-hidden class set to its parent so it won't create a horizontal scrollbar.

HTML
javascript

        
            
      <!-- Sidenav -->
      <nav
        id="sidenav-6"
        class="fixed left-0 top-0 z-[1035] h-full w-60 -translate-x-full overflow-hidden bg-white shadow-dark-mild data-[twe-sidenav-hidden='false']:translate-x-0 dark:bg-surface-dark"
        data-twe-sidenav-init
        data-twe-sidenav-hidden="false"
        data-twe-sidenav-accordion="true">
        <ul
          class="relative m-0 list-none px-[0.2rem]"
          data-twe-sidenav-menu-ref>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" />
                </svg>
              </span>
              <span>Link 1</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 1</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="!visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 2</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 3</a
                >
              </li>
            </ul>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 2</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 4</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 5</a
                >
              </li>
            </ul>
          </li>
        </ul>
        <hr class="my-4 border-neutral-100 dark:border-white/10" />
        <ul
          class="relative m-0 list-none px-[0.2rem]"
          data-twe-sidenav-menu-ref>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" />
                </svg>
              </span>
              <span>Link 6</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 3</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="!visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 7</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 8</a
                >
              </li>
            </ul>
          </li>
          <li class="relative">
            <a
              class="flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm2.023 6.828a.75.75 0 10-1.06-1.06 3.75 3.75 0 01-5.304 0 .75.75 0 00-1.06 1.06 5.25 5.25 0 007.424 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Category 4</span>
              <span
                class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400"
                data-twe-sidenav-rotate-icon-ref>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </a>
            <ul
              class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block "
              data-twe-sidenav-collapse-ref>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 9</a
                >
              </li>
              <li class="relative">
                <a
                  class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
                  data-twe-sidenav-link-ref
                  >Link 10</a
                >
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <!-- Sidenav -->

      <!-- Toggler -->
      <button
        class="mt-10 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        data-twe-sidenav-toggle-ref
        data-twe-target="#sidenav-6"
        aria-controls="#sidenav-6"
        aria-haspopup="true">
        <span class="block [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-white">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
              clip-rule="evenodd" />
          </svg>
        </span>
      </button>
      <!-- Toggler -->

        
            
      // Initialization for ES Users
      import {
        Sidenav,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Sidenav });

Full-screen examples

The following examples show various settings of the side navigation component in a full-screen mode.

Basic side navigation

Click the toggler to show the navigation (over mode).

View fullscreen demo

HTML
javascript

        
            
      <body class="dark:bg-body-dark [&>*]:leading-[1.6]">
        <!-- Sidenav -->
        <nav
          id="full-screen-example"
          class="fixed left-0 top-0 z-[1035] h-screen w-60 -translate-x-full overflow-hidden bg-white shadow-dark-mild data-[twe-sidenav-hidden='false']:translate-x-0 dark:bg-surface-dark"
          data-twe-sidenav-init
          data-twe-sidenav-content="#content">
          <div class="mt-6">
            <div id="header-content" class="ps-4">
              <img
                src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(26).webp"
                alt="Avatar"
                class="mb-4 h-auto rounded-full align-middle"
                style="max-width: 50px;" />

              <h4 class="mb-2 text-2xl font-medium leading-[1.2]">Ann Smith</h4>
              <p class="mb-4">ann_s@mdbootstrap.com</p>
            </div>
            <hr class="border-neutral-100 dark:border-white/10" />
          </div>
          <div>
            <ul
              class="relative m-0 list-none px-[0.2rem]"
              data-twe-sidenav-menu-ref>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
                      <path
                        d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
                    </svg>
                  </span>
                  <span>Inbox</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600  group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z" />
                    </svg>
                  </span>
                  <span>Outbox</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 -960 960 960"
                      fill="currentColor">
                      <path
                        d="M200-206q54-53 125.5-83.5T480-320q83 0 154.5 30.5T760-206v-514H200v514Zm280-194q-58 0-99-41t-41-99q0-58 41-99t99-41q58 0 99 41t41 99q0 58-41 99t-99 41ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Z" />
                    </svg>
                  </span>
                  <span>Contacts</span>
                  <span
                    class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 motion-reduce:transition-none [&>svg]:h-3 [&>svg]:w-3 [&>svg]:stroke-gray-400 [&>svg]:text-gray-400 group-hover:[&>svg]:stroke-blue-600 group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:stroke-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:stroke-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:stroke-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 dark:group-hover:[&>svg]:stroke-blue-500 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:stroke-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:stroke-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:stroke-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500"
                    data-twe-sidenav-rotate-icon-ref>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
                <ul
                  class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block"
                  data-twe-sidenav-collapse-ref>
                  <li class="relative">
                    <a
                      class="hover:text-blue-600/ flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                      data-twe-sidenav-link-ref
                      >Family</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                      data-twe-sidenav-link-ref
                      >Friends</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                      data-twe-sidenav-link-ref
                      >Work</a
                    >
                  </li>
                </ul>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z" />
                      <path
                        d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" />
                    </svg>
                  </span>
                  <span>Drafts</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
                    </svg>
                  </span>
                  <span>Favourites</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Starred</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Trash</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="m6.72 5.66 11.62 11.62A8.25 8.25 0 0 0 6.72 5.66Zm10.56 12.68L5.66 6.72a8.25 8.25 0 0 0 11.62 11.62ZM5.105 5.106c3.807-3.808 9.98-3.808 13.788 0 3.808 3.807 3.808 9.98 0 13.788-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Spam</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M5.25 2.25a3 3 0 0 0-3 3v4.318a3 3 0 0 0 .879 2.121l9.58 9.581c.92.92 2.39 1.186 3.548.428a18.849 18.849 0 0 0 5.441-5.44c.758-1.16.492-2.629-.428-3.548l-9.58-9.581a3 3 0 0 0-2.122-.879H5.25ZM6.375 7.5a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Categories</span>
                  <span
                    class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 motion-reduce:transition-none [&>svg]:h-3 [&>svg]:w-3 [&>svg]:stroke-gray-400 [&>svg]:text-gray-400 group-hover:[&>svg]:stroke-blue-600 group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:stroke-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:stroke-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:stroke-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 dark:group-hover:[&>svg]:stroke-blue-500 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:stroke-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:stroke-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:stroke-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500"
                    data-twe-sidenav-rotate-icon-ref>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
                <ul
                  class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block"
                  data-twe-sidenav-collapse-ref>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                      data-twe-sidenav-link-ref
                      >Social</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                      data-twe-sidenav-link-ref
                      >Notifications</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                      data-twe-sidenav-link-ref
                      >Recent</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                      data-twe-sidenav-link-ref
                      >Uploads</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                      data-twe-sidenav-link-ref
                      >Backups</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                      data-twe-sidenav-link-ref
                      >Offers</a
                    >
                  </li>
                </ul>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 -960 960 960"
                      fill="currentColor">
                      <path
                        d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v400L600-120H200Zm360-80 200-200H560v200ZM280-400h200v-80H280v80Zm0-160h400v-80H280v80Z" />
                    </svg>
                  </span>
                  <span>Notes</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Personal</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M4.5 12a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm6 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm6 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>More</span>
                </a>
              </li>
            </ul>
            <hr class="border-gray-300" />
            <ul class="relative m-0 list-none px-[0.2rem]">
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        d="M17.004 10.407c.138.435-.216.842-.672.842h-3.465a.75.75 0 0 1-.65-.375l-1.732-3c-.229-.396-.053-.907.393-1.004a5.252 5.252 0 0 1 6.126 3.537ZM8.12 8.464c.307-.338.838-.235 1.066.16l1.732 3a.75.75 0 0 1 0 .75l-1.732 3c-.229.397-.76.5-1.067.161A5.23 5.23 0 0 1 6.75 12a5.23 5.23 0 0 1 1.37-3.536ZM10.878 17.13c-.447-.098-.623-.608-.394-1.004l1.733-3.002a.75.75 0 0 1 .65-.375h3.465c.457 0 .81.407.672.842a5.252 5.252 0 0 1-6.126 3.539Z" />
                      <path
                        fill-rule="evenodd"
                        d="M21 12.75a.75.75 0 1 0 0-1.5h-.783a8.22 8.22 0 0 0-.237-1.357l.734-.267a.75.75 0 1 0-.513-1.41l-.735.268a8.24 8.24 0 0 0-.689-1.192l.6-.503a.75.75 0 1 0-.964-1.149l-.6.504a8.3 8.3 0 0 0-1.054-.885l.391-.678a.75.75 0 1 0-1.299-.75l-.39.676a8.188 8.188 0 0 0-1.295-.47l.136-.77a.75.75 0 0 0-1.477-.26l-.136.77a8.36 8.36 0 0 0-1.377 0l-.136-.77a.75.75 0 1 0-1.477.26l.136.77c-.448.121-.88.28-1.294.47l-.39-.676a.75.75 0 0 0-1.3.75l.392.678a8.29 8.29 0 0 0-1.054.885l-.6-.504a.75.75 0 1 0-.965 1.149l.6.503a8.243 8.243 0 0 0-.689 1.192L3.8 8.216a.75.75 0 1 0-.513 1.41l.735.267a8.222 8.222 0 0 0-.238 1.356h-.783a.75.75 0 0 0 0 1.5h.783c.042.464.122.917.238 1.356l-.735.268a.75.75 0 0 0 .513 1.41l.735-.268c.197.417.428.816.69 1.191l-.6.504a.75.75 0 0 0 .963 1.15l.601-.505c.326.323.679.62 1.054.885l-.392.68a.75.75 0 0 0 1.3.75l.39-.679c.414.192.847.35 1.294.471l-.136.77a.75.75 0 0 0 1.477.261l.137-.772a8.332 8.332 0 0 0 1.376 0l.136.772a.75.75 0 1 0 1.477-.26l-.136-.771a8.19 8.19 0 0 0 1.294-.47l.391.677a.75.75 0 0 0 1.3-.75l-.393-.679a8.29 8.29 0 0 0 1.054-.885l.601.504a.75.75 0 0 0 .964-1.15l-.6-.503c.261-.375.492-.774.69-1.191l.735.267a.75.75 0 1 0 .512-1.41l-.734-.267c.115-.439.195-.892.237-1.356h.784Zm-2.657-3.06a6.744 6.744 0 0 0-1.19-2.053 6.784 6.784 0 0 0-1.82-1.51A6.705 6.705 0 0 0 12 5.25a6.8 6.8 0 0 0-1.225.11 6.7 6.7 0 0 0-2.15.793 6.784 6.784 0 0 0-2.952 3.489.76.76 0 0 1-.036.098A6.74 6.74 0 0 0 5.251 12a6.74 6.74 0 0 0 3.366 5.842l.009.005a6.704 6.704 0 0 0 2.18.798l.022.003a6.792 6.792 0 0 0 2.368-.004 6.704 6.704 0 0 0 2.205-.811 6.785 6.785 0 0 0 1.762-1.484l.009-.01.009-.01a6.743 6.743 0 0 0 1.18-2.066c.253-.707.39-1.469.39-2.263a6.74 6.74 0 0 0-.408-2.309Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Settings</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Profile</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 -960 960 960"
                      fill="currentColor">
                      <path
                        d="M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q97-30 162-118.5T718-480H480v-315l-240 90v207q0 7 2 18h238v316Z" />
                    </svg>
                  </span>
                  <span>Privacy</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white  dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500 ">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M16.5 3.75a1.5 1.5 0 0 1 1.5 1.5v13.5a1.5 1.5 0 0 1-1.5 1.5h-6a1.5 1.5 0 0 1-1.5-1.5V15a.75.75 0 0 0-1.5 0v3.75a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V5.25a3 3 0 0 0-3-3h-6a3 3 0 0 0-3 3V9A.75.75 0 1 0 9 9V5.25a1.5 1.5 0 0 1 1.5-1.5h6ZM5.78 8.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 0 0 0 1.06l3 3a.75.75 0 0 0 1.06-1.06l-1.72-1.72H15a.75.75 0 0 0 0-1.5H4.06l1.72-1.72a.75.75 0 0 0 0-1.06Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Log out</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="h-[100px] text-center">
            <hr class="mb-6 border-gray-300" />
            <p>tw-elements.com</p>
          </div>
        </nav>
        <!-- Sidenav -->

        <!-- Content -->
        <div class="h-screen w-screen bg-zinc-50 text-center dark:bg-body-dark">
          <div
            class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed py-12 text-center">
            <button
              id="toggler"
              class="m-12 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
              data-twe-sidenav-toggle-ref
              data-twe-target="#full-screen-example"
              data-twe-ripple-init
              data-twe-ripple-color="light">
              <span
                class="block [&>svg]:h-4 [&>svg]:w-4 [&>svg]:stroke-white [&>svg]:text-white">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </button>
            <div>
              <img
                class="inline-block w-5/6 rounded"
                src="https://mdbcdn.b-cdn.net/img/Photos/Others/img%20(45).webp" />
            </div>
          </div>
        </div>
        <!-- Content -->
      </body>

        
            
      // Initialization for ES Users
      import {
        Sidenav,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Sidenav, Ripple });

Side navigation with a mode transition

Resize the window to change the mode from side to over.

For the resize to work properly we have to do the following

Add classes for every breakpoint we are going to use
Add breakpoint attributes that will set the proper mode for the sidenav.
Create script that will handle the mode switching on resize event

View fullscreen demo

HTML
javascript
umd

ES UMD

        
            
      <body class="dark:bg-body-dark [&>*]:leading-[1.6]">
        <!-- Sidenav -->
        <nav
          id="full-screen-example"
          class="fixed left-0 top-0 z-[1035] h-screen w-60 -translate-x-full overflow-hidden bg-white shadow-dark-mild dark:bg-surface-dark md:data-[twe-sidenav-hidden='false']:translate-x-0"
          data-twe-sidenav-init
          data-twe-sidenav-mode-breakpoint-over="0"
          data-twe-sidenav-mode-breakpoint-side="sm"
          data-twe-sidenav-hidden="false"
          data-twe-sidenav-color="dark"
          data-twe-sidenav-content="#content"
          data-twe-sidenav-scroll-container="#scrollContainer">
          <div class="pt-6">
            <div id="header-content" class="ps-4">
              <img
                src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(23).webp"
                alt="Avatar"
                class="mb-4 h-auto rounded-full align-middle"
                style="max-width: 50px;" />

              <h4 class="mb-2 text-2xl font-medium leading-[1.2]">Ann Smith</h4>
              <p class="mb-4">ann_s@mdbootstrap.com</p>
            </div>
            <hr class="border-neutral-100 dark:border-white/10" />
          </div>
          <div id="scrollContainer">
            <ul
              class="relative m-0 list-none px-[0.2rem]"
              data-twe-sidenav-menu-ref>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
                      <path
                        d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
                    </svg>
                  </span>
                  <span>Inbox</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z" />
                    </svg>
                  </span>
                  <span>Outbox</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 -960 960 960"
                      fill="currentColor">
                      <path
                        d="M200-206q54-53 125.5-83.5T480-320q83 0 154.5 30.5T760-206v-514H200v514Zm280-194q-58 0-99-41t-41-99q0-58 41-99t99-41q58 0 99 41t41 99q0 58-41 99t-99 41ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Z" />
                    </svg>
                  </span>
                  <span>Contacts</span>
                  <span
                    class="absolute end-0 me-[0.8rem] ms-auto rotate-180 transition-all duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-3 [&>svg]:w-3 [&>svg]:stroke-gray-600 [&>svg]:text-gray-600 dark:[&>svg]:stroke-gray-400 dark:[&>svg]:text-gray-400"
                    data-twe-sidenav-rotate-icon-ref>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
                <ul
                  class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block"
                  data-twe-sidenav-collapse-ref
                  data-twe-collapse-show>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                      data-twe-sidenav-link-ref
                      >Family</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                      data-twe-sidenav-link-ref
                      >Friends</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                      data-twe-sidenav-link-ref
                      >Work</a
                    >
                  </li>
                </ul>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z" />
                      <path
                        d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" />
                    </svg>
                  </span>
                  <span>Drafts</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
                    </svg>
                  </span>
                  <span>Favourites</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Starred</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Trash</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="m6.72 5.66 11.62 11.62A8.25 8.25 0 0 0 6.72 5.66Zm10.56 12.68L5.66 6.72a8.25 8.25 0 0 0 11.62 11.62ZM5.105 5.106c3.807-3.808 9.98-3.808 13.788 0 3.808 3.807 3.808 9.98 0 13.788-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Spam</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M5.25 2.25a3 3 0 0 0-3 3v4.318a3 3 0 0 0 .879 2.121l9.58 9.581c.92.92 2.39 1.186 3.548.428a18.849 18.849 0 0 0 5.441-5.44c.758-1.16.492-2.629-.428-3.548l-9.58-9.581a3 3 0 0 0-2.122-.879H5.25ZM6.375 7.5a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Categories</span>
                  <span
                    class="absolute end-0 me-[0.8rem] ms-auto transition-all duration-300 ease-linear motion-reduce:transition-none [&>svg]:h-3 [&>svg]:w-3 [&>svg]:stroke-gray-600 [&>svg]:text-gray-600 dark:[&>svg]:stroke-gray-400 dark:[&>svg]:text-gray-400"
                    data-twe-sidenav-rotate-icon-ref>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
                <ul
                  class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block"
                  data-twe-sidenav-collapse-ref>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                      data-twe-sidenav-link-ref
                      >Social</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                      data-twe-sidenav-link-ref
                      >Notifications</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                      data-twe-sidenav-link-ref
                      >Recent</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                      data-twe-sidenav-link-ref
                      >Uploads</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                      data-twe-sidenav-link-ref
                      >Backups</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                      data-twe-sidenav-link-ref
                      >Offers</a
                    >
                  </li>
                </ul>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 -960 960 960"
                      fill="currentColor">
                      <path
                        d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v400L600-120H200Zm360-80 200-200H560v200ZM280-400h200v-80H280v80Zm0-160h400v-80H280v80Z" />
                    </svg>
                  </span>
                  <span>Notes</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Personal</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M4.5 12a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm6 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm6 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>More</span>
                </a>
              </li>
            </ul>
            <hr class="border-neutral-100 dark:border-white/10" />
            <ul class="relative m-0 list-none px-[0.2rem]">
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        d="M17.004 10.407c.138.435-.216.842-.672.842h-3.465a.75.75 0 0 1-.65-.375l-1.732-3c-.229-.396-.053-.907.393-1.004a5.252 5.252 0 0 1 6.126 3.537ZM8.12 8.464c.307-.338.838-.235 1.066.16l1.732 3a.75.75 0 0 1 0 .75l-1.732 3c-.229.397-.76.5-1.067.161A5.23 5.23 0 0 1 6.75 12a5.23 5.23 0 0 1 1.37-3.536ZM10.878 17.13c-.447-.098-.623-.608-.394-1.004l1.733-3.002a.75.75 0 0 1 .65-.375h3.465c.457 0 .81.407.672.842a5.252 5.252 0 0 1-6.126 3.539Z" />
                      <path
                        fill-rule="evenodd"
                        d="M21 12.75a.75.75 0 1 0 0-1.5h-.783a8.22 8.22 0 0 0-.237-1.357l.734-.267a.75.75 0 1 0-.513-1.41l-.735.268a8.24 8.24 0 0 0-.689-1.192l.6-.503a.75.75 0 1 0-.964-1.149l-.6.504a8.3 8.3 0 0 0-1.054-.885l.391-.678a.75.75 0 1 0-1.299-.75l-.39.676a8.188 8.188 0 0 0-1.295-.47l.136-.77a.75.75 0 0 0-1.477-.26l-.136.77a8.36 8.36 0 0 0-1.377 0l-.136-.77a.75.75 0 1 0-1.477.26l.136.77c-.448.121-.88.28-1.294.47l-.39-.676a.75.75 0 0 0-1.3.75l.392.678a8.29 8.29 0 0 0-1.054.885l-.6-.504a.75.75 0 1 0-.965 1.149l.6.503a8.243 8.243 0 0 0-.689 1.192L3.8 8.216a.75.75 0 1 0-.513 1.41l.735.267a8.222 8.222 0 0 0-.238 1.356h-.783a.75.75 0 0 0 0 1.5h.783c.042.464.122.917.238 1.356l-.735.268a.75.75 0 0 0 .513 1.41l.735-.268c.197.417.428.816.69 1.191l-.6.504a.75.75 0 0 0 .963 1.15l.601-.505c.326.323.679.62 1.054.885l-.392.68a.75.75 0 0 0 1.3.75l.39-.679c.414.192.847.35 1.294.471l-.136.77a.75.75 0 0 0 1.477.261l.137-.772a8.332 8.332 0 0 0 1.376 0l.136.772a.75.75 0 1 0 1.477-.26l-.136-.771a8.19 8.19 0 0 0 1.294-.47l.391.677a.75.75 0 0 0 1.3-.75l-.393-.679a8.29 8.29 0 0 0 1.054-.885l.601.504a.75.75 0 0 0 .964-1.15l-.6-.503c.261-.375.492-.774.69-1.191l.735.267a.75.75 0 1 0 .512-1.41l-.734-.267c.115-.439.195-.892.237-1.356h.784Zm-2.657-3.06a6.744 6.744 0 0 0-1.19-2.053 6.784 6.784 0 0 0-1.82-1.51A6.705 6.705 0 0 0 12 5.25a6.8 6.8 0 0 0-1.225.11 6.7 6.7 0 0 0-2.15.793 6.784 6.784 0 0 0-2.952 3.489.76.76 0 0 1-.036.098A6.74 6.74 0 0 0 5.251 12a6.74 6.74 0 0 0 3.366 5.842l.009.005a6.704 6.704 0 0 0 2.18.798l.022.003a6.792 6.792 0 0 0 2.368-.004 6.704 6.704 0 0 0 2.205-.811 6.785 6.785 0 0 0 1.762-1.484l.009-.01.009-.01a6.743 6.743 0 0 0 1.18-2.066c.253-.707.39-1.469.39-2.263a6.74 6.74 0 0 0-.408-2.309Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Settings</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Profile</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 -960 960 960"
                      fill="currentColor">
                      <path
                        d="M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q97-30 162-118.5T718-480H480v-315l-240 90v207q0 7 2 18h238v316Z" />
                    </svg>
                  </span>
                  <span>Privacy</span>
                </a>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-neutral-800/5 hover:text-inherit hover:outline-none focus:bg-neutral-800/5 focus:text-inherit focus:outline-none active:bg-neutral-800/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 dark:[&>svg]:text-gray-400">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M16.5 3.75a1.5 1.5 0 0 1 1.5 1.5v13.5a1.5 1.5 0 0 1-1.5 1.5h-6a1.5 1.5 0 0 1-1.5-1.5V15a.75.75 0 0 0-1.5 0v3.75a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V5.25a3 3 0 0 0-3-3h-6a3 3 0 0 0-3 3V9A.75.75 0 1 0 9 9V5.25a1.5 1.5 0 0 1 1.5-1.5h6ZM5.78 8.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 0 0 0 1.06l3 3a.75.75 0 0 0 1.06-1.06l-1.72-1.72H15a.75.75 0 0 0 0-1.5H4.06l1.72-1.72a.75.75 0 0 0 0-1.06Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Log out</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="absolute bottom-0 h-24 w-full bg-inherit text-center">
            <hr class="mb-6 border-neutral-100 dark:border-white/10" />
            <p>tw-elements.com</p>
          </div>
        </nav>
        <!-- Sidenav -->

        <!-- Content -->
        <div
          class="min-h-screen w-full bg-gray-50 !ps-0 text-center dark:bg-body-dark sm:!ps-60"
          id="content">
          <div class="py-12 text-center">
            <h3 class="my-12 text-[1.75rem] font-medium leading-[1.2]">
              Resize to change the mode
            </h3>
            <div>
              <img
                class="inline-block w-[80%] rounded"
                src="https://mdbcdn.b-cdn.net/img/Photos/Others/img%20(53).webp" />
            </div>
            <button
              id="toggler"
              class="m-12 inline-block rounded bg-neutral-800 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-50 shadow-dark-3 transition duration-150 ease-in-out hover:bg-neutral-700 hover:shadow-dark-2 focus:bg-neutral-700 focus:shadow-dark-2 focus:outline-none focus:ring-0 active:bg-neutral-900 active:shadow-dark-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong sm:hidden"
              data-twe-sidenav-toggle-ref
              data-twe-target="#full-screen-example"
              data-twe-ripple-init
              data-twe-ripple-color="white">
              <span
                class="block [&>svg]:h-4 [&>svg]:w-4 [&>svg]:stroke-white [&>svg]:text-white">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M3 6.75A.75.75 0 0 1 3.75 6h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 6.75ZM3 12a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75A.75.75 0 0 1 3 12Zm0 5.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <!-- Content -->
      </body>

        
            
      import {
        Sidenav,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Sidenav, Ripple });

      const sidenav = document.getElementById("full-screen-example");
      const sidenavInstance = Sidenav.getInstance(sidenav);

      let innerWidth = null;

      const setMode = (e) => {
        // Check necessary for Android devices
        if (window.innerWidth === innerWidth) {
          return;
        }

        innerWidth = window.innerWidth;

        if (window.innerWidth < sidenavInstance.getBreakpoint("sm")) {
          sidenavInstance.changeMode("over");
          sidenavInstance.hide();
        } else {
          sidenavInstance.changeMode("side");
          sidenavInstance.show();
        }
      };

      if (window.innerWidth < sidenavInstance.getBreakpoint("sm")) {
        setMode();
      }

      // Event listeners
      window.addEventListener("resize", setMode);

        
            
      const sidenav = document.getElementById("full-screen-example");
      const sidenavInstance = twe.Sidenav.getInstance(sidenav);

      let innerWidth = null;

      const setMode = (e) => {
        // Check necessary for Android devices
        if (window.innerWidth === innerWidth) {
          return;
        }

        innerWidth = window.innerWidth;

        if (window.innerWidth < sidenavInstance.getBreakpoint("sm")) {
          sidenavInstance.changeMode("over");
          sidenavInstance.hide();
        } else {
          sidenavInstance.changeMode("side");
          sidenavInstance.show();
        }
      };

      if (window.innerWidth < sidenavInstance.getBreakpoint("sm")) {
        setMode();
      }

      // Event listeners
      window.addEventListener("resize", setMode);

Slim side navigation (dark)

Non-expandable slim sidenav with a dark background and custom width

View fullscreen demo

HTML
javascript
umd

ES UMD

        
            
      <body class="dark:bg-body-dark">
        <!-- Sidenav -->
        <nav
          id="full-screen-example"
          class="fixed left-0 top-0 z-[1035] h-screen w-[90px] -translate-x-full overflow-hidden bg-neutral-800 shadow-dark-mild data-[twe-sidenav-hidden='false']:translate-x-0"
          data-twe-sidenav-init
          data-twe-sidenav-color="light"
          data-twe-sidenav-backdrop="false"
          data-twe-sidenav-slim="true"
          data-twe-sidenav-expandable="false"
          data-twe-sidenav-slim-collapsed="true"
          data-twe-sidenav-slim-width="90"
          data-twe-sidenav-content="#content">
          <div class="mt-6 text-center">
            <a
              class="relative inline-block overflow-hidden rounded-full align-bottom"
              data-twe-ripple-init
              href="#">
              <img
                src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(29).webp"
                alt="Avatar"
                class="h-auto max-w-[60px] rounded-full" />
            </a>
          </div>

          <hr class="my-4 border-white/10" />
          <ul
            class="relative m-0 list-none px-[0.2rem]"
            data-twe-sidenav-menu-ref>
            <li class="relative my-4">
              <a
                class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-300 outline-none transition duration-300 ease-linear hover:bg-white/5 hover:outline-none focus:bg-white/5 focus:outline-none active:bg-white/5 active:outline-none data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none"
                data-twe-sidenav-link-ref>
                <span
                  class="mx-auto motion-reduce:transition-none [&>svg]:h-8 [&>svg]:w-8  [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-white group-focus:[&>svg]:text-white group-active:[&>svg]:text-white group-data-[twe-sidenav-state-focus]:[&>svg]:text-white">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="2.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
                  </svg>
                </span>
              </a>
            </li>
            <li class="relative my-4">
              <a
                class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-300 outline-none transition duration-300 ease-linear hover:bg-white/5 hover:outline-none focus:bg-white/5 focus:outline-none active:bg-white/5 active:outline-none data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none"
                data-twe-sidenav-link-ref>
                <span
                  class="mx-auto motion-reduce:transition-none [&>svg]:h-8 [&>svg]:w-8 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-white group-focus:[&>svg]:text-white group-active:[&>svg]:text-white group-data-[twe-sidenav-state-focus]:[&>svg]:text-white">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="2.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                  </svg>
                </span>
              </a>
            </li>
            <li class="relative my-4">
              <a
                class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-300 outline-none transition duration-300 ease-linear hover:bg-white/5 hover:outline-none focus:bg-white/5 focus:outline-none active:bg-white/5 active:outline-none data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none"
                data-twe-sidenav-link-ref>
                <span
                  class="mx-auto motion-reduce:transition-none [&>svg]:h-8 [&>svg]:w-8 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-white group-focus:[&>svg]:text-white group-active:[&>svg]:text-white group-data-[twe-sidenav-state-focus]:[&>svg]:text-white">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="2.5"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                  </svg>
                </span>
              </a>
            </li>
            <li class="relative my-4">
              <a
                class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-300 outline-none transition duration-300 ease-linear hover:bg-white/5 hover:outline-none focus:bg-white/5 focus:outline-none active:bg-white/5 active:outline-none data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none"
                data-twe-sidenav-link-ref>
                <span
                  class="mx-auto motion-reduce:transition-none [&>svg]:h-8 [&>svg]:w-8 [&>svg]:text-gray-400 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-white group-focus:[&>svg]:text-white group-active:[&>svg]:text-white group-data-[twe-sidenav-state-focus]:[&>svg]:text-white">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
                  </svg>
                </span>
              </a>
            </li>
          </ul>
        </nav>
        <!-- Sidenav -->

        <!-- Content -->
        <div id="content" class="h-screen w-screen">
          <div class="relative h-full w-full">
            <img
              class="absolute left-0 top-0 h-full w-full object-cover"
              src="https://tecdn.b-cdn.net/img/Photos/Others/img%20(52).jpg" />
          </div>
          <div
            class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-zinc-700/40 bg-fixed p-6 text-center text-white/80">
            <h1 class="mb-2 mt-56 text-[6rem] font-medium leading-[1.2]">
              Natalie Smith
            </h1>
            <h2 class="mb-2 mt-0 text-[2.8rem] font-medium leading-[1.2]">
              Portfolio
            </h2>
          </div>
        </div>
        <!-- Content -->
      </body>

        
            
      import {
        Sidenav,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Sidenav, Ripple });

      window.addEventListener("load", () => {
        const sidenav = document.getElementById("full-screen-example");
        const sidenavInstance = Sidenav.getInstance(sidenav);

        sidenavInstance.show();
      });

        
            
      window.addEventListener("load", () => {
        const sidenav = document.getElementById("full-screen-example");
        const sidenavInstance = twe.Sidenav.getInstance(sidenav);

        sidenavInstance.show();
      });

TWE Navigation

Navigation template based on TW Elements documentation with the following settings:

Hidden on screens smaller than 1280px
Sidenav toggler added to the Navbar and hidden on screens larger than 1280px
On screens smaller than 1280px sidenav mode changes from side to over.

View fullscreen demo

HTML
javascript
umd

ES UMD

        
            
      <body class="dark:bg-body-dark">
        <!--Main Navigation-->
        <header>
          <!-- Sidenav -->
          <nav
            id="sidenav-1"
            class="fixed left-0 top-0 z-[1035] h-screen w-60 -translate-x-full overflow-hidden bg-zinc-50 shadow-dark-mild dark:bg-neutral-700 xl:data-[twe-sidenav-hidden='false']:translate-x-0"
            data-twe-sidenav-init
            data-twe-sidenav-hidden="false"
            data-twe-sidenav-mode-breakpoint-over="0"
            data-twe-sidenav-mode-breakpoint-side="xl"
            data-twe-sidenav-content="#content"
            data-twe-sidenav-accordion="true">
            <a
              class="mb-3 flex items-center justify-center py-6 outline-none"
              href="#!"
              data-twe-ripple-init
              data-twe-ripple-color="primary">
              <img
                id="te-logo"
                class="me-2 w-6"
                src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.png"
                alt="TE Logo"
                draggable="false" />
              <span>TW Elements</span>
            </a>

            <ul
              class="relative m-0 list-none px-[0.2rem]"
              data-twe-sidenav-menu-ref>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  href="#!"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-700 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M2.25 2.25a.75.75 0 0 0 0 1.5H3v10.5a3 3 0 0 0 3 3h1.21l-1.172 3.513a.75.75 0 0 0 1.424.474l.329-.987h8.418l.33.987a.75.75 0 0 0 1.422-.474l-1.17-3.513H18a3 3 0 0 0 3-3V3.75h.75a.75.75 0 0 0 0-1.5H2.25Zm6.54 15h6.42l.5 1.5H8.29l.5-1.5Zm8.085-8.995a.75.75 0 1 0-.75-1.299 12.81 12.81 0 0 0-3.558 3.05L11.03 8.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 0 0 1.146-.102 11.312 11.312 0 0 1 3.612-3.321Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Webiste traffic</span></a
                >
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-gray-700 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M11.828 2.25c-.916 0-1.699.663-1.85 1.567l-.091.549a.798.798 0 0 1-.517.608 7.45 7.45 0 0 0-.478.198.798.798 0 0 1-.796-.064l-.453-.324a1.875 1.875 0 0 0-2.416.2l-.243.243a1.875 1.875 0 0 0-.2 2.416l.324.453a.798.798 0 0 1 .064.796 7.448 7.448 0 0 0-.198.478.798.798 0 0 1-.608.517l-.55.092a1.875 1.875 0 0 0-1.566 1.849v.344c0 .916.663 1.699 1.567 1.85l.549.091c.281.047.508.25.608.517.06.162.127.321.198.478a.798.798 0 0 1-.064.796l-.324.453a1.875 1.875 0 0 0 .2 2.416l.243.243c.648.648 1.67.733 2.416.2l.453-.324a.798.798 0 0 1 .796-.064c.157.071.316.137.478.198.267.1.47.327.517.608l.092.55c.15.903.932 1.566 1.849 1.566h.344c.916 0 1.699-.663 1.85-1.567l.091-.549a.798.798 0 0 1 .517-.608 7.52 7.52 0 0 0 .478-.198.798.798 0 0 1 .796.064l.453.324a1.875 1.875 0 0 0 2.416-.2l.243-.243c.648-.648.733-1.67.2-2.416l-.324-.453a.798.798 0 0 1-.064-.796c.071-.157.137-.316.198-.478.1-.267.327-.47.608-.517l.55-.091a1.875 1.875 0 0 0 1.566-1.85v-.344c0-.916-.663-1.699-1.567-1.85l-.549-.091a.798.798 0 0 1-.608-.517 7.507 7.507 0 0 0-.198-.478.798.798 0 0 1 .064-.796l.324-.453a1.875 1.875 0 0 0-.2-2.416l-.243-.243a1.875 1.875 0 0 0-2.416-.2l-.453.324a.798.798 0 0 1-.796.064 7.462 7.462 0 0 0-.478-.198.798.798 0 0 1-.517-.608l-.091-.55a1.875 1.875 0 0 0-1.85-1.566h-.344ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Settings</span>
                  <span
                    class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 motion-reduce:transition-none [&>svg]:h-3 [&>svg]:w-3 [&>svg]:stroke-gray-600 [&>svg]:text-gray-600 group-hover:[&>svg]:stroke-blue-600 group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:stroke-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:stroke-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:stroke-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 dark:[&>svg]:stroke-gray-400 dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:stroke-blue-500 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:stroke-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:stroke-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:stroke-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500"
                    data-twe-sidenav-rotate-icon-ref>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
                <ul
                  class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block"
                  data-twe-sidenav-collapse-ref>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none motion-reduce:transition-none dark:text-white dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500"
                      data-twe-sidenav-link-ref
                      >Profile</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none motion-reduce:transition-none dark:text-white dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500"
                      data-twe-sidenav-link-ref
                      >Account</a
                    >
                  </li>
                </ul>
              </li>
              <li class="relative">
                <a
                  class="group flex h-12 cursor-pointer items-center truncate rounded-[5px] px-6 py-4 text-[0.875rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none data-[twe-sidenav-state-active]:text-blue-600 data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500 dark:data-[twe-sidenav-state-active]:text-blue-500"
                  data-twe-sidenav-link-ref>
                  <span
                    class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-700 [&>svg]:transition [&>svg]:duration-300 [&>svg]:ease-linear group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 motion-reduce:[&>svg]:transition-none dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                  <span>Password</span>
                  <span
                    class="absolute end-0 me-[0.8rem] ms-auto transition-transform duration-300 motion-reduce:transition-none [&>svg]:h-3 [&>svg]:w-3 [&>svg]:stroke-gray-600 [&>svg]:text-gray-600 group-hover:[&>svg]:stroke-blue-600 group-hover:[&>svg]:text-blue-600 group-focus:[&>svg]:stroke-blue-600 group-focus:[&>svg]:text-blue-600 group-active:[&>svg]:stroke-blue-600 group-active:[&>svg]:text-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:stroke-blue-600 group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-600 dark:[&>svg]:stroke-gray-400 dark:[&>svg]:text-gray-400 dark:group-hover:[&>svg]:stroke-blue-500 dark:group-hover:[&>svg]:text-blue-500 dark:group-focus:[&>svg]:stroke-blue-500 dark:group-focus:[&>svg]:text-blue-500 dark:group-active:[&>svg]:stroke-blue-500 dark:group-active:[&>svg]:text-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:stroke-blue-500 dark:group-data-[twe-sidenav-state-active]:[&>svg]:text-blue-500"
                    data-twe-sidenav-rotate-icon-ref>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        fill-rule="evenodd"
                        d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z"
                        clip-rule="evenodd" />
                    </svg>
                  </span>
                </a>
                <ul
                  class="show !visible relative m-0 hidden list-none p-0 data-[twe-collapse-show]:block"
                  data-twe-sidenav-collapse-ref>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none motion-reduce:transition-none dark:text-white dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500"
                      data-twe-sidenav-link-ref
                      >Request password</a
                    >
                  </li>
                  <li class="relative">
                    <a
                      class="flex h-6 cursor-pointer items-center truncate rounded-[5px] py-4 pe-6 ps-[3.4rem] text-[0.78rem] text-gray-700 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-blue-600 hover:outline-none focus:bg-primary/5 focus:text-blue-600 focus:outline-none active:bg-primary/5 active:text-blue-600 active:outline-none motion-reduce:transition-none dark:text-white dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-500"
                      data-twe-sidenav-link-ref
                      >Reset password</a
                    >
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
          <!-- Sidenav -->

          <!-- Navbar -->
          <nav
            id="main-navbar"
            class="fixed left-0 right-0 top-0 flex w-full flex-nowrap items-center justify-between bg-zinc-50 py-[0.6rem] shadow-dark-mild dark:bg-neutral-700 lg:flex-wrap lg:justify-start xl:ps-60"
            data-twe-navbar-ref>
            <!-- Container wrapper -->
            <div
              class="flex w-full flex-wrap items-center justify-between px-4">
              <!-- Toggler -->
              <button
                data-twe-sidenav-toggle-ref
                data-twe-target="#sidenav-1"
                class="block border-0 bg-transparent px-2.5 text-surface hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-300 xl:hidden"
                aria-controls="#sidenav-1"
                aria-haspopup="true">
                <span
                  class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor">
                    <path
                      fill-rule="evenodd"
                      d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
                      clip-rule="evenodd" />
                  </svg>
                </span>
              </button>

              <!-- Search form -->
              <form
                class="relative me-auto ms-4 flex flex-wrap items-stretch xl:mx-0">
                <input
                  autocomplete="off"
                  type="search"
                  class="relative m-0 inline-block w-[1%] min-w-[225px] flex-auto rounded border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-1.5 text-base font-normal text-gray-700 transition duration-300 ease-in-out focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/10 dark:bg-body-dark dark:text-neutral-300 dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill"
                  placeholder='Search (ctrl + "/" to focus)' />
                <span
                  class="flex items-center whitespace-nowrap rounded px-3 py-1.5 text-center text-base font-normal text-gray-600 dark:text-white [&>svg]:w-4"
                  id="basic-addon2">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="3"
                    stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                  </svg>
                </span>
              </form>

              <!-- Right links -->
              <ul class="relative flex items-center">
                <!-- Notification dropdown -->
                <li class="relative" data-twe-dropdown-ref>
                  <a
                    class="me-4 flex items-center text-gray-500 hover:text-gray-700 focus:text-gray-700"
                    href="#"
                    id="navbarDropdownMenuLink"
                    role="button"
                    data-twe-dropdown-toggle-ref
                    aria-expanded="false">
                    <span
                      class="dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 [&>svg]:w-4">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor">
                        <path
                          fill-rule="evenodd"
                          d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z"
                          clip-rule="evenodd" />
                      </svg>
                    </span>
                    <span
                      class="absolute -mt-2.5 ms-2.5 rounded-full bg-red-600 px-1.5 py-[1px] text-[0.6rem] text-white"
                      >1</span
                    >
                  </a>
                  <ul
                    class="absolute left-auto right-0 z-[1000] float-left m-0 mt-1 hidden min-w-[10rem] list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
                    aria-labelledby="navbarDropdownMenuLink"
                    data-twe-dropdown-menu-ref>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref
                        >Some news</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref
                        >Another news</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref
                        >Something else here</a
                      >
                    </li>
                  </ul>
                </li>

                <!-- Icon -->
                <li class="me-4">
                  <a href="#">
                    <span
                      class="text-gray-500 hover:text-gray-700 focus:text-gray-700 dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 [&>svg]:w-4">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 -960 960 960">
                        <path
                          d="m247-904 57-56 343 343q23 23 23 57t-23 57L457-313q-23 23-57 23t-57-23L153-503q-23-23-23-57t23-57l190-191-96-96Zm153 153L209-560h382L400-751Zm360 471q-33 0-56.5-23.5T680-360q0-21 12.5-45t27.5-45q9-12 19-25t21-25q11 12 21 25t19 25q15 21 27.5 45t12.5 45q0 33-23.5 56.5T760-280ZM80 0v-160h800V0H80Z" />
                      </svg>
                    </span>
                  </a>
                </li>
                <!-- Icon -->
                <li class="me-4">
                  <a href="#">
                    <span
                      class="text-gray-500 hover:text-gray-700 focus:text-gray-700 dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 [&>svg]:w-4">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        viewBox="0 0 496 512">
                        <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
                        <path
                          d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
                      </svg>
                    </span>
                  </a>
                </li>

                <!-- Icon dropdown -->
                <li class="relative" data-twe-dropdown-ref>
                  <a
                    class="me-4 flex items-center text-gray-500 hover:text-gray-700 focus:text-gray-700"
                    href="#"
                    id="navbarDropdown"
                    role="button"
                    data-twe-dropdown-toggle-ref
                    aria-expanded="false">
                    <span
                      class="relative inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
                      <span
                        class="inline-block h-[11px] w-4 content-[''] [background-position:-36px_-26px_!important] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px]"></span>
                    </span>
                  </a>
                  <ul
                    class="absolute left-auto right-0 z-[1000] float-left m-0 mt-1 hidden min-w-[10rem] list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
                    aria-labelledby="navbarDropdown"
                    data-twe-dropdown-menu-ref>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref>
                        <span
                          class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
                          <span
                            class="inline-block h-[11px] w-4 content-[''] [background-position:-36px_-26px_!important] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px]"></span>
                        </span>
                        <span class="me-4">English</span>
                        <span
                          class="inline-block text-success-600 dark:text-success-500 [&>svg]:h-3.5 [&>svg]:w-3.5">
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke-width="2.5"
                            stroke="currentColor">
                            <path
                              stroke-linecap="round"
                              stroke-linejoin="round"
                              d="m4.5 12.75 6 6 9-13.5" />
                          </svg>
                        </span>
                      </a>
                    </li>
                    <li>
                      <hr
                        class="my-2 border-neutral-100 dark:border-white/10" />
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref>
                        <span
                          class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
                          <span
                            class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:-72px_-572px_!important]"></span>
                        </span>
                        Polski</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref>
                        <span
                          class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
                          <span
                            class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:0px_-1196px_!important]"></span>
                        </span>
                        中文</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref>
                        <span
                          class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
                          <span
                            class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:-36px_-910px_!important]"></span>
                        </span>
                        日本語</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref>
                        <span
                          class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
                          <span
                            class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:0px_-1430px_!important]"></span>
                        </span>
                        Deutsch</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref>
                        <span
                          class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
                          <span
                            class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:0px_-1976px_!important]"></span>
                        </span>
                        Français</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref>
                        <span
                          class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
                          <span
                            class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:-0px_-1742px_!important]"></span>
                        </span>
                        Español</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref>
                        <span
                          class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
                          <span
                            class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:-72px_-884px_!important]"></span>
                        </span>
                        Русский</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref>
                        <span
                          class="relative me-2 inline-block h-[11px] w-4 overflow-hidden leading-[11px] decoration-inherit">
                          <span
                            class="inline-block h-[11px] w-4 content-[''] [background:url(https://tecdn.b-cdn.net/img/svg/flags.png)_no-repeat_-108px_-1976px] [background-position:-72px_-702px_!important]"></span>
                        </span>
                        Português</a
                      >
                    </li>
                  </ul>
                </li>

                <!-- Avatar -->
                <li class="relative" data-twe-dropdown-ref>
                  <a
                    class="hidden-arrow flex items-center whitespace-nowrap transition duration-150 ease-in-out motion-reduce:transition-none"
                    href="#"
                    id="navbarDropdownMenuLink"
                    role="button"
                    data-twe-dropdown-toggle-ref
                    aria-expanded="false">
                    <img
                      src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img (31).webp"
                      class="rounded-full"
                      style="height: 22px; width: 22px"
                      alt="Avatar"
                      loading="lazy" />
                  </a>
                  <ul
                    class="absolute left-auto right-0 z-[1000] float-left m-0 mt-1 hidden min-w-[10rem] list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
                    aria-labelledby="dropdownMenuButton2"
                    data-twe-dropdown-menu-ref>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref
                        >My profile</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref
                        >Settings</a
                      >
                    </li>
                    <li>
                      <a
                        class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
                        href="#"
                        data-twe-dropdown-item-ref
                        >Logout</a
                      >
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
            <!-- Container wrapper -->
          </nav>
          <!-- Navbar -->
        </header>
        <!--Main Navigation-->

        <!--Main layout-->
        <main style="margin-top: 58px">
          <div class="container"></div>
        </main>
        <!--Main layout-->

        <!--Footer-->
        <footer></footer>
        <!--Footer-->
      </body>

        
            
      import {
        Sidenav,
        Dropdown,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Sidenav, Dropdown, Ripple });

      const sidenav2 = document.getElementById("sidenav-1");
      const sidenavInstance2 = Sidenav.getInstance(sidenav2);

      let innerWidth2 = null;

      const setMode2 = (e) => {
        // Check necessary for Android devices
        if (window.innerWidth === innerWidth2) {
          return;
        }

        innerWidth2 = window.innerWidth;

        if (window.innerWidth < sidenavInstance2.getBreakpoint("xl")) {
          sidenavInstance2.changeMode("over");
          sidenavInstance2.hide();
        } else {
          sidenavInstance2.changeMode("side");
          sidenavInstance2.show();
        }
      };

      if (window.innerWidth < sidenavInstance2.getBreakpoint("sm")) {
        setMode2();
      }

      // Event listeners
      window.addEventListener("resize", setMode2);

        
            
      const sidenav2 = document.getElementById("sidenav-1");
      const sidenavInstance2 = twe.Sidenav.getInstance(sidenav2);

      let innerWidth2 = null;

      const setMode2 = (e) => {
        // Check necessary for Android devices
        if (window.innerWidth === innerWidth2) {
          return;
        }

        innerWidth2 = window.innerWidth;

        if (window.innerWidth < sidenavInstance2.getBreakpoint("xl")) {
          sidenavInstance2.changeMode("over");
          sidenavInstance2.hide();
        } else {
          sidenavInstance2.changeMode("side");
          sidenavInstance2.show();
        }
      };

      if (window.innerWidth < sidenavInstance2.getBreakpoint("sm")) {
        setMode2();
      }

      // Event listeners
      window.addEventListener("resize", setMode2);

        
            
      <!-- Sidenav -->
      <nav
        id="sidenav-8"
        class="fixed left-0 top-0 z-[1035] h-full w-60 -translate-x-full overflow-hidden bg-white shadow-dark-mild data-[twe-sidenav-hidden='false']:translate-x-0 dark:bg-surface-dark"
        data-twe-sidenav-init
        data-twe-sidenav-hidden="false"
        data-twe-sidenav-accordion="true">
        <a
          class="mb-3 flex items-center justify-center border-b-2 border-solid border-neutral-100 py-6 outline-none dark:border-white/10"
          href="#!"
          data-twe-ripple-init
          data-twe-ripple-color="primary">
          <img
            id="te-logo"
            class="me-2 w-6"
            src="https://tecdn.b-cdn.net/img/logo/te-transparent-noshadows.png"
            alt="TE Logo"
            draggable="false" />
          <span>TW elements</span>
        </a>
        <ul
          class="relative m-0 list-none px-[0.2rem] pb-12"
          data-twe-sidenav-menu-ref>
          <li class="relative">
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" />
                  <path
                    d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" />
                </svg>
              </span>
              <span>Overview</span>
            </a>
          </li>
          <li class="relative pt-4">
            <span
              class="px-6 py-4 text-[0.6rem] font-bold uppercase text-gray-600 dark:text-gray-400"
              >Create</span
            >
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M12 4.5v15m7.5-7.5h-15" />
                </svg>
              </span>
              <span>Project</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span class="me-4 [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M12 4.5v15m7.5-7.5h-15" />
                </svg>
              </span>
              <span>Database</span>
            </a>
          </li>
          <li class="relative pt-4">
            <span
              class="px-6 py-4 text-[0.6rem] font-bold uppercase text-gray-600 dark:text-gray-400"
              >Manage</span
            >
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    d="M12.378 1.602a.75.75 0 00-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03zM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 00.372-.648V7.93zM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 00.372.648l8.628 5.033z" />
                </svg>
              </span>
              <span>Projects</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    d="M21 6.375c0 2.692-4.03 4.875-9 4.875S3 9.067 3 6.375 7.03 1.5 12 1.5s9 2.183 9 4.875z" />
                  <path
                    d="M12 12.75c2.685 0 5.19-.586 7.078-1.609a8.283 8.283 0 001.897-1.384c.016.121.025.244.025.368C21 12.817 16.97 15 12 15s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.285 8.285 0 001.897 1.384C6.809 12.164 9.315 12.75 12 12.75z" />
                  <path
                    d="M12 16.5c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 001.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 001.897 1.384C6.809 15.914 9.315 16.5 12 16.5z" />
                  <path
                    d="M12 20.25c2.685 0 5.19-.586 7.078-1.609a8.282 8.282 0 001.897-1.384c.016.121.025.244.025.368 0 2.692-4.03 4.875-9 4.875s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.284 8.284 0 001.897 1.384C6.809 19.664 9.315 20.25 12 20.25z" />
                </svg>
              </span>
              <span>Databases</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75H12a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Custom domains</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:fill-gray-400 dark:[&>svg]:fill-gray-300">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm14.25 6a.75.75 0 0 1-.22.53l-2.25 2.25a.75.75 0 1 1-1.06-1.06L15.44 12l-1.72-1.72a.75.75 0 1 1 1.06-1.06l2.25 2.25c.141.14.22.331.22.53Zm-10.28-.53a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06L8.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-2.25 2.25Z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Repositories</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M8.25 6.75a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0zM15.75 9.75a3 3 0 116 0 3 3 0 01-6 0zM2.25 9.75a3 3 0 116 0 3 3 0 01-6 0zM6.31 15.117A6.745 6.745 0 0112 12a6.745 6.745 0 016.709 7.498.75.75 0 01-.372.568A12.696 12.696 0 0112 21.75c-2.305 0-4.47-.612-6.337-1.684a.75.75 0 01-.372-.568 6.787 6.787 0 011.019-4.38z"
                    clip-rule="evenodd" />
                  <path
                    d="M5.082 14.254a8.287 8.287 0 00-1.308 5.135 9.687 9.687 0 01-1.764-.44l-.115-.04a.563.563 0 01-.373-.487l-.01-.121a3.75 3.75 0 013.57-4.047zM20.226 19.389a8.287 8.287 0 00-1.308-5.135 3.75 3.75 0 013.57 4.047l-.01.121a.563.563 0 01-.373.486l-.115.04c-.567.2-1.156.349-1.764.441z" />
                </svg>
              </span>
              <span>Team</span>
            </a>
          </li>
          <li class="relative pt-4">
            <span
              class="px-6 py-4 text-[0.6rem] font-bold uppercase text-gray-600 dark:text-gray-400"
              >Maintain</span
            >
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
                    clip-rule="evenodd" />
                  <path
                    fill-rule="evenodd"
                    d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Analytics</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-3.183a.75.75 0 100 1.5h4.992a.75.75 0 00.75-.75V4.356a.75.75 0 00-1.5 0v3.18l-1.9-1.9A9 9 0 003.306 9.67a.75.75 0 101.45.388zm15.408 3.352a.75.75 0 00-.919.53 7.5 7.5 0 01-12.548 3.364l-1.902-1.903h3.183a.75.75 0 000-1.5H2.984a.75.75 0 00-.75.75v4.992a.75.75 0 001.5 0v-3.18l1.9 1.9a9 9 0 0015.059-4.035.75.75 0 00-.53-.918z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Backups</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12.516 2.17a.75.75 0 00-1.032 0 11.209 11.209 0 01-7.877 3.08.75.75 0 00-.722.515A12.74 12.74 0 002.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 00.374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 00-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08zm3.094 8.016a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Security</span>
            </a>
          </li>
          <li class="relative pt-4">
            <span
              class="px-6 py-4 text-[0.6rem] font-bold uppercase text-gray-600 dark:text-gray-400"
              >Admin</span
            >
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path d="M12 7.5a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z" />
                  <path
                    fill-rule="evenodd"
                    d="M1.5 4.875C1.5 3.839 2.34 3 3.375 3h17.25c1.035 0 1.875.84 1.875 1.875v9.75c0 1.036-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 011.5 14.625v-9.75zM8.25 9.75a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0zM18.75 9a.75.75 0 00-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 00.75-.75V9.75a.75.75 0 00-.75-.75h-.008zM4.5 9.75A.75.75 0 015.25 9h.008a.75.75 0 01.75.75v.008a.75.75 0 01-.75.75H5.25a.75.75 0 01-.75-.75V9.75z"
                    clip-rule="evenodd" />
                  <path
                    d="M2.25 18a.75.75 0 000 1.5c5.4 0 10.63.722 15.6 2.075 1.19.324 2.4-.558 2.4-1.82V18.75a.75.75 0 00-.75-.75H2.25z" />
                </svg>
              </span>
              <span>Billing</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0016.5 9h-1.875a1.875 1.875 0 01-1.875-1.875V5.25A3.75 3.75 0 009 1.5H5.625zM7.5 15a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5A.75.75 0 017.5 15zm.75 2.25a.75.75 0 000 1.5H12a.75.75 0 000-1.5H8.25z"
                    clip-rule="evenodd" />
                  <path
                    d="M12.971 1.816A5.23 5.23 0 0114.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 013.434 1.279 9.768 9.768 0 00-6.963-6.963z" />
                </svg>
              </span>
              <span>License</span>
            </a>
          </li>
          <li class="relative pt-4">
            <span
              class="px-6 py-4 text-[0.6rem] font-bold uppercase text-gray-600 dark:text-gray-400"
              >Tools</span
            >
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M12 1.5a.75.75 0 01.75.75V4.5a.75.75 0 01-1.5 0V2.25A.75.75 0 0112 1.5zM5.636 4.136a.75.75 0 011.06 0l1.592 1.591a.75.75 0 01-1.061 1.06l-1.591-1.59a.75.75 0 010-1.061zm12.728 0a.75.75 0 010 1.06l-1.591 1.592a.75.75 0 01-1.06-1.061l1.59-1.591a.75.75 0 011.061 0zm-6.816 4.496a.75.75 0 01.82.311l5.228 7.917a.75.75 0 01-.777 1.148l-2.097-.43 1.045 3.9a.75.75 0 01-1.45.388l-1.044-3.899-1.601 1.42a.75.75 0 01-1.247-.606l.569-9.47a.75.75 0 01.554-.68zM3 10.5a.75.75 0 01.75-.75H6a.75.75 0 010 1.5H3.75A.75.75 0 013 10.5zm14.25 0a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H18a.75.75 0 01-.75-.75zm-8.962 3.712a.75.75 0 010 1.061l-1.591 1.591a.75.75 0 11-1.061-1.06l1.591-1.592a.75.75 0 011.06 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Drag & drop builder</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M14.447 3.027a.75.75 0 01.527.92l-4.5 16.5a.75.75 0 01-1.448-.394l4.5-16.5a.75.75 0 01.921-.526zM16.72 6.22a.75.75 0 011.06 0l5.25 5.25a.75.75 0 010 1.06l-5.25 5.25a.75.75 0 11-1.06-1.06L21.44 12l-4.72-4.72a.75.75 0 010-1.06zm-9.44 0a.75.75 0 010 1.06L2.56 12l4.72 4.72a.75.75 0 11-1.06 1.06L.97 12.53a.75.75 0 010-1.06l5.25-5.25a.75.75 0 011.06 0z"
                    clip-rule="evenodd" />
                </svg>
              </span>
              <span>Online code editor</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:text-gray-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    d="M16.5 6a3 3 0 00-3-3H6a3 3 0 00-3 3v7.5a3 3 0 003 3v-6A4.5 4.5 0 0110.5 6h6z" />
                  <path
                    d="M18 7.5a3 3 0 013 3V18a3 3 0 01-3 3h-7.5a3 3 0 01-3-3v-7.5a3 3 0 013-3H18z" />
                </svg>
              </span>
              <span>SFTP</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:fill-gray-400 dark:[&>svg]:fill-gray-300">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                  <!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
                  <path
                    d="M487.1 425c-1.4-11.2-19-23.1-28.2-31.9-5.1-5-29-23.1-30.4-29.9-1.4-6.6 9.7-21.5 13.3-28.9 5.1-10.7 8.8-23.7 11.3-32.6 18.8-66.1 20.7-156.9-6.2-211.2-10.2-20.6-38.6-49-56.4-62.5-42-31.7-119.6-35.3-170.1-16.6-14.1 5.2-27.8 9.8-40.1 17.1-33.1 19.4-68.3 32.5-78.1 71.6-24.2 10.8-31.5 41.8-30.3 77.8.2 7 4.1 15.8 2.7 22.4-.7 3.3-5.2 7.6-6.1 9.8-11.6 27.7-2.3 64 11.1 83.7 8.1 11.9 21.5 22.4 39.2 25.2.7 10.6 3.3 19.7 8.2 30.4 3.1 6.8 14.7 19 10.4 27.7-2.2 4.4-21 13.8-27.3 17.6C89 407.2 73.7 415 54.2 429c-12.6 9-32.3 10.2-29.2 31.1 2.1 14.1 10.1 31.6 14.7 45.8.7 2 1.4 4.1 2.1 6h422c4.9-15.3 9.7-30.9 14.6-47.2 3.4-11.4 10.2-27.8 8.7-39.7zM205.9 33.7c1.8-.5 3.4.7 4.9 2.4-.2 5.2-5.4 5.1-8.9 6.8-5.4 6.7-13.4 9.8-20 17.2-6.8 7.5-14.4 27.7-23.4 30-4.5 1.1-9.7-.8-13.6-.5-10.4.7-17.7 6-28.3 7.5 13.6-29.9 56.1-54 89.3-63.4zm-104.8 93.6c13.5-14.9 32.1-24.1 54.8-25.9 11.7 29.7-8.4 65-.9 97.6 2.3 9.9 10.2 25.4-2.4 25.7.3-28.3-34.8-46.3-61.3-29.6-1.8-21.5-4.9-51.7 9.8-67.8zm36.7 200.2c-1-4.1-2.7-12.9-2.3-15.1 1.6-8.7 17.1-12.5 11-24.7-11.3-.1-13.8 10.2-24.1 11.3-26.7 2.6-45.6-35.4-44.4-58.4 1-19.5 17.6-38.2 40.1-35.8 16 1.8 21.4 19.2 24.5 34.7 9.2.5 22.5-.4 26.9-7.6-.6-17.5-8.8-31.6-8.2-47.7 1-30.3 17.5-57.6 4.8-87.4 13.6-30.9 53.5-55.3 83.1-70 36.6-18.3 94.9-3.7 129.3 15.8 19.7 11.1 34.4 32.7 48.3 50.7-19.5-5.8-36.1 4.2-33.1 20.3 16.3-14.9 44.2-.2 52.5 16.4 7.9 15.8 7.8 39.3 9 62.8 2.9 57-10.4 115.9-39.1 157.1-7.7 11-14.1 23-24.9 30.6-26 18.2-65.4 34.7-99.2 23.4-44.7-15-65-44.8-89.5-78.8.7 18.7 13.8 34.1 26.8 48.4 11.3 12.5 25 26.6 39.7 32.4-12.3-2.9-31.1-3.8-36.2 7.2-28.6-1.9-55.1-4.8-68.7-24.2-10.6-15.4-21.4-41.4-26.3-61.4zm222 124.1c4.1-3 11.1-2.9 17.4-3.6-5.4-2.7-13-3.7-19.3-2.2-.1-4.2-2-6.8-3.2-10.2 10.6-3.8 35.5-28.5 49.6-20.3 6.7 3.9 9.5 26.2 10.1 37 .4 9-.8 18-4.5 22.8-18.8-.6-35.8-2.8-50.7-7 .9-6.1-1-12.1.6-16.5zm-17.2-20c-16.8.8-26-1.2-38.3-10.8.2-.8 1.4-.5 1.5-1.4 18 8 40.8-3.3 59-4.9-7.9 5.1-14.6 11.6-22.2 17.1zm-12.1 33.2c-1.6-9.4-3.5-12-2.8-20.2 25-16.6 29.7 28.6 2.8 20.2zM226 438.6c-11.6-.7-48.1-14-38.5-23.7 9.4 6.5 27.5 4.9 41.3 7.3.8 4.4-2.8 10.2-2.8 16.4zM57.7 497.1c-4.3-12.7-9.2-25.1-14.8-36.9 30.8-23.8 65.3-48.9 102.2-63.5 2.8-1.1 23.2 25.4 26.2 27.6 16.5 11.7 37 21 56.2 30.2 1.2 8.8 3.9 20.2 8.7 35.5.7 2.3 1.4 4.7 2.2 7.2H57.7zm240.6 5.7h-.8c.3-.2.5-.4.8-.5v.5zm7.5-5.7c2.1-1.4 4.3-2.8 6.4-4.3 1.1 1.4 2.2 2.8 3.2 4.3h-9.6zm15.1-24.7c-10.8 7.3-20.6 18.3-33.3 25.2-6 3.3-27 11.7-33.4 10.2-3.6-.8-3.9-5.3-5.4-9.5-3.1-9-10.1-23.4-10.8-37-.8-17.2-2.5-46 16-42.4 14.9 2.9 32.3 9.7 43.9 16.1 7.1 3.9 11.1 8.6 21.9 9.5-.1 1.4-.1 2.8-.2 4.3-5.9 3.9-15.3 3.8-21.8 7.1 9.5.4 17 2.7 23.5 5.9-.1 3.4-.3 7-.4 10.6zm53.4 24.7h-14c-.1-3.2-2.8-5.8-6.1-5.8s-5.9 2.6-6.1 5.8h-17.4c-2.8-4.4-5.7-8.6-8.9-12.5 2.1-2.2 4-4.7 6-6.9 9 3.7 14.8-4.9 21.7-4.2 7.9.8 14.2 11.7 25.4 11l-.6 12.6zm8.7 0c.2-4 .4-7.8.6-11.5 15.6-7.3 29 1.3 35.7 11.5H383zm83.4-37c-2.3 11.2-5.8 24-9.9 37.1-.2-.1-.4-.1-.6-.1H428c.6-1.1 1.2-2.2 1.9-3.3-2.6-6.1-9-8.7-10.9-15.5 12.1-22.7 6.5-93.4-24.2-78.5 4.3-6.3 15.6-11.5 20.8-19.3 13 10.4 20.8 20.3 33.2 31.4 6.8 6 20 13.3 21.4 23.1.8 5.5-2.6 18.9-3.8 25.1zM222.2 130.5c5.4-14.9 27.2-34.7 45-32 7.7 1.2 18 8.2 12.2 17.7-30.2-7-45.2 12.6-54.4 33.1-8.1-2-4.9-13.1-2.8-18.8zm184.1 63.1c8.2-3.6 22.4-.7 29.6-5.3-4.2-11.5-10.3-21.4-9.3-37.7.5 0 1 0 1.4.1 6.8 14.2 12.7 29.2 21.4 41.7-5.7 13.5-43.6 25.4-43.1 1.2zm20.4-43zm-117.2 45.7c-6.8-10.9-19-32.5-14.5-45.3 6.5 11.9 8.6 24.4 17.8 33.3 4.1 4 12.2 9 8.2 20.2-.9 2.7-7.8 8.6-11.7 9.7-14.4 4.3-47.9.9-36.6-17.1 11.9.7 27.9 7.8 36.8-.8zm27.3 70c3.8 6.6 1.4 18.7 12.1 20.6 20.2 3.4 43.6-12.3 58.1-17.8 9-15.2-.8-20.7-8.9-30.5-16.6-20-38.8-44.8-38-74.7 6.7-4.9 7.3 7.4 8.2 9.7 8.7 20.3 30.4 46.2 46.3 63.5 3.9 4.3 10.3 8.4 11 11.2 2.1 8.2-5.4 18-4.5 23.5-21.7 13.9-45.8 29.1-81.4 25.6-7.4-6.7-10.3-21.4-2.9-31.1zm-201.3-9.2c-6.8-3.9-8.4-21-16.4-21.4-11.4-.7-9.3 22.2-9.3 35.5-7.8-7.1-9.2-29.1-3.5-40.3-6.6-3.2-9.5 3.6-13.1 5.9 4.7-34.1 49.8-15.8 42.3 20.3zm299.6 28.8c-10.1 19.2-24.4 40.4-54 41-.6-6.2-1.1-15.6 0-19.4 22.7-2.2 36.6-13.7 54-21.6zm-141.9 12.4c18.9 9.9 53.6 11 79.3 10.2 1.4 5.6 1.3 12.6 1.4 19.4-33 1.8-72-6.4-80.7-29.6zm92.2 46.7c-1.7 4.3-5.3 9.3-9.8 11.1-12.1 4.9-45.6 8.7-62.4-.3-10.7-5.7-17.5-18.5-23.4-26-2.8-3.6-16.9-12.9-.2-12.9 13.1 32.7 58 29 95.8 28.1z" />
                </svg>
              </span>
              <span>Jenkins</span>
            </a>
          </li>
          <li class="relative">
            <a
              class="flex cursor-pointer items-center truncate rounded-[5px] px-6 py-[0.45rem] text-[0.85rem] text-gray-600 outline-none transition duration-300 ease-linear hover:bg-primary/5 hover:text-inherit hover:outline-none focus:bg-primary/5 focus:text-inherit focus:outline-none active:bg-primary/5 active:text-inherit active:outline-none data-[twe-sidenav-state-active]:text-inherit data-[twe-sidenav-state-focus]:outline-none motion-reduce:transition-none dark:text-white"
              data-twe-sidenav-link-ref>
              <span
                class="me-4 [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:fill-gray-400 dark:[&>svg]:fill-gray-300">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                  <!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
                  <path
                    d="M503.5 204.6L502.8 202.8L433.1 21.02C431.7 17.45 429.2 14.43 425.9 12.38C423.5 10.83 420.8 9.865 417.9 9.57C415 9.275 412.2 9.653 409.5 10.68C406.8 11.7 404.4 13.34 402.4 15.46C400.5 17.58 399.1 20.13 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.13 111.5 17.59 109.6 15.47C107.6 13.35 105.2 11.72 102.5 10.7C99.86 9.675 96.98 9.295 94.12 9.587C91.26 9.878 88.51 10.83 86.08 12.38C82.84 14.43 80.33 17.45 78.92 21.02L9.267 202.8L8.543 204.6C-1.484 230.8-2.72 259.6 5.023 286.6C12.77 313.5 29.07 337.3 51.47 354.2L51.74 354.4L52.33 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z" />
                </svg>
              </span>
              <span>GitLab</span>
            </a>
          </li>
        </ul>
      </nav>
      <!-- Sidenav -->

      <!-- Toggler -->
      <button
        class="mt-10 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        data-twe-sidenav-toggle-ref
        data-twe-target="#sidenav-8"
        aria-controls="#sidenav-8"
        aria-haspopup="true">
        <span class="block [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-white">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
              clip-rule="evenodd" />
          </svg>
        </span>
      </button>
      <!-- Toggler -->

        
            
      // Initialization for ES Users
      import {
        Sidenav,
        Ripple,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Sidenav, Ripple });

Name	Type	Default	Description
`sidenavAccordion`	boolean	`false`	Enables accordion behavior in a navigation container
`sidenavBackdrop`	boolean	`true`	Adds/removes a backdrop in an over mode
`sidenavBackdropClass`	string	`-`	Adds a custom class to a backdrop
`sidenavBreakpointSm`	number	`640`	Sets sm breakpoint value.
`sidenavBreakpointMd`	number	`768`	Sets md breakpoint value.
`sidenavBreakpointLg`	number	`1024`	Sets lg breakpoint value.
`sidenavBreakpointXl`	number	`1280`	Sets xl breakpoint value.
`sidenavBreakpoint2xl`	number	`1536`	Sets 2xl breakpoint value.
`sidenavCloseOnEsc`	boolean	`true`	Closes a side drawer on ESC key (only when toggler is visible)
`sidenavColor`	string	`"primary"`	Changes a color of ripple effect
`sidenavContent`	string	`-`	Selector for a content to which a component will add paddings/margins in push/side modes
`sidenavExpandable`	boolean	`true`	Allows to expand the sidenav
`sidenavExpandOnHover`	boolean	`false`	Expands/collapses slim mode on mouseover / mouseleave
`sidenavFocusTrap`	boolean	`true`	Allows to keep the focus in a sidenav
`sidenavHidden`	boolean	`true`	Initializes navigation outside a viewport
`sidenavMode`	string	`"over"`	Sets position mode - available options: over, side, push
`sidenavModeBreakpointOver`	string \| number	`-`	Makes the sidenav check if it should change it's mode to "over" after init. I.e. `data-twe-sidenav-mode-breakpoint-over="sm"`
`sidenavModeBreakpointSide`	string \| number	`-`	Makes the sidenav check if it should change it's mode to "side" after init. I.e. `data-twe-sidenav-mode-breakpoint-side="1000"`
`sidenavModeBreakpointPush`	string \| number	`-`	Makes the sidenav check if it should change it's mode to "push" after init. I.e. `data-twe-sidenav-mode-breakpoint-push="0"`
`sidenavScrollContainer`	string	`-`	Selector for a scrollable container inside a side drawer
`sidenavSlim`	boolean	`false`	Enables a slim mode
`sidenavSlimCollapsed`	boolean	`false`	Initializes a component in a slim mode
`sidenavSlimWidth`	number	`77`	A component's width in a slim mode (pixels)
`sidenavPosition`	string	`"fixed"`	Sets CSS position - accepted values: fixed, absolute
`sidenavRight`	boolean	`false`	Initializes sidenav on a right side
`sidenavTransitionDuration`	number	`300`	Sets a length of transitions (in milliseconds)
`sidenavWidth`	number	`240`	A component's width (pixels)

Method	Description	Example
`changeMode`	Changes a position mode (options: over, side, push).	`sidenavInstance.changeMode('push')`
`dispose`	Removes twe.Sidenav instance.	`sidenavInstance.dispose()`
`getBreakpoint`	Returns default tailwind breakpoint value, i.e. `sidenavInstance.getBreakpoint("xl")` will return value `1280`.	`sidenavInstance.getBreakpoint("xl")`
`getInstance`	Static method which allows you to get the sidenav instance associated to a DOM element.	`Sidenav.getInstance(sidenav)`
`getOrCreateInstance`	Static method which returns the sidenav instance associated to a DOM element or create a new one in case it wasn't initialized.	`Sidenav.getOrCreateInstance(sidenav)`
`hide`	Hides a navigation drawer.	`sidenavInstance.hide()`
`show`	Shows a navigation drawer.	`sidenavInstance.show()`
`toggle`	Manually toggles a component.	`sidenavInstance.toggle()`
`toggleSlim`	Manually toggles a slim state.	`sidenavInstance.toggleSlim()`
`update`	Updates a component.	`sidenavInstance.update({ sidenavMode: 'side' })`

Event type	Description
`show.twe.sidenav`	Emitted when a component has been toggled
`shown.twe.sidenav`	Emitted once a component is shown (after transition)
`hide.twe.sidenav`	Emitted when a component has been toggled
`hidden.twe.sidenav`	Emitted once a component is hidden (after transition)
`expand.twe.sidenav`	Emitted when a slim mode has been toggled
`expanded.twe.sidenav`	Emitted once a component has expanded from a slim mode (after transition)
`collapse.twe.sidenav`	Emitted when a slim mode has been toggled
`collapsed.twe.sidenav`	Emitted once a component has collapsed into a slim mode (after transition)
`update.twe.sidenav`	Emitted whenever a content's offset should be updated (push/side mode). You can access the suggested values by `event.padding` and `event.margin properties`

Sidenav

Tailwind CSS Sidenav / Sidebar

Basic example

Positioning

Slim

Accordion

Groups

Right

Full-screen examples

Basic side navigation

Side navigation with a mode transition

Slim side navigation (dark)

TWE Navigation

Sidenav small and with categories

Sidenav - API

Import

Usage

Via data attributes

Via JavaScript

Options

Methods

Events

Access restricted

To view this section you must have an active PRO account

Sidenav

Tailwind CSS Sidenav / Sidebar

Basic example

Positioning

Slim

Accordion

Groups

Right

Full-screen examples

Basic side navigation

Side navigation with a mode transition

Slim side navigation (dark)

TWE Navigation

Sidenav small and with categories

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Sidenav - API

Import

Usage

Via data attributes

Via JavaScript

Options

Methods

Events