feat: toggle left menubar

renderer/components/Sidebar/MenuBar/index.js

@@ -1,9 +1,19 @@
 import React from 'react';
 import Link from 'next/link';
-import { IconCode, IconStack, IconGitPullRequest, IconUser, IconUsers, IconSettings,IconBuilding } from '@tabler/icons';
+import { IconCode, IconStack, IconGitPullRequest, IconUser, IconUsers, IconSettings, IconBuilding, IconChevronsLeft} from '@tabler/icons';
+import actions from 'providers/Store/actions';
+import { useStore } from 'providers/Store';
 import StyledWrapper from './StyledWrapper';
 
 const MenuBar = () => {
+  const [store, storeDispatch] = useStore();
+
+  const hideMenuBar = () => {
+    storeDispatch({
+      type: actions.TOGGLE_LEFT_MENUBAR
+    })
+  };
+
   return (
     <StyledWrapper className="h-full flex flex-col">
       <div className="flex flex-col">
@@ -35,6 +45,9 @@ const MenuBar = () => {
         <div className="menu-item">
           <IconSettings size={28} strokeWidth={1.5}/>
         </div>
+        <div className="menu-item" onClick={hideMenuBar}>
+          <IconChevronsLeft size={28} strokeWidth={1.5}/>
+        </div>
       </div>
     </StyledWrapper>
   );

renderer/components/Sidebar/StyledWrapper.js

@@ -1,9 +1,6 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.aside`
-  min-width: 270px;
-  width: 270px;
-  /* background-color: #F6F8FA; */
   background-color: var(--color-sidebar-background);
 
   .collection-title {

renderer/components/Sidebar/index.js

@@ -1,16 +1,31 @@
 import React from 'react';
+import actions from 'providers/Store/actions';
+import { useStore } from 'providers/Store';
 import Collections from './Collections';
 import MenuBar from './MenuBar';
 import TitleBar from './TitleBar';
-import { IconSearch } from '@tabler/icons';
+import { IconSearch, IconChevronsRight} from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 
 const Sidebar = () => {
-  return (
+  const [store, storeDispatch] = useStore();
-    <StyledWrapper>
+  const {
-      <div className="flex flex-row h-full">
+    asideWidth,
-        <MenuBar />
+    leftMenuBarOpen
+  } = store;
 
+  const showMenuBar = () => {
+    storeDispatch({
+      type: actions.TOGGLE_LEFT_MENUBAR
+    })
+  };
+
+  return (
+    <StyledWrapper style={{width: `${asideWidth}px`, minWidth: `${asideWidth}px`}}>
+      <div className="flex flex-row h-full">
+        {leftMenuBarOpen && <MenuBar />}
+
+        <div className="flex flex-col flex-grow">
           <div className="flex flex-col flex-grow">
             <TitleBar />
 
@@ -31,6 +46,13 @@ const Sidebar = () => {
 
             <Collections />
           </div>
+          <div
+            onClick={showMenuBar}
+            className="flex flex-col px-1 py-2 cursor-pointer text-gray-500 hover:text-gray-700"
+          >
+            {!leftMenuBarOpen && <IconChevronsRight size={24} strokeWidth={1.5}/>}
+          </div>
+        </div>
       </div>
     </StyledWrapper>
   );

renderer/providers/Store/actions.js

@@ -17,6 +17,7 @@ const ADD_NEW_GQL_REQUEST = "ADD_NEW_GQL_REQUEST";
 const IDB_CONNECTION_READY = "IDB_CONNECTION_READY";
 const IDB_COLLECTIONS_SYNC_STARTED = "IDB_COLLECTIONS_SYNC_STARTED";
 const IDB_COLLECTIONS_SYNC_ERROR = "IDB_COLLECTIONS_SYNC_ERROR";
+const TOGGLE_LEFT_MENUBAR = "TOGGLE_LEFT_MENUBAR";
 
 export default {
   SIDEBAR_COLLECTION_CLICK,
@@ -37,5 +38,6 @@ export default {
   ADD_NEW_GQL_REQUEST,
   IDB_CONNECTION_READY,
   IDB_COLLECTIONS_SYNC_STARTED,
-  IDB_COLLECTIONS_SYNC_ERROR
+  IDB_COLLECTIONS_SYNC_ERROR,
+  TOGGLE_LEFT_MENUBAR
 };

renderer/providers/Store/index.js

@@ -119,7 +119,9 @@ const initialState = {
 	activeRequestTabUid: null,
 	requestQueuedToSend: null,
 	requestTabs: [],
-	collectionsToSyncToIdb: []
+	collectionsToSyncToIdb: [],
+	asideWidth: 270,
+	leftMenuBarOpen: true
 };
 
 export const StoreProvider = props => {

renderer/providers/Store/reducer.js

@@ -329,6 +329,13 @@ const reducer = (state, action) => {
       });
     }
 
+    case actions.TOGGLE_LEFT_MENUBAR: {
+      return produce(state, (draft) => {
+        draft.leftMenuBarOpen = !draft.leftMenuBarOpen;
+        draft.asideWidth = draft.leftMenuBarOpen ? 270 : 222;
+      });
+    }
+
     default: {
       return state;
     }