From 2cbef5637731a8ca697acc3b2f9c959597953c9e Mon Sep 17 00:00:00 2001
From: Antonio De Lucreziis <antonio.delucreziis@gmail.com>
Date: Sat, 12 Oct 2024 03:32:28 +0200
Subject: [PATCH] feat: header and utenti page mobile friendly

---
 src/client/ComboBox.tsx     |  8 +++--
 src/client/lib/util.ts      | 12 +++++++
 src/components/Header.astro | 21 ++++++++++-
 src/styles/components.scss  | 14 ++++++++
 src/styles/controls.scss    | 12 +++++++
 src/styles/main.scss        | 71 +++++++++++++++++++++++++++++++++++++
 6 files changed, 135 insertions(+), 3 deletions(-)

diff --git a/src/client/ComboBox.tsx b/src/client/ComboBox.tsx
index 81c65fe..be2b008 100644
--- a/src/client/ComboBox.tsx
+++ b/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>
diff --git a/src/client/lib/util.ts b/src/client/lib/util.ts
index 38450a9..6bb94f8 100644
--- a/src/client/lib/util.ts
+++ b/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
+}
diff --git a/src/components/Header.astro b/src/components/Header.astro
index bd2effd..200bc68 100644
--- a/src/components/Header.astro
+++ b/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>
diff --git a/src/styles/components.scss b/src/styles/components.scss
index b233293..5e6e5b5 100644
--- a/src/styles/components.scss
+++ b/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);
+            }
+        }
     }
 }
diff --git a/src/styles/controls.scss b/src/styles/controls.scss
index 8db151e..ca59531 100644
--- a/src/styles/controls.scss
+++ b/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'],
diff --git a/src/styles/main.scss b/src/styles/main.scss
index f218a65..25bdc47 100644
--- a/src/styles/main.scss
+++ b/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;
+    }
+}