Hamburger menu first try

src/components/TabSelector.svelte

@@ -7,6 +7,7 @@
 </script>
 
 <div>
+  <slot />
   <ul>
     {#each tabEntries as [tabName, tab]}
       <li>
@@ -36,8 +37,6 @@
     margin: 0;
     padding: 0;
 
-    pointer-events: none;
-
     > ul {
       text-align: center;
       font-weight: bold;
@@ -46,7 +45,6 @@
       padding: 0.2em 0.6em;
 
       > li {
-        pointer-events: initial;
         list-style-type: none;
         display: inline;
         user-select: none;

src/components/Wrapper.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { AddMessageEvent } from "../shark/Message";
-
   import type { SharkGame } from "../shark/SharkGame";
   import Log from "./Log.svelte";
   import ResourceTable from "./ResourceTable/ResourceTable.svelte";
@@ -9,6 +8,11 @@
   export let game: typeof SharkGame;
   $: Game = game;
 
+  let sidebarExpanded = false;
+
+  function toggleSidebar(to?: boolean) {
+    sidebarExpanded = to ?? !sidebarExpanded;
+  }
   function handleAddMessage(event: CustomEvent<AddMessageEvent>) {
     Game.Log.addMessage(event.detail.message, event.detail.messageType);
   }
@@ -18,7 +22,7 @@
 </script>
 
 <main>
-  <div id="left-column">
+  <div id="left-column" class={sidebarExpanded ? "expanded" : "collapsed"}>
     <ResourceTable bind:resources={Game.Resources.Resources} />
     <Log
       bind:logLength={Game.Settings.logLength.current}
@@ -27,11 +31,33 @@
       on:resetLog={handleResetLog}
     />
   </div>
-  <div id="right-column">
+  <div id="right-column" on:click={() => toggleSidebar(false)}>
+    <div id="right-top">
+      <div
+        role="button"
+        id="sidebar-toggle"
+        on:click={(ev) => {
+          ev.cancelBubble = true;
+          toggleSidebar();
+        }}
+      >
+        <svg width="1em" height="1em">
+          <line id="top" x1="0" y1="1px" x2="1em" y2="1px" />
+          <line id="middle" x1="0" y1="0.5em" x2="1em" y2="0.5em" />
+          <line
+            id="bottom"
+            x1="0"
+            y1="calc(1em - 1px)"
+            x2="1em"
+            y2="calc(1em - 1px)"
+          />
+        </svg>
+      </div>
       <TabSelector
         bind:tabs={Game.Tabs.AllTabs}
         bind:selectedTab={Game.Tabs.currentTab}
       />
+    </div>
     <div id="tab-content">
       <svelte:component
         this={Game.Tabs.currentTab}
@@ -63,10 +89,7 @@
 
     > #right-column {
       height: 100%;
-      max-height: 100%;
       width: 80%;
-      max-width: 80%;
-
       > #tab-content {
         width: 100%;
         // Subtract the height of the TabSelector
@@ -74,6 +97,47 @@
 
         overflow-y: scroll;
       }
+
+      > #right-top {
+        display: inline-flex;
+        width: 100%;
+
+        > #sidebar-toggle {
+          display: none;
+          cursor: pointer;
+          width: 1em;
+          height: 1em;
+          margin: 10px;
+          background-color: var(--color-dark);
+
+          svg {
+            stroke: var(--color-lighter);
+          }
+        }
+      }
+    }
+
+    @media screen and (max-width: 700px) {
+      > #left-column {
+        position: absolute;
+        z-index: 1;
+
+        transition: transform 0.3s;
+
+        &.collapsed {
+          transform: translate(calc(-100% - 100px));
+        }
+      }
+
+      > #right-column {
+        width: 100%;
+
+        > #right-top {
+          > #sidebar-toggle {
+            display: initial;
+          }
+        }
+      }
     }
   }
 </style>