Rework menu UX

front/src/lib/assets/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>

front/src/routes/+layout.svelte

@@ -5,52 +5,54 @@
     import dice from '$lib/assets/dice.svg';
     import about from '$lib/assets/about.svg';
     import logo from '$lib/assets/logo2.png'
+    import arrow from '$lib/assets/arrow.svg'
 
     import {onMount} from "svelte";
     import SplashScreen from "$lib/components/SplashScreen.svelte";
 
     onMount(async () => {
-        /*window.$(".menu-collapsed").click(function () {
-            window.$(this).toggleClass("menu-expanded");
-        });*/
+        window.$(".expander").click(function () {
+            window.$(".menu").toggleClass("menu-collapsed menu-expanded");
+        });
     });
 
 </script>
 
-<SplashScreen/>-
+<SplashScreen/>
 
-<div class="menu">
+<div class="menu menu-collapsed">
 
-    <div class="burger"></div>
-
-    <nav>
-        <a href="/">
-            <img src={leaderboard}
-                height="30"
-                width="30"
-                alt="leaderboard"
-            >
-            <div>Leaderboard</div>
+        <a class="expander">
+            <img class="item-hint" src={arrow}
+                 height="30"
+                 width="30"
+                 alt="arrow">
         </a>
 
-        <a href="/play">
-            <img src={dice}
-                height="30"
-                width="30"
-                alt="dice"
-            >
-            <div>Play</div>
+        <a href="/" class="menu-item">
+            <img class="item-hint" src={leaderboard}
+                 height="30"
+                 width="30"
+                 alt="leaderboard">
+            <div class="item-title">Leaderboard</div>
         </a>
 
-        <a href="/about">
-            <img src={about}
-                height="30"
-                width="30"
-                alt="about"
-            >
-            <div>About</div>
+        <a href="/play" class="menu-item">
+            <img class="item-hint" src={dice}
+                 height="30"
+                 width="30"
+                 alt="dice">
+            <div class="item-title">Play</div>
+        </a>
+
+        <a href="/about" class="menu-item">
+            <img class="item-hint" src={about}
+                 height="30"
+                 width="30"
+                 alt="about"
+            >
+            <div class="item-title">About</div>
         </a>
-    </nav>
 
 </div>
 

front/src/routes/+page.svelte

@@ -11,8 +11,6 @@
 
 </script>
 
-
-
 <h1>Phrase d'accroche</h1>
 <LeaderBoard bind:scores={$scoreStore}></LeaderBoard>