side pane

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;
+}