Makes viewer sidebar icon responsive to sidebar open state

MuckRock · Dec 22, 2023 · f9e0012 · f9e0012
1 parent 832b305
commit f9e0012
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/pages/viewer/Header.svelte b/src/pages/viewer/Header.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
-  import { ChevronLeft24, SidebarExpand24 } from "svelte-octicons";
+  import {
+    ChevronLeft24,
+    SidebarCollapse24,
+    SidebarExpand24,
+  } from "svelte-octicons";
   import { createEventDispatcher } from "svelte";
 
   import Loader from "../../common/Loader.svelte";
@@ -17,6 +21,7 @@
   export let showOrg = true;
   export let disableControls = false;
   export let embed = false;
+  export let sidebarOpen: boolean;
 
   const dispatch = createEventDispatcher();
 </script>
@@ -58,7 +63,10 @@
       class="plausible-event-name=viewer-hamburger"
       on:click={(e) => dispatch("toggle.sidebar")}
     >
-      <SidebarExpand24 slot="icon" />
+      <span slot="icon"
+        >{#if sidebarOpen}<SidebarCollapse24 />{:else}<SidebarExpand24
+          />{/if}</span
+      >
     </Hamburger>
   </div>
 </header>

diff --git a/src/pages/viewer/Viewer.svelte b/src/pages/viewer/Viewer.svelte
@@ -209,6 +209,7 @@
       showOrg={$layout.title}
       disableControls={$layout.disableControls}
       embed={$viewer.embed}
+      sidebarOpen={$layout.showSidebar}
       on:toggle.sidebar={($layout.showSidebar = !$layout.showSidebar)}
     />
     {#if $doc.mode == "image"}