From fa3246b725d0cd1b1a3e8777134ff2e55a96fcab Mon Sep 17 00:00:00 2001
From: Eric NGUYEN <enguyen@techform.fr>
Date: Mon, 3 Oct 2022 14:24:26 +0200
Subject: [PATCH] Fix mobile view left single sidebar + Fix Bar wrong icon
 toggled

---
 src/Components/Bar/Bar.tsx |  2 +-
 src/Components/UI/UI.tsx   | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/Components/Bar/Bar.tsx b/src/Components/Bar/Bar.tsx
index 04a0b16..4c0b5e7 100644
--- a/src/Components/Bar/Bar.tsx
+++ b/src/Components/Bar/Bar.tsx
@@ -79,7 +79,7 @@ export function Bar(props: IBarProps): JSX.Element {
         title='Settings'
         onClick={() => props.toggleSettings()}>
         {
-          props.isMessagesOpen
+          props.isSettingsOpen
             ? <Cog8ToothIconS className='heroicon' />
             : <Cog8ToothIcon className='heroicon' />
         }
diff --git a/src/Components/UI/UI.tsx b/src/Components/UI/UI.tsx
index a2f4ea1..06b17b1 100644
--- a/src/Components/UI/UI.tsx
+++ b/src/Components/UI/UI.tsx
@@ -135,15 +135,27 @@ export function UI(props: IUIProps): JSX.Element {
   const isLeftSidebarOpen = selectedSidebar !== SidebarType.None;
   const isRightSidebarOpen = selectedSidebar === SidebarType.Components || selectedSidebar === SidebarType.Symbols;
 
-  let isLeftSidebarOpenClasses = 'left-16 -bottom-full md:-left-64 md:bottom-0';
+  let isLeftSidebarOpenClasses = new Set<string>([
+    'left-sidebar',
+    'left-16',
+    '-bottom-full',
+    'md:-left-64',
+    'md:bottom-0'
+  ]);
+
   let isRightSidebarOpenClasses = 'right-0 -bottom-full md:-right-80 md:bottom-0';
 
   if (isLeftSidebarOpen) {
-    isLeftSidebarOpenClasses = 'left-16';
+    isLeftSidebarOpenClasses.delete('-bottom-full');
+    isLeftSidebarOpenClasses.delete('md:-left-64');
+    isLeftSidebarOpenClasses.delete('md:bottom-0');
   }
 
   if (isRightSidebarOpen) {
     isRightSidebarOpenClasses = 'right-0';
+  } else {
+    isLeftSidebarOpenClasses.delete('left-sidebar');
+    isLeftSidebarOpenClasses.add('left-sidebar-single');
   }
 
   return (
@@ -171,7 +183,7 @@ export function UI(props: IUIProps): JSX.Element {
         } }
       />
       <Sidebar
-        className={`left-sidebar ${isLeftSidebarOpenClasses}`}
+        className={`${[...isLeftSidebarOpenClasses.values()].join(' ')}`}
         title={leftSidebarTitle}
       >
         { leftChildren }