Consolidates Hamburger components

src/common/Hamburger.svelte

@@ -1,12 +1,12 @@
-<script>
-  import { createEventDispatcher } from "svelte";
+<script lang="ts">
   import { ThreeBars16 } from "svelte-octicons";
 
-  const dispatch = createEventDispatcher();
+  let className: string = "";
+  export { className as class };
 </script>
 
 <div class="hamburger">
-  <button class="svg buttonLike" on:click={(e) => dispatch("toggle")}>
+  <button class={`svg buttonLike ${className}`} on:click>
     <ThreeBars16 />
   </button>
 </div>

src/pages/app/MainContainer.svelte

@@ -102,7 +102,10 @@
     <Modal component={UploadEmailDialog} on:close={hideMailkey} />
   {/if}
   {#if !embed}
-    <Hamburger on:toggle={emit.expandSidebar} />
+    <Hamburger
+      class="plausible-event-name=sidebar-expand"
+      on:click={emit.expandSidebar}
+    />
   {/if}
   {#if !$documents.error}
     <div

src/pages/app/sidebar/Sidebar.svelte

@@ -19,7 +19,10 @@
 
 <aside class="sidebar" class:expanded>
   <header>
-    <Hamburger on:toggle={(e) => dispatch("retractSidebar")} />
+    <Hamburger
+      class="plausible-event-name=sidebar-retract"
+      on:click={(e) => dispatch("retractSidebar")}
+    />
     <Logo />
   </header>
 

src/pages/viewer/Header.svelte

@@ -7,7 +7,7 @@
   import Link from "../../router/Link.svelte";
 
   import Search from "./controls/Search.svelte";
-  import Hamburger from "./controls/Hamburger.svelte";
+  import Hamburger from "../../common/Hamburger.svelte";
 
   import { HEADER_HEIGHT } from "./constants.js";
 
@@ -60,7 +60,10 @@
       <Search />
     </div>
     <div class="cell">
-      <Hamburger on:click={(e) => dispatch("toggle.sidebar")} />
+      <Hamburger
+        class="plausible-event-name=viewer-hamburger"
+        on:click={(e) => dispatch("toggle.sidebar")}
+      />
     </div>
   </div>
 </header>