match view: toggle sidebar

2 files changed, 20 insertions, 5 deletions

diff --git a/web/pw-server/src/routes/__layout.svelte b/web/pw-server/src/routes/__layout.svelte
index 5f78e34..12979c7 100644
--- a/web/pw-server/src/routes/__layout.svelte
+++ b/web/pw-server/src/routes/__layout.svelte
@@ -2,12 +2,11 @@
   import { afterNavigate } from "$app/navigation";
 
   import "./style.css";
-  import Fa from 'svelte-fa'
-  import { faBars } from '@fortawesome/free-solid-svg-icons'
+  import Fa from "svelte-fa";
+  import { faBars } from "@fortawesome/free-solid-svg-icons";
 
   import { get_session_token, clear_session_token } from "$lib/auth";
   import { currentUser } from "$lib/stores/current_user";
-  
 
   import { onMount } from "svelte";
 
diff --git a/web/pw-server/src/routes/matches/[match_id].svelte b/web/pw-server/src/routes/matches/[match_id].svelte
index bbb25e1..653b3bf 100644
--- a/web/pw-server/src/routes/matches/[match_id].svelte
+++ b/web/pw-server/src/routes/matches/[match_id].svelte
@@ -29,6 +29,7 @@
 
   export let matchLog: string | undefined;
   export let matchData: object;
+  let showSidebar = true;
 
   onMount(async () => {
     const apiClient = new ApiClient();
@@ -54,6 +55,10 @@
     return matchPlayer["owner_id"] === user?.["user_id"];
   }
 
+  function toggleSidebar() {
+    showSidebar = !showSidebar;
+  }
+
   // using the same value here causes svelte to freeze
   let dropdownSelectedPlayer: any;
   let selectedPlayer: any;
@@ -65,8 +70,14 @@
 </script>
 
 <div class="container">
-  <Visualizer {matchLog} {matchData} />
-  {#if playersWithVisibleLog.length > 0}
+  <Visualizer {matchLog} {matchData}>
+    <div slot="menu">
+      {#if playersWithVisibleLog.length > 0}
+        <div class="toggle-sidebar" on:click={toggleSidebar}>toggle sidebar</div>
+      {/if}
+    </div>
+  </Visualizer>
+  {#if showSidebar && playersWithVisibleLog.length > 0}
     <div class="output-pane">
       <div class="player-select">
         {#if playersWithVisibleLog.length == 1}
@@ -126,4 +137,9 @@
     flex-direction: column;
     background-color: variables.$bg-color;
   }
+
+  .toggle-sidebar:hover {
+    cursor: pointer;
+    color: #ccc;
+  }
 </style>