#4: Basic Header
This commit is contained in:
parent
2fa02a3214
commit
9e60830cd2
3 changed files with 43 additions and 51 deletions
17
app/frontend/styles/components/header.scss
Normal file
17
app/frontend/styles/components/header.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
|
@ -1,51 +1,14 @@
|
|||
<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"
|
||||
<header id="header">
|
||||
<img
|
||||
id="header__logo"
|
||||
src="{{ asset("icons/logo/logo.svg") }}"
|
||||
alt="Euph Logo"
|
||||
>
|
||||
{% 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"
|
||||
<img
|
||||
id="header__logo-dark"
|
||||
src="{{ asset("icons/logo/dark-logo.svg") }}"
|
||||
alt="Euph Logo"
|
||||
>
|
||||
<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>
|
||||
|
||||
<h1 id="header__logo-text">Euph</h1>
|
||||
{% include 'components/burger-menu.html.twig' %}
|
||||
</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 %}
|
||||
|
|
|
@ -1,4 +1,16 @@
|
|||
<svg class="text-gray-800 dark:text-white {{ class|default('') }}" 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
|
||||
class="text-gray-800 dark:text-white {{ class|default('') }}"
|
||||
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>
|
||||
|
|
Before Width: | Height: | Size: 291 B After Width: | Height: | Size: 352 B |
Loading…
Reference in a new issue