From 9b93012b0871864738050a8f84580acf5c43bd58 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Tue, 4 Jun 2019 04:06:11 +0700
Subject: [PATCH] side pane

---
 src/components/flow/TestGrid/style.scss  |  1 +
 src/components/main/SidePane/index.tsx   | 38 ++++++++++++++++++++
 src/components/main/SidePane/styles.scss | 44 ++++++++++++++++++++++++
 src/containers/MainLayout/index.tsx      |  8 ++++-
 src/containers/MainLayout/style.scss     |  2 +-
 src/styles/colors.scss                   |  2 +-
 src/styles/global.scss                   |  2 +-
 src/styles/variables.scss                |  2 +-
 tsconfig.json                            |  1 +
 9 files changed, 95 insertions(+), 5 deletions(-)
 create mode 100644 src/components/main/SidePane/index.tsx
 create mode 100644 src/components/main/SidePane/styles.scss

diff --git a/src/components/flow/TestGrid/style.scss b/src/components/flow/TestGrid/style.scss
index e3e229aa..3c460158 100644
--- a/src/components/flow/TestGrid/style.scss
+++ b/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 {
diff --git a/src/components/main/SidePane/index.tsx b/src/components/main/SidePane/index.tsx
new file mode 100644
index 00000000..1a580d9c
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/main/SidePane/styles.scss b/src/components/main/SidePane/styles.scss
new file mode 100644
index 00000000..8a39eba7
--- /dev/null
+++ b/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;
+}
diff --git a/src/containers/MainLayout/index.tsx b/src/containers/MainLayout/index.tsx
index 4c0a473c..18bf60df 100644
--- a/src/containers/MainLayout/index.tsx
+++ b/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>
 );
diff --git a/src/containers/MainLayout/style.scss b/src/containers/MainLayout/style.scss
index 1936ffb1..42e73742 100644
--- a/src/containers/MainLayout/style.scss
+++ b/src/containers/MainLayout/style.scss
@@ -1,4 +1,4 @@
 .wrapper {
   width: 100%;
-  //padding: $gap 0;
+  padding: $gap 0;
 }
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index b564c33d..959aedb2 100644
--- a/src/styles/colors.scss
+++ b/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;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 6b75af29..561622a4 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -60,7 +60,7 @@ body {
 }
 
 :global(.content_container) {
-  background: $content_bg_color;
+  // background: $content_bg_color;
 }
 
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 18de67fb..fe7bbc66 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -2,7 +2,7 @@
 
 $cell: 256px;
 $content_width: $cell * 4;
-$gap: 8px;
+$gap: 10px;
 $spc: $gap * 2;
 $panel_radius: 1px;
 
diff --git a/tsconfig.json b/tsconfig.json
index 0c095e73..3ee6e9a6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,7 @@
     "sourceMap": true,
     "noImplicitAny": false,
     "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "module": "commonjs",
     "target": "es6",
     "jsx": "react",