side pane

src/components/flow/TestGrid/style.scss

@@ -24,6 +24,7 @@ $cols: $content_width / $cell;
   display: flex;
   flex: 0 0;
   background: $cell_bg;
+  border-radius: 4px;
 
   @include outer_shadow();
   //&::after {

src/components/main/SidePane/index.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import * as styles from './styles.scss';
+import classNames from 'classnames';
+
+export const SidePane = ({ }) => {
+  const [left, setLeft] = useState(0);
+
+  const moveThis = () => {
+    const shift = ((document.body.getBoundingClientRect().width - 1024) / 2) - 54 - 10;
+    setLeft(shift);
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', moveThis)
+
+    return () => { window.removeEventListener('resize', moveThis); }
+  });
+
+  useEffect(moveThis, []);
+
+  return (
+    <div className={styles.pane} style={{ left }}>
+      <div className={classNames(styles.group, 'logo')} />
+      <div className={styles.group}>
+        <div className={styles.btn} />
+        <div className={styles.btn} />
+        <div className={styles.btn} />
+        <div className={styles.btn} />
+      </div>
+
+      <div className={styles.flexy} />
+
+      <div className={styles.group}>
+        <div className={styles.btn} />
+      </div>
+    </div>
+  );
+};

src/components/main/SidePane/styles.scss

@@ -0,0 +1,44 @@
+.pane {
+  width: 54px;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  padding: $gap / 2 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.group {
+  width: 54px;
+  border-radius: 4px;
+  margin: ($gap / 2) 0;
+  background: #191919;
+  box-sizing: border-box;
+  box-shadow: #111111 0 0 0 1px;
+
+  &:global(.logo) {
+    color: white;
+    height: (54px * 1.5) + $gap / 2;
+    background: url('http://vault48.org/pixmaps/logo.png') no-repeat -20px -40px #191919;
+    // #c1543d
+    background-size: 140px;
+    font-weight: 600;
+    font-family: Raleway;
+    font-size: 14px;
+    text-align: center;
+    padding-top: 66px;
+    box-shadow: inset #111111 0 -1px, inset #222222 0 1px;
+  }
+}
+
+.btn {
+  height: 54px;
+  box-shadow: inset #111111 0 -1px, inset #222222 0 1px;
+  border-radius: 4px;
+}
+
+.flexy {
+  flex: 1;
+}

src/containers/MainLayout/index.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react';
 import { Header } from "$components/main/Header";
+import {SidePane} from "$components/main/SidePane";
 
 const style = require('./style.scss');
 
 export const MainLayout = ({ children }) => (
   <div className={style.wrapper}>
-    <Header />
+    {
+      // <Header />
+    }
+    {
+      <SidePane />
+    }
     {children}
   </div>
 );

src/containers/MainLayout/style.scss

@@ -1,4 +1,4 @@
 .wrapper {
   width: 100%;
-  //padding: $gap 0;
+  padding: $gap 0;
 }

src/styles/colors.scss

@@ -10,7 +10,7 @@ $main_text_color: white;
 $content_bg_color: #222222;
 $content_bg_secondary: darken($content_bg_color, 3%);
 
-$cell_bg: transparentize(white, 0.98);
+$cell_bg: #222222;
 
 $text_normal: 16px;
 $text_small: 14px;

src/styles/global.scss

@@ -60,7 +60,7 @@ body {
 }
 
 :global(.content_container) {
-  background: $content_bg_color;
+  // background: $content_bg_color;
 }
 
 

src/styles/variables.scss

@@ -2,7 +2,7 @@
 
 $cell: 256px;
 $content_width: $cell * 4;
-$gap: 8px;
+$gap: 10px;
 $spc: $gap * 2;
 $panel_radius: 1px;
 

tsconfig.json

@@ -5,6 +5,7 @@
     "sourceMap": true,
     "noImplicitAny": false,
     "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "module": "commonjs",
     "target": "es6",
     "jsx": "react",