rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-06-25 21:55:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: redux migration - toggle menubar

Browse Source
This commit is contained in:
Anoop M D
2022-03-17 09:41:27 +05:30
parent 8b48a388ad
commit b46d3c5a9e
10 changed files with 260 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
renderer/components/Sidebar/MenuBar/index.js
View File

@@ -1,18 +1,13 @@
import React from 'react';
import Link from 'next/link';
import { IconCode, IconStack, IconGitPullRequest, IconUser, IconUsers, IconSettings, IconBuilding, IconChevronsLeft} from '@tabler/icons';
import actions from 'providers/Store/actions';
import { useStore } from 'providers/Store';
import { useSelector, useDispatch } from 'react-redux';
import { toggleLeftMenuBar } from 'providers/ReduxStore/slices/app'
import StyledWrapper from './StyledWrapper';
const MenuBar = () => {
const [store, storeDispatch] = useStore();
const hideMenuBar = () => {
storeDispatch({
type: actions.TOGGLE_LEFT_MENUBAR
})
};
const leftMenuBarOpen = useSelector((state) => state.app.leftMenuBarOpen);
const dispatch = useDispatch();
return (
<StyledWrapper className="h-full flex flex-col">
@@ -45,7 +40,7 @@ const MenuBar = () => {
<div className="menu-item">
<IconSettings size={28} strokeWidth={1.5}/>
</div>
<div className="menu-item" onClick={hideMenuBar}>
<div className="menu-item" onClick={() => dispatch(toggleLeftMenuBar())}>
<IconChevronsLeft size={28} strokeWidth={1.5}/>
</div>
</div>

22
renderer/components/Sidebar/index.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import actions from 'providers/Store/actions';
import { useStore } from 'providers/Store';
import { useSelector, useDispatch } from 'react-redux';
import { toggleLeftMenuBar } from 'providers/ReduxStore/slices/app'
import Collections from './Collections';
import MenuBar from './MenuBar';
import TitleBar from './TitleBar';
@@ -8,20 +8,12 @@ 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
})
};
const leftMenuBarOpen = useSelector((state) => state.app.leftMenuBarOpen);
const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
const dispatch = useDispatch();
return (
<StyledWrapper style={{width: `${asideWidth}px`, minWidth: `${asideWidth}px`}}>
<StyledWrapper style={{width: `${leftSidebarWidth}px`, minWidth: `${leftSidebarWidth}px`}}>
<div className="flex flex-row h-full">
{leftMenuBarOpen && <MenuBar />}
@@ -47,7 +39,7 @@ const Sidebar = () => {
<Collections />
</div>
<div
onClick={showMenuBar}
onClick={() => dispatch(toggleLeftMenuBar())}
className="flex flex-col px-1 py-2 cursor-pointer text-gray-500 hover:text-gray-700"
>
{!leftMenuBarOpen && <IconChevronsRight size={24} strokeWidth={1.5}/>}