From 009d6be057faee69b240d9ab3155c78394155ee9 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 30 Mar 2018 01:38:36 +0100
Subject: [PATCH] All clicking through the transparent area when the menu is
 open but nothing is selected

---
 .../styles/partials/bdsettings/button.scss    |  2 +-
 .../partials/bdsettings/sidebarview.scss      | 65 ++++++++++---------
 .../src/styles/partials/sidebarview/main.scss |  2 +
 3 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/button.scss b/client/src/styles/partials/bdsettings/button.scss
index 0069c3a4..9ab8ae99 100644
--- a/client/src/styles/partials/bdsettings/button.scss
+++ b/client/src/styles/partials/bdsettings/button.scss
@@ -55,7 +55,7 @@
             opacity: 1;
             width: 130px;
             height: 43px;
-            margin: 18px 0 17px 20px;
+            margin: 18px 0 17px 25px;
             cursor: default;
         }
     }
diff --git a/client/src/styles/partials/bdsettings/sidebarview.scss b/client/src/styles/partials/bdsettings/sidebarview.scss
index fd0155db..bdb1ae84 100644
--- a/client/src/styles/partials/bdsettings/sidebarview.scss
+++ b/client/src/styles/partials/bdsettings/sidebarview.scss
@@ -8,6 +8,7 @@
     transform: translateX(-100%) translateY(-100%);
     opacity: 0;
     transition: all .4s ease-in-out;
+    pointer-events: none;
 
     &.active {
         width: 900px;
@@ -15,20 +16,10 @@
         opacity: 1;
     }
 
-    .bd-sidebar-view::after {
-        content: "";
-        height: 100%;
-        width: 310px;
-        background-color: #202225;
-        top: 100%;
-        display: block;
-        position: absolute;
-    }
-
     .bd-settings-x {
         position: absolute;
         top: 18px;
-        left: 250px;
+        left: 255px;
         border: 2px solid #6e6e6e;
         border-radius: 50%;
         width: 25px;
@@ -39,7 +30,7 @@
         cursor: pointer;
 
         .platform-darwin & {
-            top: 40px;
+            top: 43px;
         }
 
         .bd-x-text {
@@ -65,10 +56,6 @@
         }
     }
 
-    .bd-sidebar-region .bd-scroller {
-        padding-top: 0;
-    }
-
     .bd-info {
         display: flex;
         align-items: flex-end;
@@ -108,6 +95,38 @@
         }
     }
 
+    .bd-sidebar-view {
+        &::after {
+            content: "";
+            height: 100%;
+            width: 310px;
+            background-color: #202225;
+            top: 100%;
+            display: block;
+            position: absolute;
+        }
+
+        .bd-sidebar-region .bd-scroller {
+            padding-top: 0;
+        }
+
+        .bd-content-region {
+            width: 590px;
+        }
+
+        &.active {
+            .bd-content-region {
+                transition: transform 0.4s ease-in-out, opacity 0.2s ease;
+                transform: none;
+                opacity: 1;
+            }
+        }
+
+        &.bd-stop .bd-content-region {
+            z-index: 3003;
+        }
+    }
+
     .platform-darwin & {
         top: 0px;
 
@@ -120,19 +139,7 @@
         top: 0;
     }
 
-    .bd-sidebar-view.bd-stop .bd-content-region {
-        z-index: 3003;
-    }
-
-    .bd-sidebar-view.active {
-        .bd-content-region {
-            transition: transform 0.4s ease-in-out, opacity 0.2s ease;
-            transform: none;
-            opacity: 1;
-        }
-    }
-
-    &:not(.active) .bd-sidebar-view.active,
+    &:not(.active) > .bd-sidebar-view.active,
     &.bd-settings-out .bd-sidebar-view.active {
         .bd-content-region {
             transform: translate(-600px, 0%);
diff --git a/client/src/styles/partials/sidebarview/main.scss b/client/src/styles/partials/sidebarview/main.scss
index 15e0a437..4cbdf8c6 100644
--- a/client/src/styles/partials/sidebarview/main.scss
+++ b/client/src/styles/partials/sidebarview/main.scss
@@ -19,6 +19,7 @@
         z-index: 5;
         max-width: 310px;
         min-width: 310px;
+        pointer-events: all;
 
         .bd-scroller {
             padding: 10px 10px 0 0;
@@ -32,6 +33,7 @@
         box-shadow: 0 0 4px #202225;
         backface-visibility: hidden;
         transition: transform 0.6s ease;
+        pointer-events: all;
     }
 
     &.bd-stop {