#4: Basic Header

app/frontend/styles/components/header.scss

@@ -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;
+  }
+
+}

app/frontend/templates/components/header.html.twig

@@ -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 %}

app/frontend/templates/icons/bars.svg.twig

@@ -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>