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,34 +18,37 @@ export const Header = ({}) => {
                 <a href={prependBaseUrl('/')}>PHC / Problemi</a>
             </div>
             <nav>
-                <div class="nav-item">
-                    <Link activeClassName="active" href={prependBaseUrl('/scores')}>
-                        Classifica
-                    </Link>
+                <div class="nav-left">
+                    <div class="nav-item">
+                        <Link activeClassName="active" href={prependBaseUrl('/scores')}>
+                            Classifica
+                        </Link>
+                    </div>
                 </div>
-                {user ? (
-                    <>
-                        {isAdministrator(user.role) && (
+                <div class="nav-right">
+                    {user ? (
+                        <>
+                            {isAdministrator(user.role) && (
+                                <div class="nav-item">
+                                    <Link activeClassName="active" href={prependBaseUrl('/admin')}>
+                                        Pannello Admin
+                                    </Link>
+                                </div>
+                            )}
                             <div class="nav-item">
-                                <Link activeClassName="active" href={prependBaseUrl('/admin')}>
-                                    Pannello Admin
+                                <Link activeClassName="active" href={prependBaseUrl('/profile')}>
+                                    @{user.id}
                                 </Link>
                             </div>
-                        )}
+                        </>
+                    ) : (
                         <div class="nav-item">
-                            <Link activeClassName="active" href={prependBaseUrl('/profile')}>
-                                @{user.id}
-                                {isAdministrator(user.role) && <> ({ROLE_LABEL[user.role]})</>}
+                            <Link activeClassName="active" href={prependBaseUrl('/login')}>
+                                Login
                             </Link>
                         </div>
-                    </>
-                ) : (
-                    <div class="nav-item">
-                        <Link activeClassName="active" href={prependBaseUrl('/login')}>
-                            Login
-                        </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;
-        gap: 1rem;
+        .nav-left {
+            gap: 1rem;
+            display: flex;
+            height: 100%;
+            align-items: center;
+            position: absolute;
+            left: 2rem;
+        }
 
-        height: 100%;
-        align-items: center;
+        .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,12 +812,21 @@ 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 {
@@ -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;
@@ -848,4 +878,4 @@ header {
             justify-self: center;
         }
     }
-}
+}