flow: ui

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>

src/client/app.scss

@@ -21,9 +21,16 @@
 }
 
 .sidebar-wrapper {
+  max-width: calc(100% - 4em);
+  width: 0;
+  &.expanded {
     width: 24em;
   }
+}
 
 .resources-wrapper {
+  width: calc(100% - 4em);
+  &.sidebar-expanded {
     width: calc(100% - 28em);
   }
+}

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

src/client/scss/trait.scss

@@ -1,4 +1,3 @@
 %trait {
   font-size: 1.5em;
-  padding: 1em;
 }

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"
       >
 

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%;