feat: layout base con header, footer e 404

2026-07-02 00:48:14 +02:00
parent ac75720bd9
commit 2fdd1b9a7f
6 changed files with 187 additions and 2 deletions
@@ -0,0 +1,45 @@
+---
+import { site } from '../data/site';
+const path = Astro.url.pathname;
+---
+<header class="hdr" id="site-header">
+  <div class="container hdr__in">
+    <a href="/" class="hdr__logo"><img src="/img/logo-dark.png" alt="InsanityLab" width="150" /></a>
+    <nav class="hdr__nav" id="site-nav" aria-label="principale">
+      {site.navigation.map((item) => (
+        <a href={item.href} class:list={['hdr__link', { 'is-active': path === item.href || (item.href !== '/' && path.startsWith(item.href)) }]}>{item.label}</a>
+      ))}
+    </nav>
+    <button class="hdr__burger" id="nav-toggle" aria-label="Apri menu" aria-expanded="false">
+      <span></span><span></span><span></span>
+    </button>
+  </div>
+</header>
+
+<style>
+  .hdr { position: sticky; top: 0; z-index: 100; background: #fff; transition: box-shadow .2s; }
+  .hdr.is-scrolled { box-shadow: 0 2px 14px rgba(0,0,0,.08); }
+  .hdr__in { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
+  .hdr__nav { display: flex; gap: 34px; }
+  .hdr__link { font-family: var(--font-heading); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--c-heading); }
+  .hdr__link:hover, .hdr__link.is-active { color: var(--c-accent-dark); }
+  .hdr__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
+  .hdr__burger span { display: block; width: 22px; height: 2px; background: var(--c-heading); margin: 5px 0; }
+  @media (max-width: 991px) {
+    .hdr__nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: #fff; flex-direction: column; gap: 0; padding: 10px 20px 20px; box-shadow: 0 10px 20px rgba(0,0,0,.08); }
+    .hdr__nav.is-open { display: flex; }
+    .hdr__link { padding: 12px 0; }
+    .hdr__burger { display: block; }
+  }
+</style>
+
+<script>
+  const header = document.getElementById('site-header')!;
+  const toggle = document.getElementById('nav-toggle')!;
+  const nav = document.getElementById('site-nav')!;
+  addEventListener('scroll', () => header.classList.toggle('is-scrolled', scrollY > 10), { passive: true });
+  toggle.addEventListener('click', () => {
+    const open = nav.classList.toggle('is-open');
+    toggle.setAttribute('aria-expanded', String(open));
+  });
+</script>