diff --git a/package.json b/package.json
index 2c892f7c..d2bf6da7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.18.136",
+  "version": "0.18.137",
   "type": "module",
   "scripts": {
     "start": "rm -rf \"${BUILD_DIR:-build}\" && NODE_ENV=development eleventy --serve",
diff --git a/src/js/components/animated-sidebar.js b/src/js/components/animated-sidebar.js
index 7c59b62f..e518ac6a 100644
--- a/src/js/components/animated-sidebar.js
+++ b/src/js/components/animated-sidebar.js
@@ -82,12 +82,19 @@ class AnimatedSidebar extends Component {
     });
   }
 
-  close({ restoreScroll = true } = {}) {
+  close({ restoreScroll = true, animate = true } = {}) {
     if (!this.isOpen) {
       return;
     }
     this._restoreScroll = restoreScroll;
-    return closeWithAnimation(this.querySelector("dialog.sidebar"));
+    const dialog = this.querySelector("dialog.sidebar");
+    if (!animate) {
+      dialog.removeAttribute("data-closing");
+      dialog.inert = false;
+      dialog.close();
+      return;
+    }
+    return closeWithAnimation(dialog);
   }
 }
 
diff --git a/src/js/templates/sidebar.template.js b/src/js/templates/sidebar.template.js
index b7eee19f..662940be 100644
--- a/src/js/templates/sidebar.template.js
+++ b/src/js/templates/sidebar.template.js
@@ -5,6 +5,7 @@ import {
   formatLargeNumber,
   formatNumNotifications,
   enableLongPress,
+  raf,
 } from "/js/utils.js";
 import { homeIconTemplate } from "/js/templates/icons/homeIcon.template.js";
 import { userIconTemplate } from "/js/templates/icons/userIcon.template.js";
@@ -27,6 +28,27 @@ import "/js/components/animated-sidebar.js";
 import "/js/components/app-icon.js";
 import { WelcomeModal } from "/js/modals/welcome.modal.js";
 
