From 139727712dd3d23da28925dd34b566525639d303 Mon Sep 17 00:00:00 2001
From: vvandenb <vvandenb12@gmail.com>
Date: Sun, 12 Mar 2023 13:53:50 +0100
Subject: [PATCH] * Frontend even more responsive!

---
 front/volume/src/components/NavBar.svelte     | 100 +++++++++++-------
 .../src/components/Pong/GameComponent.svelte  |   2 +-
 2 files changed, 64 insertions(+), 38 deletions(-)

diff --git a/front/volume/src/components/NavBar.svelte b/front/volume/src/components/NavBar.svelte
index 02072fa..dceffc3 100644
--- a/front/volume/src/components/NavBar.svelte
+++ b/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,46 +18,55 @@
   export let clickFriends = () => {};
   export let clickChannels = () => {};
   export let clickLeaderboard = () => {};
+
+  let hide = true;
+
+  function toggle() {
+    hide = !hide;
+  }
 </script>
 
 <nav class="navigation-bar">
   <ul>
-    {#each links as link}
-      {#if link.text === "Leaderboard"}
-        <li>
-          <button on:click={clickLeaderboard}> Leaderboard </button>
-        </li>
-      {/if}
-      {#if link.text === "Channels"}
-        <li>
-          <button on:click={clickChannels}> Channels </button>
-        </li>
-      {/if}
-      {#if link.text === "Friends"}
-        <li>
-          <button on:click={clickFriends}> Friends </button>
-        </li>
-      {/if}
-      {#if link.text === "Profile"}
-        <li>
-          <button on:click={clickProfile}>
-            <img src={api + "/avatar"} alt="avatar" />
-          </button>
-        </li>
-      {/if}
-      {#if link.text === "History"}
-        <li>
-          <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}
+    <li>
+      <img src="img/pong.png" alt="home-icon" />
+    </li>
+    <div class:links={hide}>
+      {#each links as link}
+        {#if link.text === "Leaderboard"}
+          <li>
+            <button on:click={clickLeaderboard}> Leaderboard </button>
+          </li>
+        {/if}
+        {#if link.text === "Channels"}
+          <li>
+            <button on:click={clickChannels}> Channels </button>
+          </li>
+        {/if}
+        {#if link.text === "Friends"}
+          <li>
+            <button on:click={clickFriends}> Friends </button>
+          </li>
+        {/if}
+        {#if link.text === "Profile"}
+          <li>
+            <button on:click={clickProfile}>
+              <img src={api + "/avatar"} alt="avatar" />
+            </button>
+          </li>
+        {/if}
+        {#if link.text === "History"}
+          <li>
+            <button on:click={clickHistory}> History </button>
+          </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>
diff --git a/front/volume/src/components/Pong/GameComponent.svelte b/front/volume/src/components/Pong/GameComponent.svelte
index 8c7ec6b..5b22638 100644
--- a/front/volume/src/components/Pong/GameComponent.svelte
+++ b/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;