diff --git a/src/layout/AppLayout.tsx b/src/layout/AppLayout.tsx
index 0669b02..8ab2d05 100644
--- a/src/layout/AppLayout.tsx
+++ b/src/layout/AppLayout.tsx
@@ -26,7 +26,10 @@
       />
 
       <Layout>
-        <Sidebar collapsed={!bps.md && sidebarCollapsed} />
+        <Sidebar
+          collapsed={!bps.md && sidebarCollapsed}
+          setCollapsed={setSidebarCollapsed}
+        />
 
         {/* Fade out the background when the sidebar is open on mobile */}
         {!bps.md && <div
diff --git a/src/layout/sidebar/Sidebar.tsx b/src/layout/sidebar/Sidebar.tsx
index bda9cb7..850123f 100644
--- a/src/layout/sidebar/Sidebar.tsx
+++ b/src/layout/sidebar/Sidebar.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2020-2021 Drew Lemmy
 // This file is part of KristWeb 2 under AGPL-3.0.
 // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
-import { useState, useEffect } from "react";
+import { useState, useEffect, Dispatch, SetStateAction } from "react";
 import { Layout, Menu, MenuItemProps } from "antd";
 import { HomeOutlined, WalletOutlined, TeamOutlined, BankOutlined, TagsOutlined, SketchOutlined, BuildOutlined, StockOutlined } from "@ant-design/icons";
 
@@ -53,7 +53,15 @@
     ));
 }
 
-export function Sidebar({ collapsed }: { collapsed: boolean }): JSX.Element {
+interface Props {
+  collapsed: boolean;
+  setCollapsed: Dispatch<SetStateAction<boolean>>;
+}
+
+export function Sidebar({
+  collapsed,
+  setCollapsed
+}: Props): JSX.Element {
   const { t } = useTranslation();
 
   const location = useLocation();
@@ -65,6 +73,11 @@
       : location.pathname.startsWith(i.to))?.to);
   }, [location]);
 
+  useEffect(() => {
+    // Close the sidebar if we switch page
+    setCollapsed(true);
+  }, [setCollapsed, location.pathname]);
+
   return <Sider
     width={240}
     className={"site-sidebar " + (collapsed ? "collapsed" : "")}