From c4753aa5d62e3fd2d980836f955d6bbef2f29630 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Sat, 27 Jun 2020 07:51:27 -0500
Subject: [PATCH] flow: ui

---
 src/client/app.jsx                | 29 +++++++++++++++++++++++++----
 src/client/app.scss               | 11 +++++++++--
 src/client/index.scss             |  5 +++--
 src/client/scss/trait.scss        |  1 -
 src/client/sidebar-icons.jsx      | 16 ++++++++++++----
 src/client/sidebar-icons.raw.scss |  9 +++++++++
 6 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/src/client/app.jsx b/src/client/app.jsx
index 18b6569..13483db 100644
--- a/src/client/app.jsx
+++ b/src/client/app.jsx
@@ -1,6 +1,8 @@
 import './app.scss';
 
 import {hot} from 'react-hot-loader';
+
+import classnames from 'classnames';
 import React, {useState} from 'react';
 
 import TypeRenderersContext from './context/typeRenderers';
@@ -16,17 +18,36 @@ const typeRenderMap = () => Object.values(allTypeRenderers()).reduce((r, M) => {
 
 const App = () => {
   const [typeRenderers] = useState(typeRenderMap());
+  const [activeSidebar, setActiveSidebar] = useState(0);
+  const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
   return (
     <div className="app">
       <TypeRenderersContext.Provider value={typeRenderers}>
         <div className="panes horizontal">
-          <div className="sidebar-icons-wrapper pane">
-            <SidebarIcons />
+          <div
+            className="sidebar-icons-wrapper pane"
+          >
+            <SidebarIcons
+              active={[activeSidebar, setActiveSidebar]}
+              isExpanded={[isSidebarExpanded, setIsSidebarExpanded]}
+            />
           </div>
-          <div className="sidebar-wrapper pane">
+          <div
+            className={classnames(
+              'sidebar-wrapper',
+              'pane',
+              {expanded: isSidebarExpanded},
+            )}
+          >
             <Sidebar />
           </div>
-          <div className="resources-wrapper pane">
+          <div
+            className={classnames(
+              'resources-wrapper',
+              'pane',
+              {'sidebar-expanded': isSidebarExpanded},
+            )}
+          >
             <Resources />
           </div>
         </div>
diff --git a/src/client/app.scss b/src/client/app.scss
index 7f4ea74..76ce70b 100644
--- a/src/client/app.scss
+++ b/src/client/app.scss
@@ -21,9 +21,16 @@
 }
 
 .sidebar-wrapper {
-  width: 24em;
+  max-width: calc(100% - 4em);
+  width: 0;
+  &.expanded {
+    width: 24em;
+  }
 }
 
 .resources-wrapper {
-  width: calc(100% - 28em);
+  width: calc(100% - 4em);
+  &.sidebar-expanded {
+    width: calc(100% - 28em);
+  }
 }
diff --git a/src/client/index.scss b/src/client/index.scss
index 9952550..4e9e477 100644
--- a/src/client/index.scss
+++ b/src/client/index.scss
@@ -48,6 +48,7 @@ table {
 html {
   background-color: #212121;
   color: #FFFFFF;
+  --active-color: rgb(0, 180, 204);
 }
 body {
   scrollbar-width: thin;
@@ -140,7 +141,7 @@ select {
 
 *:focus {
   position: relative;
-  box-shadow: 0 0 2px 0 #d68030ff;
+  box-shadow: 0 0 2px 0 var(--active-color);
   outline: none;
   z-index: 1;
 }
@@ -219,7 +220,7 @@ select {
 .react-tabs__tab-panel {
   display: none;
   overflow-y: auto;
-  height: calc(100% - 3em);
+  height: calc(100% - 2.7em);
   width: 100%;
 }
 
diff --git a/src/client/scss/trait.scss b/src/client/scss/trait.scss
index 044fac2..5a0bcc4 100644
--- a/src/client/scss/trait.scss
+++ b/src/client/scss/trait.scss
@@ -1,4 +1,3 @@
 %trait {
   font-size: 1.5em;
-  padding: 1em;
 }
diff --git a/src/client/sidebar-icons.jsx b/src/client/sidebar-icons.jsx
index c5d5d31..d923dd7 100644
--- a/src/client/sidebar-icons.jsx
+++ b/src/client/sidebar-icons.jsx
@@ -7,17 +7,25 @@ const decorate = compose(
   contempo(require('./sidebar-icons.raw.scss')),
 );
 
-const SidebarIcons = () => {
-  const [opened, setOpened] = useState(false);
+const SidebarIcons = (props) => {
+  const {
+    active: [activeSidebar, setActiveSidebar],
+    isExpanded: [isSidebarExpanded, setIsSidebarExpanded],
+  } = props;
   return (
     <div className="sidebar-icons">
       <button
         className={classnames(
           'icon',
           'files',
-          {opened},
+          {active: 0 === activeSidebar},
+          {expanded: 0 === activeSidebar && isSidebarExpanded},
         )}
-        onClick={() => setOpened(!opened)}
+        onClick={() => {
+          if (0 === activeSidebar) {
+            setIsSidebarExpanded(!isSidebarExpanded);
+          }
+        }}
         type="button"
       >
 
diff --git a/src/client/sidebar-icons.raw.scss b/src/client/sidebar-icons.raw.scss
index 8b59038..c203e45 100644
--- a/src/client/sidebar-icons.raw.scss
+++ b/src/client/sidebar-icons.raw.scss
@@ -12,6 +12,15 @@
   justify-content: center;
   height: 4em;
   width: 4em;
+  &.active {
+    border-left: 3px solid #ffffff;
+    svg path {
+      fill: #ffffff;
+    }
+  }
+  &.expanded {
+    border-left: 3px solid var(--active-color);
+  }
   svg {
     height: 100%;
     width: 100%;