Initial commit

src/components/Header.astro

@@ -0,0 +1,70 @@
+---
+import { localizedPath } from '../lib/i18n';
+import type { Locale, Dict } from '../lib/i18n';
+import LangSwitcher from './islands/LangSwitcher.astro';
+
+interface Props {
+  locale: Locale;
+  dict: Dict;
+  pagePath?: string;
+  user?: App.Locals['user'];
+}
+
+const { locale, dict: t, pagePath = '/', user } = Astro.props;
+
+const links = [
+  { href: '/', label: t.nav.home },
+  { href: '/events', label: t.nav.events },
+  { href: '/about', label: t.nav.about },
+  { href: '/map', label: t.nav.map },
+  { href: '/contacts', label: t.nav.contacts },
+];
+
+const current = (path: string) =>
+  path === '/' ? pagePath === '/' : pagePath.startsWith(path);
+---
+
+<header class="header">
+  <div class="container header__inner">
+    <a class="logo" href={localizedPath(locale, '/')}>
+      <span class="logo__mark">D</span>
+      <span>Devodytyji</span>
+    </a>
+
+    <nav class="nav" aria-label="main">
+      {links.map((link) => (
+        <a class="nav__link" href={localizedPath(locale, link.href)} aria-current={current(link.href) ? 'page' : undefined}>
+          {link.label}
+        </a>
+      ))}
+
+      <span class="nav__sep" aria-hidden="true"></span>
+
+      {user ? (
+        <>
+          {user.isAdmin && (
+            <a class="nav__link" href="/admin" aria-current={pagePath.startsWith('/admin') ? 'page' : undefined}>
+              {t.nav.admin}
+            </a>
+          )}
+          <form action="/api/auth/logout" method="post">
+            <button class="btn btn--ghost btn--sm" type="submit">
+              {t.nav.logout}
+            </button>
+          </form>
+        </>
+      ) : (
+        <>
+          <a class="nav__link" href={localizedPath(locale, '/login')}>
+            {t.nav.login}
+          </a>
+          <a class="btn btn--primary btn--sm" href={localizedPath(locale, '/register')}>
+            {t.nav.register}
+          </a>
+        </>
+      )}
+
+      <LangSwitcher locale={locale} pagePath={pagePath} labels={{ ua: 'UA', en: 'EN' }} />
+    </nav>
+  </div>
+</header>