feat: header and utenti page mobile friendly

src/client/ComboBox.tsx

@@ -1,6 +1,6 @@
 import { type ComponentChildren } from 'preact'
 import { useState, useRef, useEffect } from 'preact/hooks'
-import { clsx } from './lib/util'
+import { clsx, isMobile } from './lib/util'
 
 export const ComboBox = ({
     value,
@@ -33,7 +33,11 @@ export const ComboBox = ({
     }, [])
 
     return (
-        <div class="combobox" ref={comboRef} style={{ width: itemWidth + 48 + 'px' }}>
+        <div
+            class="combobox"
+            ref={comboRef}
+            style={{ width: isMobile() ? undefined : itemWidth + 48 + 'px' }}
+        >
             <div class="selected" onClick={() => setOpen(!open)}>
                 <div class="content">{children[value]}</div>
                 <span class="material-symbols-outlined">expand_more</span>

src/client/lib/util.ts

@@ -1,3 +1,5 @@
+import { useEffect, useMemo, useState } from 'preact/hooks'
+
 export const trottleDebounce = <T extends any[], R>(
     fn: (...args: T) => R,
     delay: number,
@@ -52,3 +54,13 @@ export function clsx(...args: ClassValue[]): string {
         })
         .join(' ')
 }
+
+export const isMobile = () => {
+    const [windowWidth, setWindowWidth] = useState(0)
+
+    useEffect(() => {
+        setWindowWidth(window.innerWidth)
+    }, [])
+
+    return windowWidth < 1024
+}

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>

src/styles/components.scss

@@ -618,6 +618,14 @@
         width: 100%;
 
         gap: 1rem;
+
+        @media screen and (max-width: $screen-desktop-min) {
+            grid-template-columns: 1fr;
+
+            & > .search {
+                grid-row: 1;
+            }
+        }
     }
 
     /* .filter-select {
@@ -716,5 +724,11 @@
                 }
             }
         }
+
+        @media screen and (max-width: $screen-desktop-min) {
+            .dropdown {
+                top: calc(100% + 1rem);
+            }
+        }
     }
 }

src/styles/controls.scss

@@ -53,6 +53,18 @@
             margin-right: 0.25rem;
             margin-bottom: 0.25rem;
         }
+
+        &.flat {
+            background: #0002;
+            color: #222;
+
+            border: none;
+            box-shadow: none;
+
+            &:hover {
+                background: #0004;
+            }
+        }
     }
 
     input[type='text'],

src/styles/main.scss

@@ -116,11 +116,62 @@ body {
                 letter-spacing: 1px;
                 color: #333;
             }
+
+            @media screen and (max-width: $screen-desktop-min) {
+                flex-direction: column;
+            }
+        }
+
+        .side-menu {
+            position: fixed;
+
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 3rem;
+
+            background: #f0f0f0;
+
+            border-left: $border-large;
+
+            display: grid;
+            grid-template-rows: auto 1fr;
+
+            gap: 1.5rem;
+
+            padding: 1.5rem;
+
+            & > :first-child {
+                justify-self: end;
+            }
+
+            .links {
+                display: grid;
+                grid-template-columns: 1fr;
+
+                align-content: start;
+
+                gap: 1.5rem;
+
+                padding: 0;
+            }
+        }
+
+        #header-menu-toggle {
+            display: none;
+
+            &:not(:checked) ~ .side-menu {
+                display: none;
+            }
         }
     }
 
     main {
         width: 100%;
+
+        @media screen and (max-width: $screen-desktop-min) {
+            padding: 0.5rem;
+        }
     }
 
     footer {
@@ -185,6 +236,26 @@ body {
     background: #0002;
 }
 
+//
+// Utility Classes
+//
+
+.hide {
+    display: none !important;
+}
+
 .invisible {
     opacity: 0 !important;
 }
+
+@media screen and (min-width: $screen-desktop-min) {
+    .mobile-only {
+        display: none !important;
+    }
+}
+
+@media screen and (max-width: $screen-desktop-min) {
+    .desktop-only {
+        display: none !important;
+    }
+}