52 lines
1.9 KiB
Twig
52 lines
1.9 KiB
Twig
|
<header class="flex h-12 p-2 gap-2 bg-gray-300 dark:bg-gray-700 items-center">
|
||
|
|
<img src="{{ asset("icons/logo/logo.svg") }}" alt="Euph Logo" class="dark:hidden h-full">
|
||
|
|
<img src="{{ asset("icons/logo/dark-logo.svg") }}" alt="Euph Logo" class="hidden dark:block h-full">
|
||
|
|
<h1 class="text-lg text-center text-black dark:text-white">Euph</h1>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
data-drawer-target="drawer-navigation"
|
||
|
|
data-drawer-show="drawer-navigation"
|
||
|
|
data-drawer-placement="right"
|
||
|
|
class="ml-auto h-full aspect-square"
|
||
|
|
aria-controls="drawer-navigation"
|
||
|
|
>
|
||
|
|
{% include 'icons/bars.svg.twig' with {'class': 'h-full w-full'} %}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- drawer component -->
|
||
|
|
<div
|
||
|
|
id="drawer-navigation"
|
||
|
|
class="fixed top-0 right-0 h-screen z-40 w-80 flex flex-col p-2 gap-2 overflow-y-auto bg-gray-100 dark:bg-gray-800 transition-transform translate-x-full"
|
||
|
|
tabindex="-1"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
data-drawer-hide="drawer-navigation"
|
||
|
|
class="h-8 w-8 absolute right-2 aspect-square"
|
||
|
|
aria-controls="drawer-navigation"
|
||
|
|
>
|
||
|
|
{% include 'icons/close.svg.twig' with {'class': 'h-full w-full'} %}
|
||
|
|
</button>
|
||
|
|
<nav>
|
||
|
|
<ul class="flex flex-col gap-2 text-lg text-black dark:text-white">
|
||
|
|
{{ _self.nav_item('Test1', '#test1', 'bars') }}
|
||
|
|
{{ _self.nav_item('Test2', '#test2', 'bars') }}
|
||
|
|
{{ _self.nav_item('Test3', '#test3', 'bars') }}
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</header>
|
||
|
|
|
||
|
|
{% macro nav_item(name, href, icon) %}
|
||
|
|
<li class="h-8">
|
||
|
|
<a
|
||
|
|
href="{{ href }}"
|
||
|
|
class="flex p-1 gap-2 items-center rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700"
|
||
|
|
>
|
||
|
|
{% include 'icons/' ~ icon ~ '.svg.twig' with {'class': 'w-6 h-6'} %}
|
||
|
|
<span class="flex-1">{{ name }}</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
{% endmacro %}
|