From 05a290839bde5cd1093b6729ee03fd9c790a3e46 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Wed, 1 Feb 2023 03:25:46 +0530
Subject: [PATCH] fix: fixed sidebar toggle width issues

---
 packages/bruno-app/src/components/Sidebar/index.js        | 7 +++++--
 packages/bruno-app/src/providers/ReduxStore/slices/app.js | 6 +++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/bruno-app/src/components/Sidebar/index.js b/packages/bruno-app/src/components/Sidebar/index.js
index be5c92982..ca92d551a 100644
--- a/packages/bruno-app/src/components/Sidebar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/index.js
@@ -70,13 +70,16 @@ const Sidebar = () => {
     setAsideWidth(leftSidebarWidth);
   }, [leftSidebarWidth]);
 
+  const leftMenuBarWidth = leftMenuBarOpen ? 48 : 0;
+  const collectionsWidth = asideWidth - leftMenuBarWidth;
+
   return (
     <StyledWrapper className="flex relative">
-      <aside style={{ width: `${asideWidth}px`, minWidth: `${asideWidth}px` }}>
+      <aside>
         <div className="flex flex-row h-full w-full">
           {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">
               <TitleBar />
               <Collections />
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/app.js b/packages/bruno-app/src/providers/ReduxStore/slices/app.js
index 6736370c2..b04ccaca6 100644
--- a/packages/bruno-app/src/providers/ReduxStore/slices/app.js
+++ b/packages/bruno-app/src/providers/ReduxStore/slices/app.js
@@ -18,7 +18,11 @@ export const appSlice = createSlice({
     },
     toggleLeftMenuBar: (state) => {
       state.leftMenuBarOpen = !state.leftMenuBarOpen;
-      state.leftSidebarWidth = state.leftMenuBarOpen ? 270 : 222;
+      if(state.leftMenuBarOpen) {
+        state.leftSidebarWidth += 48;
+      } else {
+        state.leftSidebarWidth -= 48;
+      }
     },
     refreshScreenWidth: (state) => {
       state.screenWidth = window.innerWidth;