#4: Basic Header
All checks were successful
Quality Check / QS Backend (push) Successful in 19s
Quality Check / QS Mixed (push) Successful in 35s
Quality Check / QS Frontend (push) Successful in 41s

This commit is contained in:
Snoweuph 2024-07-14 21:53:55 +02:00
parent 2fa02a3214
commit 9e60830cd2
Signed by: Snoweuph
GPG key ID: A494330694B208EF
3 changed files with 43 additions and 51 deletions

View file

@ -0,0 +1,17 @@
#header {
@apply flex h-12 p-2 gap-2 items-center;
@apply bg-gray-300 dark:bg-gray-700;
&__logo {
@apply h-full dark:hidden;
}
&__logo-dark {
@apply h-full hidden dark:block;
}
&__logo-text {
@apply text-lg text-center text-black dark:text-white;
}
}

View file

@ -1,51 +1,14 @@
<header class="flex h-12 p-2 gap-2 bg-gray-300 dark:bg-gray-700 items-center"> <header id="header">
<img src="{{ asset("icons/logo/logo.svg") }}" alt="Euph Logo" class="dark:hidden h-full"> <img
<img src="{{ asset("icons/logo/dark-logo.svg") }}" alt="Euph Logo" class="hidden dark:block h-full"> id="header__logo"
<h1 class="text-lg text-center text-black dark:text-white">Euph</h1> src="{{ asset("icons/logo/logo.svg") }}"
<button alt="Euph Logo"
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'} %} <img
</button> id="header__logo-dark"
src="{{ asset("icons/logo/dark-logo.svg") }}"
<!-- drawer component --> alt="Euph Logo"
<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 <h1 id="header__logo-text">Euph</h1>
type="button" {% include 'components/burger-menu.html.twig' %}
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> </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 %}

View file

@ -1,4 +1,16 @@
<svg class="text-gray-800 dark:text-white {{ class|default('') }}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" <svg
width="24" height="24" fill="none" viewBox="0 0 24 24"> class="text-gray-800 dark:text-white {{ class|default('') }}"
<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 7h14M5 12h14M5 17h14"/> aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
d="M5 7h14M5 12h14M5 17h14"
/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 291 B

After

Width:  |  Height:  |  Size: 352 B