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.
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.
<!-- 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 });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:
<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.
<!-- 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.
<!-- 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.
<!-- 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.
<!-- 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).
<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
<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
<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
1280pxsidenav mode changes fromsidetoover.
<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 small and with categories
<!-- 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 });Related resources
Tutorials:
Extended Docs:
icons
navbar
offcanvas
accordion
buttons
link
list group
social buttons
checkbox
datepicker
radio
range
search
select
switch
timepicker
breakpoints
dark theme
display flex
icons
overflow
position
spacing
sticky
visibility hidden
z index
Generators and builders:
Design System (Figma):
introduction
content should be the star
less is more
power of visual hierarchy
art of prioritization
de emphasize with no mercy
size matters
lowering contrast
low contrast vs low aesthetics
let it breathe
user experience
do not start with the roof
project personality
design system
principles
tips and tricks