cool

partials/structure/header.php

@@ -0,0 +1,100 @@
+<?php
+// public/partials/header.php
+
+// Aktuelle Domain + Protokoll
+$scheme = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
+$host   = $_SERVER['HTTP_HOST'] ?? 'usbcheck.it';
+$baseUrl = $scheme . '://' . $host;
+
+// Wenn $navAnchors NICHT gesetzt ist → leeres Array
+if (!isset($navAnchors) || !is_array($navAnchors)) {
+    $navAnchors = [];
+}
+?>
+<header class="sticky top-0 z-40 border-b border-brand-border/70 backdrop-blur bg-brand-bg/85">
+    <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
+
+        <!-- Logo -->
+        <div class="flex items-center gap-3">
+            <a href="/?lang=<?= htmlspecialchars($lang) ?>" class="flex items-center gap-3">
+                <img src="<?= $baseUrl ?>/assets/img/logo_slogan.png"
+                     alt="usbcheck.it Logo"
+                     class="h-9 w-auto">
+
+                <div class="hidden sm:flex flex-col leading-tight">
+                    <span class="font-heading font-bold text-sm uppercase tracking-[0.18em] text-brand-muted">
+                        usbcheck.it
+                    </span>
+                    <span class="text-xs text-brand-muted" data-i18n="header_slogan">
+                        Test USB drives
+                    </span>
+                </div>
+            </a>
+        </div>
+
+        <!-- Navigation -->
+        <div class="flex items-center gap-6">
+
+            <nav class="md:flex items-center gap-6 text-xs font-medium text-brand-muted uppercase tracking-[0.18em]">
+                <?php foreach ($navAnchors as $item): ?>
+                    <a href="<?= htmlspecialchars($item['href']) ?>"
+                       class="hover:text-brand-primary transition-colors"
+                       data-i18n="<?= htmlspecialchars($item['key']) ?>">
+                    </a>
+                <?php endforeach; ?>
+            </nav>
+
+            <div class="relative">
+                <button id="langCurrent"
+                        type="button"
+                        class="flex items-center gap-1 text-xs uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary transition">
+                    <span id="langCurrentLabel"><?= strtoupper($lang) ?></span>
+                    <svg class="w-3 h-3 opacity-70" viewBox="0 0 20 20" aria-hidden="true">
+                        <path d="M5 7l5 6 5-6" fill="currentColor" />
+                    </svg>
+                </button>
+
+                <div id="langMenu"
+                     class="hidden absolute right-0 mt-2 w-20 rounded-xl bg-brand-surface border border-brand-border shadow-lg py-1 text-xs">
+                    <button type="button"
+                            class="lang-pill flex items-center gap-2 w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
+                            data-lang="de">
+                        <span class="text-base">🇩🇪</span>
+                        <span>DE</span>
+                    </button>
+                    <button type="button"
+                            class="lang-pill flex items-center gap-2 w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
+                            data-lang="en">
+                        <span class="text-base">🇬🇧</span>
+                        <span>EN</span>
+                    </button>
+                    <button type="button"
+                            class="lang-pill flex items-center gap-2 w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
+                            data-lang="it">
+                        <span class="text-base">🇮🇹</span>
+                        <span>IT</span>
+                    </button>
+                    <button type="button"
+                            class="lang-pill flex items-center gap-2 w-full text-left px-3 py-1.5 uppercase tracking-[0.18em] text-brand-muted hover:text-brand-primary hover:bg-brand-bg/60"
+                            data-lang="fr">
+                        <span class="text-base">🇫🇷</span>
+                        <span>FR</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Login Button / Avatar -->
+            <button id="loginButton"
+                    class="relative inline-flex items-center justify-center rounded-full bg-brand-primary px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-brand-bg shadow-soft hover:bg-cyan-400 transition-colors"
+                    data-i18n="header_btn_login">Login
+            </button>
+
+            <button id="userAvatar"
+                    class="hidden h-9 w-9 rounded-full border border-brand-border bg-brand-surface flex items-center justify-center text-xs font-semibold text-brand-text shadow-soft hover:border-brand-primary transition"
+                    aria-label="Mein Konto">
+                <span><?= strtoupper(substr($userInitials ?? 'U', 0, 2)) ?></span>
+            </button>
+
+        </div>
+    </div>
+</header>