made sidebar position absolute

common/constants.js

@@ -27,10 +27,10 @@ export const system = {
 
 export const zindex = {
   navigation: 1,
-  sidebar: 2,
+  sidebar: 4,
   header: 3,
-  modal: 4,
-  tooltip: 5,
+  modal: 5,
+  tooltip: 6,
 };
 
 export const font = {
@@ -63,4 +63,4 @@ export const theme = {
 
 export const gateways = {
   ipfs: "ipfs.slate.textile.io",
-}
+};

components/core/ApplicationLayout.js

@@ -4,6 +4,7 @@ import * as SVG from "~/components/system/svg";
 
 import { css } from "@emotion/react";
 import { GlobalTooltip } from "~/components/system/components/fragments/GlobalTooltip";
+import { Boundary } from "~/components/system/components/fragments/Boundary";
 
 const STYLES_SCROLL = css`
   -webkit-overflow-scrolling: touch;
@@ -104,10 +105,15 @@ const STYLES_NAVIGATION = css`
 `;
 
 const STYLES_SIDEBAR_WEB = css`
+  z-index: ${Constants.zindex.sidebar};
   height: 100vh;
   width: ${Constants.sizes.sidebar}px;
   padding: 0;
   flex-shrink: 0;
+  position: absolute;
+  background-color: ${Constants.system.foreground};
+  top: 0;
+  right: 0;
   box-shadow: inset 1px 0 0 0 ${Constants.system.border};
   ${STYLES_SCROLL}
   @media (max-width: ${Constants.sizes.mobile}px) {
@@ -183,6 +189,7 @@ export default class ApplicationLayout extends React.Component {
             ref={(c) => {
               this._body = c;
             }}
+            id="slate-client-body"
           >
             {this.props.children}
           </div>
@@ -191,6 +198,7 @@ export default class ApplicationLayout extends React.Component {
           </div>
         </div>
         {this.props.sidebar ? (
+          <Boundary onOutsideRectEvent={this.props.onDismissSidebar} enabled>
             <div
               css={STYLES_SIDEBAR_WEB}
               ref={(c) => {
@@ -199,6 +207,7 @@ export default class ApplicationLayout extends React.Component {
             >
               {sidebarElements}
             </div>
+          </Boundary>
         ) : null}
       </div>
     );