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,35 +1,57 @@
 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 = () => {
+  const [store, storeDispatch] = useStore();
+  const {
+    asideWidth,
+    leftMenuBarOpen
+  } = store;
+
+  const showMenuBar = () => {
+    storeDispatch({
+      type: actions.TOGGLE_LEFT_MENUBAR
+    })
+  };
+
   return (
-    <StyledWrapper>
+    <StyledWrapper style={{width: `${asideWidth}px`, minWidth: `${asideWidth}px`}}>
       <div className="flex flex-row h-full">
-        <MenuBar />
+        {leftMenuBarOpen && <MenuBar />}
 
         <div className="flex flex-col flex-grow">
-          <TitleBar />
+          <div className="flex flex-col flex-grow">
+            <TitleBar />
 
-          <div className="mt-4 relative collection-filter px-2">
+            <div className="mt-4 relative collection-filter px-2">
-            <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-              <span className="text-gray-500 sm:text-sm">
+                <span className="text-gray-500 sm:text-sm">
-                <IconSearch size={16} strokeWidth={1.5}/>
+                  <IconSearch size={16} strokeWidth={1.5}/>
-              </span>
+                </span>
+              </div>
+              <input
+                type="text"
+                name="price"
+                id="price"
+                className="block w-full pl-7 py-1 sm:text-sm"
+                placeholder="search"
+              />
             </div>
-            <input
-              type="text"
-              name="price"
-              id="price"
-              className="block w-full pl-7 py-1 sm:text-sm"
-              placeholder="search"
-            />
-          </div>
 
-          <Collections />
+            <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;
     }