From 15471cdd66966ec394f3b4c1614cac00b0261e59 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Thu, 16 Apr 2026 15:28:23 +0200
Subject: feat: add header nav and hamburger menu styling with JS handlers

- Add header, nav-link, header-actions component CSS
- Add menu-overlay and menu-nav component CSS
- Update hamburger-menu.html with vanilla JS handlers:
  - openMenu/closeMenu functions
  - ESC key support
  - Click outside to close (backdrop click)
  - Menu link auto-close
  - Scroll lock when menu open
- Replace Alpine @click with id-based event listeners
- Rebuild CSS: main.min.css updated

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 themes/danix-xyz-hacker/assets/css/main.css | 34 +++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

(limited to 'themes/danix-xyz-hacker/assets/css/main.css')

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index e15d756..50d5284 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -390,6 +390,40 @@ html.theme-light {
     @apply flex items-center justify-between gap-4;
   }
 
+  /* Header navigation styling */
+  .header {
+    @apply fixed top-0 left-0 right-0 z-40;
+  }
+
+  .header-nav {
+    @apply hidden md:flex items-center gap-6;
+  }
+
+  .nav-link {
+    @apply text-text hover:text-accent transition-colors;
+  }
+
+  .header-actions {
+    @apply flex items-center gap-4;
+  }
+
+  /* Mobile menu overlay */
+  .menu-overlay {
+    @apply fixed inset-0 bg-bg z-40 opacity-0 invisible transition-all duration-300;
+  }
+
+  .menu-overlay.active {
+    @apply opacity-100 visible;
+  }
+
+  .menu-nav {
+    @apply flex flex-col gap-4 p-6 text-lg font-semibold;
+  }
+
+  .menu-nav a {
+    @apply text-text hover:text-accent transition-colors;
+  }
+
   /* Article metadata styling (with icons) */
   .article-meta {
     @apply flex flex-wrap items-center gap-4 text-sm text-text-dim;
-- 
cgit v1.2.3