Make animations slightly nicer on edit button

MaddyGuthridge · Jan 28, 2025 · 74c1b1d · 74c1b1d
1 parent 1770728
commit 74c1b1d
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/src/components/navbar/Navbar.svelte b/src/components/navbar/Navbar.svelte
@@ -129,6 +129,14 @@
     document.documentElement.dataset.scroll =
       window.scrollY < 20 ? 'top' : 'page';
   }
+
+  function editButtonClick() {
+    if (editing) {
+      onEditFinish?.();
+    } else {
+      onEditBegin?.();
+    }
+  }
 </script>
 
 <svelte:window {onscroll} />
@@ -148,11 +156,13 @@
   <span id="control-buttons">
     {#if loggedIn}
       {#if editable}
-        {#if editing}
-          <Button onclick={onEditFinish} mode="confirm">Finish editing</Button>
-        {:else}
-          <Button onclick={onEditBegin}>Edit</Button>
-        {/if}
+        <!-- Use the one button so that animations persist between states -->
+        <Button
+          onclick={editButtonClick}
+          mode={editing ? 'confirm' : 'default'}
+        >
+          {editing ? 'Finish editing' : 'Edit'}
+        </Button>
       {/if}
       <Button onclick={() => goto('/admin')}>Admin</Button>
       <Button onclick={logOut}>Log out</Button>