fix: fixed sidebar toggle width issues

This commit is contained in:
Anoop M D 2023-02-01 03:25:46 +05:30 committed by Anoop M D
parent 80f9e33be5
commit 05a290839b
2 changed files with 10 additions and 3 deletions

View File

@ -70,13 +70,16 @@ const Sidebar = () => {
setAsideWidth(leftSidebarWidth); setAsideWidth(leftSidebarWidth);
}, [leftSidebarWidth]); }, [leftSidebarWidth]);
const leftMenuBarWidth = leftMenuBarOpen ? 48 : 0;
const collectionsWidth = asideWidth - leftMenuBarWidth;
return ( return (
<StyledWrapper className="flex relative"> <StyledWrapper className="flex relative">
<aside style={{ width: `${asideWidth}px`, minWidth: `${asideWidth}px` }}> <aside>
<div className="flex flex-row h-full w-full"> <div className="flex flex-row h-full w-full">
{leftMenuBarOpen && <MenuBar />} {leftMenuBarOpen && <MenuBar />}
<div className="flex flex-col w-full"> <div className="flex flex-col w-full" style={{width: collectionsWidth}}>
<div className="flex flex-col flex-grow"> <div className="flex flex-col flex-grow">
<TitleBar /> <TitleBar />
<Collections /> <Collections />

View File

@ -18,7 +18,11 @@ export const appSlice = createSlice({
}, },
toggleLeftMenuBar: (state) => { toggleLeftMenuBar: (state) => {
state.leftMenuBarOpen = !state.leftMenuBarOpen; state.leftMenuBarOpen = !state.leftMenuBarOpen;
state.leftSidebarWidth = state.leftMenuBarOpen ? 270 : 222; if(state.leftMenuBarOpen) {
state.leftSidebarWidth += 48;
} else {
state.leftSidebarWidth -= 48;
}
}, },
refreshScreenWidth: (state) => { refreshScreenWidth: (state) => {
state.screenWidth = window.innerWidth; state.screenWidth = window.innerWidth;