From 30af732820a601e2c1e3f0227c6051bcbdb5fb28 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Mon, 30 Dec 2019 22:49:38 +0100
Subject: [PATCH] collapsible left panel

---
 web/src/Screen.js                  | 23 +++++++++++++----------
 web/src/widgets/WidgetIconPanel.js |  6 +++++-
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/web/src/Screen.js b/web/src/Screen.js
index 3c20f702..5e834003 100644
--- a/web/src/Screen.js
+++ b/web/src/Screen.js
@@ -1,13 +1,14 @@
-import React from "react";
-import theme from "./theme";
-import styled from "styled-components";
-import FilesTabsPanel from "./FilesTabsPanel";
-import WidgetIconPanel from "./widgets/WidgetIconPanel";
+import React from 'react';
+import theme from './theme';
+import styled from 'styled-components';
+import FilesTabsPanel from './FilesTabsPanel';
+import WidgetIconPanel from './widgets/WidgetIconPanel';
+import useCurrentWidget from './widgets/useCurrentWidget';
 
 const BodyDiv = styled.div`
   position: fixed;
   top: ${theme.tabsPanel.height}px;
-  left: ${theme.widgetMenu.iconSize + theme.leftPanel.width}px;
+  left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
   bottom: ${theme.statusBar.height}px;
   right: 0;
   background-color: ${theme.mainArea.background};
@@ -35,7 +36,7 @@ const TabsPanel = styled.div`
   display: flex;
   position: fixed;
   top: 0;
-  left: ${theme.widgetMenu.iconSize + theme.leftPanel.width}px;
+  left: ${props => theme.widgetMenu.iconSize + props.leftPanelWidth}px;
   height: ${theme.tabsPanel.height}px;
   right: 0;
   background-color: ${theme.tabsPanel.background};
@@ -51,16 +52,18 @@ const StausBar = styled.div`
 `;
 
 export default function Screen({ children }) {
+  const currentWidget = useCurrentWidget();
+  const leftPanelWidth = currentWidget ? theme.leftPanel.width : 0;
   return (
     <>
       <IconBar>
         <WidgetIconPanel />
       </IconBar>
-      <LeftPanel></LeftPanel>
-      <TabsPanel>
+      {!!currentWidget && <LeftPanel></LeftPanel>}
+      <TabsPanel leftPanelWidth={leftPanelWidth}>
         <FilesTabsPanel></FilesTabsPanel>
       </TabsPanel>
-      <BodyDiv>{children}</BodyDiv>
+      <BodyDiv leftPanelWidth={leftPanelWidth}>{children}</BodyDiv>
       <StausBar></StausBar>
     </>
   );
diff --git a/web/src/widgets/WidgetIconPanel.js b/web/src/widgets/WidgetIconPanel.js
index 8cf3f06e..0ebdedce 100644
--- a/web/src/widgets/WidgetIconPanel.js
+++ b/web/src/widgets/WidgetIconPanel.js
@@ -45,7 +45,11 @@ export default function WidgetIconPanel() {
   const setCurrentWidget = useSetCurrentWidget();
 
   return widgets.map(({ icon, name }) => (
-    <IconWrapper key={icon} isSelected={name === currentWidget} onClick={() => setCurrentWidget(name)}>
+    <IconWrapper
+      key={icon}
+      isSelected={name === currentWidget}
+      onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
+    >
       <FontIcon name={icon} />
     </IconWrapper>
   ));