+async function navigateFromSidebar(event, url) {
+  if (
+    event.defaultPrevented ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey ||
+    event.button !== 0
+  ) {
+    return;
+  }
+  // Close the sidebar before navigating so the open sidebar isn't
+  // captured in the ios safari screenshot
+  event.preventDefault();
+  const sidebar = event.currentTarget.closest("animated-sidebar");
+  sidebar.close({ restoreScroll: false, animate: false });
+  await raf();
+  await raf();
+  return window.router.go(url);
+}
+
 function pluginSidebarItemTemplate({ entry }) {
   return html`
     <button
@@ -66,9 +88,11 @@ function sidebarNavTemplate({
                 e.preventDefault();
                 e.stopPropagation();
                 onClickActiveItem?.(item.id);
+                const sidebar = this.closest("animated-sidebar");
+                sidebar.close({ restoreScroll: true });
+                return;
               }
-              const sidebar = this.closest("animated-sidebar");
-              sidebar.close({ restoreScroll: isActive });
+              return navigateFromSidebar(e, item.url);
             }}
           >
             <span class="sidebar-nav-icon"
@@ -109,7 +133,12 @@ function loggedOutSidebarTemplate({ activeNavItem, onClickActiveItem }) {
       data-testid="logged-out-sidebar"
     >
       <div class="sidebar-header">
-        <a href="/" class="sidebar-title"><h1>IMPRO</h1></a>
+        <a
+          href="/"
+          class="sidebar-title"
+          @click=${(event) => navigateFromSidebar(event, "/")}
+          ><h1>IMPRO</h1></a
+        >
       </div>
       ${sidebarNavTemplate({
         menuItems,
@@ -121,6 +150,7 @@ function loggedOutSidebarTemplate({ activeNavItem, onClickActiveItem }) {
           href=${linkToLogin()}
           class="rounded-button rounded-button-primary login-button"
           data-testid="login-button"
+          @click=${(event) => navigateFromSidebar(event, linkToLogin())}
           >Sign in</a
         >
         <button
@@ -272,12 +302,13 @@ export function sidebarTemplate({
         <div class="sidebar-profile-stats" data-testid="sidebar-profile-stats">
           <a
             href="${currentUser ? linkToProfileFollowers(currentUser) : "#"}"
-            @click=${(e) => {
-              if (currentUser) {
-                const sidebar = e.target.closest("animated-sidebar");
-                sidebar.close({ restoreScroll: false });
-              }
-            }}
+            @click=${(event) =>
+              currentUser
+                ? navigateFromSidebar(
+                    event,
+                    linkToProfileFollowers(currentUser),
+                  )
+                : null}
           >
             <strong
               >${followersCount !== null
@@ -289,12 +320,13 @@ export function sidebarTemplate({
           <span class="sidebar-profile-separator">·</span>
           <a
             href="${currentUser ? linkToProfileFollowing(currentUser) : "#"}"
-            @click=${(e) => {
-              if (currentUser) {
-                const sidebar = e.target.closest("animated-sidebar");
-                sidebar.close({ restoreScroll: false });
-              }
-            }}
+            @click=${(event) =>
+              currentUser
+                ? navigateFromSidebar(
+                    event,
+                    linkToProfileFollowing(currentUser),
+                  )
+                : null}
           >
             <strong
               >${followsCount !== null
diff --git a/tests/unit/specs/components/animated-sidebar.test.js b/tests/unit/specs/components/animated-sidebar.test.js
index 87085c3c..72b97218 100644
--- a/tests/unit/specs/components/animated-sidebar.test.js
+++ b/tests/unit/specs/components/animated-sidebar.test.js
@@ -188,6 +188,20 @@ describe("animated-sidebar", () => {
       const sidebar = element.querySelector("dialog.sidebar");
       assert(!sidebar.hasAttribute("open"));
     });
+
+    it("should close immediately when animate: false", () => {
+      const element = document.createElement("animated-sidebar");
+      connectElement(element);
+      element.open();
+      const sidebar = element.querySelector("dialog.sidebar");
+      sidebar.style.transitionDuration = "1s";
+      sidebar.getAnimations = () => [];
+
+      element.close({ animate: false });
+
+      assert.deepEqual(element.isOpen, false);
+      assert(!sidebar.hasAttribute("open"));
+    });
   });
 
   describe("AnimatedSidebar - dismissal", () => {
diff --git a/tests/unit/specs/templates/sidebar.template.test.js b/tests/unit/specs/templates/sidebar.template.test.js
index a952cbc5..2c3c23d3 100644
--- a/tests/unit/specs/templates/sidebar.template.test.js
+++ b/tests/unit/specs/templates/sidebar.template.test.js
@@ -1,4 +1,4 @@
-import { describe, it, beforeEach } from "node:test";
+import { describe, it, beforeEach, mock } from "node:test";
 import assert from "node:assert/strict";
 import { sidebarTemplate } from "/js/templates/sidebar.template.js";
 import { render } from "/js/lib/lit-html.js";
@@ -189,6 +189,43 @@ describe("sidebarTemplate - logged in state", () => {
 });
 
 describe("sidebarTemplate - nav items", () => {
+  it("should close before navigating to an inactive item", async () => {
+    const originalRouter = window.router;
+    const go = mock.fn();
+    window.router = { go };
+    const container = document.createElement("div");
+    container.className = "page-visible";
+    document.body.appendChild(container);
+
+    try {
+      render(
+        sidebarTemplate({
+          isAuthenticated: true,
+          currentUser: mockUser,
+          activeNavItem: "home",
+        }),
+        container,
+      );
+      const sidebar = container.querySelector("animated-sidebar");
+      const dialog = sidebar.querySelector("dialog.sidebar");
+      sidebar.isOpen = true;
+      dialog.showModal();
+
+      container.querySelector("[data-testid='sidebar-nav-search']").click();
+
+      assert.deepEqual(sidebar.isOpen, false);
+      assert(!dialog.open);
+      assert.deepEqual(go.mock.callCount(), 0);
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      await Promise.resolve();
+      assert.deepEqual(go.mock.calls[0].arguments, ["/search"]);
+    } finally {
+      container.remove();
+      window.router = originalRouter;
+    }
+  });
+
   it("should render home nav item", () => {
     const result = sidebarTemplate({
       isAuthenticated: true,