1 files changed, 40 insertions, 8 deletions

diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss
index 55660a088..426032bf6 100644
--- a/src/styles/vertical.scss
+++ b/src/styles/vertical.scss
@@ -1,13 +1,24 @@
-$sidebar-width: 65px;
+@import './config.scss';
+
+$sidebar-width: 64px;
 
 .sidebar {
   width: 100vw;
   height: $sidebar-width;
   flex-direction: row;
   position: absolute;
+  top: 0;
   right: 0;
   padding-bottom: 0px;
 
+  &::after {
+    top: -10px;
+    right: -10px;
+    bottom: 0;
+    left: -10px;
+    clip-path: inset(10px 10px 0 10px);
+  }
+
   div:first-of-type {
     overflow-x: scroll;
     width: 100%;
@@ -22,7 +33,6 @@ $sidebar-width: 65px;
         border-left-width: 0px;
         border-top-width: 4px;
         border-top-style: solid;
-        border-top-color: #7367f0;
         padding-left: 4px;
       }
 
@@ -40,17 +50,39 @@ $sidebar-width: 65px;
   }
 }
 
-.app_service {
-  width: 100vw;
-  position: absolute;
-  top: $sidebar-width;
-  right: 0;
+.app .app__content {
+  padding-top: $sidebar-width;
+}
+
+.workspaces-drawer {
+  margin-top: -$sidebar-width;
+  height: 100vh;
+  position: relative;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    top: -10px;
+    right: 0;
+    bottom: -10px;
+    left: -10px;
+    z-index: 1000;
+    pointer-events: none;
+    clip-path: inset(10px 0 10px 10px);
+    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .12),
+                inset 0 0 2px 0 rgba(0, 0, 0, 0.36);
+  }
 }
 
 .theme__dark {
   .sidebar .sidebar__button--workspaces.is-active {
     background-color: #2d2f31;
   }
+
+  .workspaces-drawer::after {
+    box-shadow: inset 0 0 10px 0 $dark-theme-black,
+                inset 0 0 2px 0 rgba(0, 0, 0, 0.4);
+  }
 }
 
 .darwin .sidebar {
@@ -59,4 +91,4 @@ $sidebar-width: 65px;
   .sidebar__button--workspaces.is-active {
     height: $sidebar-width - 22px;
   }
-}
\ No newline at end of file
+}