feat: header and utenti page mobile friendly

src/components/Header.astro

@@ -2,7 +2,8 @@
     <a href="/" class="logo">
         <img src="/images/logo-circuit-board.svg" alt="phc logo" />
     </a>
-    <div class="links">
+    <input type="checkbox" id="header-menu-toggle" />
+    <div class="links desktop-only">
         <a role="button" href="/utenti">Utenti</a>
         <!-- <a role="button" href="/appunti">Appunti</a> -->
         <a role="button" href="/notizie">Notizie</a>
@@ -10,4 +11,22 @@
         <a role="button" href="/storia">Storia</a>
         <!-- <a class="primary" role="button" href="/login">Login</a> -->
     </div>
+    <div class="mobile-only">
+        <label role="button" class="flat icon" for="header-menu-toggle">
+            <span class="material-symbols-outlined">menu</span>
+        </label>
+    </div>
+    <div class="side-menu mobile-only">
+        <label role="button" class="flat icon" for="header-menu-toggle">
+            <span class="material-symbols-outlined">close</span>
+        </label>
+        <div class="links">
+            <a role="button" href="/utenti">Utenti</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> -->
+        </div>
+    </div>
 </header>