feat: create responsive header with theme toggle and hamburger

1 files changed, 42 insertions, 0 deletions

diff --git a/themes/danix-xyz-hacker/layouts/partials/header.html b/themes/danix-xyz-hacker/layouts/partials/header.html
new file mode 100644
index 0000000..a90a706
--- /dev/null
+++ b/themes/danix-xyz-hacker/layouts/partials/header.html
@@ -0,0 +1,42 @@
+<header class="sticky top-0 z-50 bg-bg2/92 backdrop-blur border-b border-border">
+  <nav class="container mx-auto px-4 py-4 flex items-center justify-between">
+    <!-- Logo -->
+    <a href="{{ .Site.BaseURL }}" class="font-bold text-lg text-accent font-oxanium">
+      danix
+    </a>
+
+    <!-- Desktop menu (hidden on mobile) -->
+    <div class="hidden md:flex items-center gap-8">
+      {{ range .Site.Menus.main }}
+        <a href="{{ .URL }}" class="text-sm hover:text-accent transition-colors">
+          {{ i18n .Name }}
+        </a>
+      {{ end }}
+    </div>
+
+    <!-- Mobile hamburger & theme toggle -->
+    <div class="flex items-center gap-4 md:gap-6">
+      <!-- Theme toggle button -->
+      <button
+        id="theme-toggle"
+        aria-label="{{ i18n "toggleTheme" }}"
+        class="p-2 rounded hover:bg-surface transition-colors"
+      >
+        <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>
+        <i data-feather="moon" class="w-5 h-5 block dark:hidden"></i>
+      </button>
+
+      <!-- Hamburger menu button (mobile only) -->
+      <button
+        id="menu-toggle"
+        aria-label="{{ i18n "toggleMenu" }}"
+        class="md:hidden p-2 rounded hover:bg-surface transition-colors"
+      >
+        <i data-feather="menu" class="w-5 h-5"></i>
+      </button>
+    </div>
+  </nav>
+
+  <!-- Mobile hamburger overlay menu -->
+  {{ partial "hamburger-menu.html" . }}
+</header>