fix: left sidebar hiding isssue

components/Dashboard/index.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 import NoSSR from 'react-no-ssr'
 import {
@@ -27,6 +27,14 @@ const Container = styled.div`
 `
 
 const Dashboard = () => {
+  const [hideSidePanelFlag, setHideSidePanelFlag] = useState(false)
+
+    const onFilterSelect = (name) => {
+      if (name === 'Hide') {
+        setHideSidePanelFlag(!hideSidePanelFlag)
+      }
+    }
+
   return (
     <Provider store={store}>
       <Container>
@@ -37,9 +45,9 @@ const Dashboard = () => {
               width={isMobile ? '100%' : '70%'}
             />
           </NoSSR>
-        )}
-        <FilterPanel />
-        <SidePanel />
+        ) : null}
+        <FilterPanel onFilterSelect={onFilterSelect}/>
+        <SidePanel hideSidePanel={hideSidePanelFlag}/>
         {isBrowser && (
           <NoSSR>
             <NetworkMap

components/FilterPanel/index.js

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { connect } from 'react-redux'
 import _ from 'lodash'
 
-import { state, city, abroad, p2p } from '../../images/index'
+import { state, city, abroad, p2p, hide } from '../../images/index'
 import {
   addStates,
   removeStates,
@@ -28,16 +28,16 @@ const filters = [
   },
   { name: 'State', icon: state, add: addStates, remove: removeStates },
   { name: 'City', icon: city, add: addCities, remove: removeCities },
+  { name: 'Hide', icon: hide, add: () => {}, remove: () => {} },
   { name: 'Travel', icon: abroad, add: addTravel, remove: removeTravel },
 ]
 
 //{ name: 'Travel', icon: abroad, add: addTravel, remove: removeTravel },
 
 const HeaderContainer = styled.div`
-  padding-top: 10px;
+  padding: 10px 0px;
   background-color: #f2f2f2;
-  display: grid;
-  grid-template-rows: 7% 93%;
+  grid-template-rows: 15% 93%;
   overflow: auto;
   font-family: 'Lato', sans-serif;
   color: #7c7a7a;
@@ -51,7 +51,6 @@ const HeaderContainer = styled.div`
 `
 
 const FilterMenuContainer = styled.div`
-  display: grid;
   grid-template-rows: 10% 10% 10% 10% 60%;
   overflow: auto;
   font-family: 'Lato', sans-serif;
@@ -67,14 +66,13 @@ const FilterMenuContainer = styled.div`
 const FilterCategory = ({ filter, onClick, selected }) => {
   const FilterContainer = styled.div`
     display: flex;
+    margin: 10px 0;
     flex-direction: column;
     align-items: center;
     justify-content: space-evenly;
-    height: '20vh';
-    user-select: none;
     background-color: ${props => (props.selected ? '#d6d6d6' : '#F2F2F2')};
     transition: all 0.2s ease-out;
-    cursor: pointer;
+
     &:hover {
       background-color: #d7d7d7;
     }
@@ -85,7 +83,7 @@ const FilterCategory = ({ filter, onClick, selected }) => {
   `
 
   const FilterIcon = styled.img`
-    width: 40px;
+    width: 30px;
   `
 
   return (
@@ -102,7 +100,8 @@ const FilterPanel = ({
   updateGraph,
   selectFilter,
   filter,
-  states
+  states,
+  onFilterSelect,
 }) => {
   // const [selected, selectCategory] = React.useState('P2P')
 
@@ -120,12 +119,13 @@ const FilterPanel = ({
     selectFilter(name)
     newGraph = choosenFilter.add(newGraph, patients.byId, states)
     console.log(newGraph)
+    onFilterSelect(name)
     updateGraph(newGraph)
   }
   const FilterHeader = styled.div`
     text-align: center;
     text-transform: uppercase;
-    font-size: 14px;
+    font-size: 10px;
 
     @media screen and (max-width: 768px) {
       display: flex;
@@ -153,7 +153,7 @@ const FilterPanel = ({
 
 const mapStateToProps = state => {
   const { patients, graph, filter, states } = state
-  return { graph, patients, filter, states}
+  return { graph, patients, filter, states }
 }
 
 export default connect(mapStateToProps, { updateGraph, selectFilter })(

components/NetworkMapLegend/index.js

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import styled from 'styled-components'
 import {
     male_hosp,
@@ -12,7 +11,6 @@ import {
 
 
 const LegendContainer = styled.div`
-    position: absolute;
     top: 0;
     left: 30%;
     display: flex;
@@ -24,7 +22,7 @@ const LegendContainer = styled.div`
     margin-left: 5px;
     margin-top: 5px;
     z-index: 2;
-
+    width: 105px;
 
     @media screen and (max-width: 768px) {
         padding: 4px;

components/SidePanel/header.js

@@ -14,7 +14,7 @@ const Container = styled.div`
 const Title = styled.div`
   text-transform: uppercase;
   font-weight: bold;
-  font-size: 14px;
+  font-size: 14 px;
   color: #858383;
 `
 

components/SidePanel/index.js

@@ -5,17 +5,19 @@ import { connect } from 'react-redux'
 import Header from './header'
 import DataGrid from './datagrid'
 
-const Container = styled.div`
-  background-color: #fafafa;
-  padding: 15px;
-  overflow: auto;
-`
-
-const SidePanel = ({ patient, lastRefreshed }) => {
+const SidePanel = ({ patient, lastRefreshed, hideSidePanel }) => {
+  const Container = styled.div`
+    background-color: #fafafa;
+    padding: 15px;
+    overflow: auto;
+    display: ${hideSidePanel ? 'none' : 'block'};
+  `
 
   return (
     <Container>
-      {patient ? <Header patient={patient} lastRefreshed={lastRefreshed} /> : null}
+      {patient ? (
+        <Header patient={patient} lastRefreshed={lastRefreshed} />
+      ) : null}
       {patient ? <DataGrid {...patient} /> : null}
     </Container>
   )

images/index.js

@@ -9,6 +9,7 @@ import abroad from './filter/abroad.png'
 import state from './filter/state.png'
 import city from './filter/city.png'
 import p2p from './filter/p2p.png'
+import hide from './filter/hide.png'
 
 import state_node from './nodes/state.png'
 import city_node from './nodes/city.png'
@@ -26,6 +27,7 @@ export {
   city,
   state_node,
   p2p,
+  hide,
   city_node,
   abroad,
   plane_abroad_node,