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.$(".expander").click(function () {
-            window.$(this).toggleClass("menu-expanded");
+            window.$(".menu").toggleClass("menu-collapsed menu-expanded");
-        });*/
+        });
     });
 
 </script>
 
-<SplashScreen/>-
+<SplashScreen/>
 
-<div class="menu">
+<div class="menu menu-collapsed">
 
-    <div class="burger"></div>
+        <a class="expander">
-
+            <img class="item-hint" src={arrow}
-    <nav>
+                 height="30"
-        <a href="/">
+                 width="30"
-            <img src={leaderboard}
+                 alt="arrow">
-                height="30"
-                width="30"
-                alt="leaderboard"
-            >
-            <div>Leaderboard</div>
         </a>
 
-        <a href="/play">
+        <a href="/" class="menu-item">
-            <img src={dice}
+            <img class="item-hint" src={leaderboard}
-                height="30"
+                 height="30"
-                width="30"
+                 width="30"
-                alt="dice"
+                 alt="leaderboard">
-            >
+            <div class="item-title">Leaderboard</div>
-            <div>Play</div>
         </a>
 
-        <a href="/about">
+        <a href="/play" class="menu-item">
-            <img src={about}
+            <img class="item-hint" src={dice}
-                height="30"
+                 height="30"
-                width="30"
+                 width="30"
-                alt="about"
+                 alt="dice">
-            >
+            <div class="item-title">Play</div>
-            <div>About</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>
 

front/static/style/menu2.css

@@ -1,5 +1,4 @@
-.menu {
+.menu-collapsed, .menu-expanded {
-    font-family: 'Roboto', sans-serif;
     position: fixed;
     top: 0;
     left: 0;
@@ -13,51 +12,60 @@
     transition: width .3s;
 }
 
-.menu:hover {
+.menu-collapsed .menu-item{
-    width: 300px;
+    display: none;
 }
 
-.menu nav {
+.menu-expanded, .menu-collapsed {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: start;
 }
 
-.menu nav a {
+.menu-expanded {
+    width: 300px;
+}
+
+.expander, .menu-item {
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
     margin: 15px 30px 0 5px;
     border-radius: 5px;
     height: fit-content;
     width: 250px;
 }
 
-.menu nav a {
+.expander, .menu-item {
-    font-size: .9rem;
     text-decoration: none;
     margin: 15px 5px 5px 5px;
     padding: 5px;
 }
 
-.menu nav a div {
+.item-title {
+    margin-left: 5%;
     color: #4b0611;
 }
 
-.menu nav a:hover,
+.menu-item:hover {
-.menu nav:first-child a {
     background: #dd3328;
 }
 
+.menu-item .item-hint:hover {
+    transition: 0.3s;
+    transform: rotate(360deg);
+}
+
+.menu-expanded .expander .item-hint {
+    transform: rotate(180deg);
+}
+
 @media screen and (max-width: 600px) {
-    .menu
+    .menu-collapsed {
-    {
         width: 45px
     }
 
-    .menu a img {
+    .item-hint {
         width: 20px;
         height: 20px;
     }