feat: header and utenti page mobile friendly

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;
+    }
+}