chore: fixed bugs in macchinisti page and some refactoring

src/components/Bubble.astro

@@ -14,7 +14,8 @@ const ICONS_MAP = {
 type Props = {
     image: ImageMetadata
     fullName: string
-    date: string
+    entranceDate: number
+    exitDate?: number
     description: string
     social?: {
         github?: string
@@ -24,13 +25,13 @@ type Props = {
     }
 }
 
-const { image, fullName, date, description, social } = Astro.props
+const { image, fullName, entranceDate, exitDate, description, social } = Astro.props
 ---
 
 <div class="bubble">
     <img src={image.src} alt={fullName.toLowerCase()} />
     <div class="title">{fullName}</div>
-    <div class="date">{date}</div>
+    <div class="date">{entranceDate}&mdash;{exitDate ?? 'Presente'}</div>
     <div class="description">{description}</div>
     {
         social && (

src/components/Header.astro

@@ -1,17 +1,36 @@
+---
+const links = [
+    { href: '/utenti', text: 'Utenti' },
+    // { href: '/macchinisti', text: 'Macchinisti' },
+    // { href: '/appunti', text: 'Appunti' },
+    { href: '/notizie', text: 'Notizie' },
+    { href: '/guide', text: 'Guide' },
+    { href: '/storia', text: 'Storia' },
+    // { href: '/login', text: 'Login' },
+]
+---
+
 <header>
+    <!-- main logo on the left -->
     <a href="/" class="logo">
         <img src="/images/phc-logo-2024-11@x8.png" alt="phc logo" />
     </a>
+
+    <!-- hidden checkbox for mobile js-less sidebar interaction -->
     <input type="checkbox" id="header-menu-toggle" />
+
+    <!-- desktop navbar links -->
     <div class="links desktop-only">
-        <a role="button" href="/utenti">Utenti</a>
-        <a role="button" href="/macchinisti">Macchinisti</a>
-        <!-- <a role="button" href="/appunti">Appunti</a> -->
-        <a role="button" href="/notizie">Notizie</a>
-        <a role="button" href="/guide">Guide</a>
-        <a role="button" href="/storia">Storia</a>
-        <!-- <a class="primary" role="button" href="/login">Login</a> -->
+        {
+            links.map(link => (
+                <a role="button" href={link.href}>
+                    {link.text}
+                </a>
+            ))
+        }
     </div>
+
+    <!-- sidebar menu for mobile -->
     <div class="mobile-only">
         <label id="header-menu-toggle-menu" role="button" class="flat icon" for="header-menu-toggle">
             <span class="material-symbols-outlined">menu</span>
@@ -20,15 +39,17 @@
             <span class="material-symbols-outlined">close</span>
         </label>
     </div>
+
+    <!-- sidebar menu only visible on mobile when #header-menu-toggle is checked -->
     <div class="side-menu">
         <div class="links">
-            <a role="button" href="/utenti">Utenti</a>
-            <a role="button" href="/macchinisti">Macchinisti</a>
-            <!-- <a role="button" href="/appunti">Appunti</a> -->
-            <a role="button" href="/notizie">Notizie</a>
-            <a role="button" href="/guide">Guide</a>
-            <a role="button" href="/storia">Storia</a>
-            <!-- <a class="primary" role="button" href="/login">Login</a> -->
+            {
+                links.map(link => (
+                    <a role="button" href={link.href}>
+                        {link.text}
+                    </a>
+                ))
+            }
         </div>
     </div>
 </header>