diff --git a/src/layouts/main/MainLayout.tsx b/src/layouts/main/MainLayout.tsx
index ce81b12..2a15a51 100644
--- a/src/layouts/main/MainLayout.tsx
+++ b/src/layouts/main/MainLayout.tsx
@@ -27,21 +27,28 @@
     };
   }
 
+  toggleSidebar(): void {
+    this.setState({
+      sidebarCollapsed: !this.state.sidebarCollapsed
+    });
+  }
+
   render(): ReactNode {
     const { sidebarCollapsed } = this.state;
 
     return (
       <Router>
         {/* Top nav bar */}
-        <MainNav onCollapseSidebar={() => this.setState({
-          sidebarCollapsed: !sidebarCollapsed
-        })} />
+        <MainNav toggleSidebar={this.toggleSidebar.bind(this)} />
 
         {/* Main container */}
         <Container fluid id="main-container">
           <Row>
             {/* Left sidebar */}
-            <MainSidebar isCollapsed={sidebarCollapsed} />
+            <MainSidebar 
+              isCollapsed={sidebarCollapsed} 
+              toggleSidebar={this.toggleSidebar.bind(this)}
+            />
 
             {/* Page container */}
             <Col id="page-container">
diff --git a/src/layouts/main/components/nav/MainNav.tsx b/src/layouts/main/components/nav/MainNav.tsx
index ae00315..2569df4 100644
--- a/src/layouts/main/components/nav/MainNav.tsx
+++ b/src/layouts/main/components/nav/MainNav.tsx
@@ -15,10 +15,10 @@
 import { RootState } from "@store";
 
 import "./MainNav.scss";
-import { SidebarCollapseButton } from "../sidebar/SidebarCollapseButton";
+import { SidebarToggleButton } from "../sidebar/SidebarToggleButton";
 
 interface OwnProps {
-  onCollapseSidebar: () => void;
+  toggleSidebar: () => void;
 }
 
 interface StateProps {
@@ -31,12 +31,12 @@
 
 type Props = StateProps & OwnProps;
 
-const MainNavComponent: React.FC<Props> = ({ isGuest, onCollapseSidebar }: Props): JSX.Element => {
+const MainNavComponent: React.FC<Props> = ({ isGuest, toggleSidebar }: Props): JSX.Element => {
   const { t } = useTranslation();
 
   return (
     <Navbar bg="dark" variant="dark" sticky="top" id="main-nav">
-      <SidebarCollapseButton onCollapseSidebar={onCollapseSidebar} />
+      <SidebarToggleButton toggleSidebar={toggleSidebar} />
 
       <Brand />
 
diff --git a/src/layouts/main/components/sidebar/MainSidebar.scss b/src/layouts/main/components/sidebar/MainSidebar.scss
index 26c809a..0c58332 100644
--- a/src/layouts/main/components/sidebar/MainSidebar.scss
+++ b/src/layouts/main/components/sidebar/MainSidebar.scss
@@ -83,6 +83,9 @@
   background: $main-sidebar-backdrop-bg;
   opacity: 0;
 
+  // Ignore clicks when closed
+  pointer-events: none;
+
   // Below the sidebar and Bootstrap modals
   z-index: 900;
 
@@ -92,6 +95,10 @@
     display: block;
 
     &.show {
+      // Make clickable to hide when open
+      pointer-events: all;
+      cursor: pointer;
+
       opacity: $main-sidebar-backdrop-opacity;
     }
   }
diff --git a/src/layouts/main/components/sidebar/MainSidebar.tsx b/src/layouts/main/components/sidebar/MainSidebar.tsx
index 89bca11..3295946 100644
--- a/src/layouts/main/components/sidebar/MainSidebar.tsx
+++ b/src/layouts/main/components/sidebar/MainSidebar.tsx
@@ -16,6 +16,7 @@
 
 interface OwnProps {
   isCollapsed: boolean;
+  toggleSidebar: () => void;
 }
 
 interface StateProps {
@@ -28,7 +29,7 @@
 
 type Props = StateProps & OwnProps;
 
-const MainSidebarComponent: React.FC<Props> = ({ isGuest, isCollapsed }: Props): JSX.Element => {
+const MainSidebarComponent: React.FC<Props> = ({ isGuest, isCollapsed, toggleSidebar }: Props): JSX.Element => {
   const { t } = useTranslation();
 
   return (
@@ -65,7 +66,11 @@
       </div>
 
       {/* Fade the rest of the app out on mobile when the sidebar is open */}
-      <div id="main-sidebar-backdrop" className={isCollapsed ? "" : "show"} />
+      <div 
+        id="main-sidebar-backdrop" 
+        className={isCollapsed ? "" : "show"} 
+        onClick={() => toggleSidebar()} // Click the backdrop to close sidebar
+      />
     </>
   );
 };
diff --git a/src/layouts/main/components/sidebar/SidebarCollapseButton.scss b/src/layouts/main/components/sidebar/SidebarCollapseButton.scss
deleted file mode 100644
index 671e27f..0000000
--- a/src/layouts/main/components/sidebar/SidebarCollapseButton.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import "~scss/variables";
-
-#main-nav .navbar-toggler {
-  border: none;
-  border-right: 1px solid $border-color;
-  border-radius: 0;
-
-  // Make it full height
-  align-self: stretch;
-
-  &:hover {
-    background: $slighter;
-  }
-
-  &:active {
-    background: $lighter;
-  }
-
-  &:focus { 
-    outline: none;
-    box-shadow: $input-btn-focus-box-shadow;
-  }
-
-  // Hide unless mobile
-  display: none !important;
-  @include media-breakpoint-down(sm) {
-    display: block !important;
-  }
-}
diff --git a/src/layouts/main/components/sidebar/SidebarCollapseButton.tsx b/src/layouts/main/components/sidebar/SidebarCollapseButton.tsx
deleted file mode 100644
index cc9a848..0000000
--- a/src/layouts/main/components/sidebar/SidebarCollapseButton.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-
-import Navbar from "react-bootstrap/Navbar";
-
-import "./SidebarCollapseButton.scss";
-
-interface Props {
-  onCollapseSidebar: () => void;
-}
-
-export const SidebarCollapseButton: React.FC<Props> = ({ onCollapseSidebar }: Props): JSX.Element => {
-  return (
-    <Navbar.Toggle 
-      onClick={onCollapseSidebar}
-    />
-  );
-};
diff --git a/src/layouts/main/components/sidebar/SidebarToggleButton.scss b/src/layouts/main/components/sidebar/SidebarToggleButton.scss
new file mode 100644
index 0000000..671e27f
--- /dev/null
+++ b/src/layouts/main/components/sidebar/SidebarToggleButton.scss
@@ -0,0 +1,29 @@
+@import "~scss/variables";
+
+#main-nav .navbar-toggler {
+  border: none;
+  border-right: 1px solid $border-color;
+  border-radius: 0;
+
+  // Make it full height
+  align-self: stretch;
+
+  &:hover {
+    background: $slighter;
+  }
+
+  &:active {
+    background: $lighter;
+  }
+
+  &:focus { 
+    outline: none;
+    box-shadow: $input-btn-focus-box-shadow;
+  }
+
+  // Hide unless mobile
+  display: none !important;
+  @include media-breakpoint-down(sm) {
+    display: block !important;
+  }
+}
diff --git a/src/layouts/main/components/sidebar/SidebarToggleButton.tsx b/src/layouts/main/components/sidebar/SidebarToggleButton.tsx
new file mode 100644
index 0000000..974bcff
--- /dev/null
+++ b/src/layouts/main/components/sidebar/SidebarToggleButton.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+import Navbar from "react-bootstrap/Navbar";
+
+import "./SidebarToggleButton.scss";
+
+interface Props {
+  toggleSidebar: () => void;
+}
+
+export const SidebarToggleButton: React.FC<Props> = ({ toggleSidebar }: Props): JSX.Element => {
+  return (
+    <Navbar.Toggle 
+      onClick={toggleSidebar}
+    />
+  );
+};