Fix header in mobile

client/components/Header.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'preact-router/match'
-import { isAdministrator, User, UserRole } from '../../shared/model'
+import { isAdministrator, UserRole } from '../../shared/model'
 import { prependBaseUrl } from '../api'
 import { useCurrentUser } from '../hooks/useCurrentUser'
 
@@ -9,7 +9,7 @@ const ROLE_LABEL: Record<UserRole, string> = {
     ['student']: 'Studente',
 }
 
-export const Header = ({}) => {
+export const Header = ({ }) => {
     const [user] = useCurrentUser()
 
     return (
@@ -18,11 +18,14 @@ export const Header = ({}) => {
                 <a href={prependBaseUrl('/')}>PHC / Problemi</a>
             </div>
             <nav>
+                <div class="nav-left">
                     <div class="nav-item">
                         <Link activeClassName="active" href={prependBaseUrl('/scores')}>
                             Classifica
                         </Link>
                     </div>
+                </div>
+                <div class="nav-right">
                     {user ? (
                         <>
                             {isAdministrator(user.role) && (
@@ -35,7 +38,6 @@ export const Header = ({}) => {
                             <div class="nav-item">
                                 <Link activeClassName="active" href={prependBaseUrl('/profile')}>
                                     @{user.id}
-                                {isAdministrator(user.role) && <> ({ROLE_LABEL[user.role]})</>}
                                 </Link>
                             </div>
                         </>
@@ -46,6 +48,7 @@ export const Header = ({}) => {
                             </Link>
                         </div>
                     )}
+                </div>
             </nav>
         </header>
     )

client/styles/main.scss

@@ -223,7 +223,7 @@ p {
     margin: 0;
 }
 
-p + p {
+p+p {
     margin-top: 0.5rem;
 }
 
@@ -314,6 +314,7 @@ main {
         grid-template-columns: auto auto;
         gap: 1rem;
     }
+
     .info-box {
         padding: 1rem;
         font-size: 28px;
@@ -411,12 +412,15 @@ main.page-scores {
                 &:first-child {
                     border-top-left-radius: 0.5rem;
                 }
+
                 &:nth-child(3) {
                     border-top-right-radius: 0.5rem;
                 }
+
                 &:nth-last-child(3) {
                     border-bottom-left-radius: 0.5rem;
                 }
+
                 &:last-child {
                     border-bottom-right-radius: 0.5rem;
                 }
@@ -441,6 +445,7 @@ main.page-scores {
                     &:nth-child(3n + 1) {
                         text-align: left;
                     }
+
                     &:nth-child(3n + 2),
                     &:nth-child(3n + 3) {
                         text-align: center;
@@ -467,10 +472,11 @@ main.page-scores {
                     }
 
                     &:hover {
-                        &:nth-child(3n + 1) + .cell + .cell::after {
+                        &:nth-child(3n + 1)+.cell+.cell::after {
                             background: #00000006;
                         }
-                        &:nth-child(3n + 2) + .cell::after {
+
+                        &:nth-child(3n + 2)+.cell::after {
                             background: #00000006;
                         }
                     }
@@ -528,13 +534,26 @@ header {
 
     nav {
         position: absolute;
-        right: 2rem;
+        width: 100%;
+        height: 100%;
 
-        display: flex;
+        .nav-left {
             gap: 1rem;
+            display: flex;
+            height: 100%;
+            align-items: center;
+            position: absolute;
+            left: 2rem;
+        }
 
+        .nav-right {
+            gap: 1rem;
+            display: flex;
             height: 100%;
             align-items: center;
+            position: absolute;
+            right: 2rem;
+        }
 
         .nav-item {
             font-size: 20px;
@@ -771,7 +790,8 @@ header {
 }
 
 // On mobile
-@media screen and (max-width: $device-s-width), (pointer: coarse) {
+@media screen and (max-width: $device-s-width),
+(pointer: coarse) {
     main {
         padding: 2rem 1rem 6rem;
 
@@ -792,14 +812,23 @@ header {
 
         nav {
             position: relative;
-            right: unset;
-
             display: flex;
             flex-direction: column;
             align-items: center;
+            gap: 1rem;
+
+            .nav-left, .nav-right {
+                left: unset;
+                right: unset;
+                position: relative;
+    
+                flex-direction: column;
             }
         }
 
+     
+    }
+
     .problem {
         padding: 0.75rem;
     }
@@ -838,7 +867,8 @@ header {
     }
 }
 
-@media screen and (max-width: $device-m-width), (pointer: coarse) {
+@media screen and (max-width: $device-m-width),
+(pointer: coarse) {
     .markdown-editor {
         grid-template-columns: auto;
         grid-template-rows: auto auto;