* Frontend even more responsive!

front/volume/src/components/NavBar.svelte

@@ -5,7 +5,7 @@
     ":" +
     import.meta.env.VITE_BACK_PORT;
   export let links = [
-    { text: "Home", url: "img/pong.png" },
+    { text: "Home" },
     { text: "Spectate" },
     { text: "Channels" },
     { text: "History" },
@@ -18,10 +18,20 @@
   export let clickFriends = () => {};
   export let clickChannels = () => {};
   export let clickLeaderboard = () => {};
+
+  let hide = true;
+
+  function toggle() {
+    hide = !hide;
+  }
 </script>
 
 <nav class="navigation-bar">
   <ul>
+    <li>
+      <img src="img/pong.png" alt="home-icon" />
+    </li>
+    <div class:links={hide}>
       {#each links as link}
         {#if link.text === "Leaderboard"}
           <li>
@@ -50,14 +60,13 @@
             <button on:click={clickHistory}> History </button>
           </li>
         {/if}
-      {#if link.text === "Home"}
-        <li>
-          <a href="/">
-            <img src="img/pong.png" alt="home-icon" />
-          </a>
-        </li>
-      {/if}
       {/each}
+    </div>
+    <button on:click={toggle}>
+      <svg class="hamburger" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
+      </svg>
+    </button>
   </ul>
 </nav>
 
@@ -91,6 +100,14 @@
     border: none;
   }
 
+  .hamburger {
+    display: none;
+  }
+
+  .links {
+    display: flex;
+  }
+
   @media (max-width: 768px) {
     .navigation-bar {
       flex-direction: column;
@@ -109,5 +126,14 @@
       margin: 0;
       text-align: center;
     }
+
+    .hamburger {
+      display: block;
+      /* margin: 0 auto; */
+    }
+
+    .links {
+      display: none;
+    }
   }
 </style>

front/volume/src/components/Pong/GameComponent.svelte

@@ -49,7 +49,7 @@
   }
 
   .renderCanvas {
-    max-width: 1000px;
+    max-width: 60vw;
     width: 100%;
     height: auto;
     padding-left: 0;