From d2b0e8831c20023c9caf7a9349410b3dfd0e4441 Mon Sep 17 00:00:00 2001
From: Walidoux <ma.walidkorchi@icloud.com>
Date: Mon, 21 Mar 2022 21:42:11 +0100
Subject: [PATCH] fix(components): change sidebar behaviour

---
 components/Application/Application.tsx     | 10 ++++++++++
 components/Application/Sidebar/Sidebar.tsx |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/Application/Application.tsx b/components/Application/Application.tsx
index 7a353df..d870188 100644
--- a/components/Application/Application.tsx
+++ b/components/Application/Application.tsx
@@ -99,6 +99,15 @@ export const Application: React.FC<ApplicationProps> = (props) => {
     }
   }
 
+  const handleCloseSidebars = (): void => {
+    if (isMobile && (visibleSidebars.left || visibleSidebars.right)) {
+      return setVisibleSidebars({
+        left: false,
+        right: false
+      })
+    }
+  }
+
   const swipeableHandlers = useSwipeable({
     trackMouse: false,
     trackTouch: true,
@@ -202,6 +211,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
 
         <div
           id='application-page-content'
+          onClick={handleCloseSidebars}
           className={classNames(
             'h-full-without-header top-0 z-0 flex w-full flex-1 flex-col overflow-y-auto transition',
             {
diff --git a/components/Application/Sidebar/Sidebar.tsx b/components/Application/Sidebar/Sidebar.tsx
index 9fc7a09..3ab6e84 100644
--- a/components/Application/Sidebar/Sidebar.tsx
+++ b/components/Application/Sidebar/Sidebar.tsx
@@ -17,12 +17,12 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
   return (
     <nav
       className={classNames(
-        'h-full-without-header z-50 flex bg-gray-200 drop-shadow-2xl transition-all dark:bg-gray-800',
+        'h-full-without-header visible z-50 flex bg-gray-200 drop-shadow-2xl transition-all dark:bg-gray-800',
         {
           'scrollbar-firefox-support top-0 right-0 flex-col space-y-1 overflow-y-auto':
             direction === 'right',
           'w-72': direction === 'right' && visible,
-          'w-0 opacity-0': !visible,
+          'invisible w-0 opacity-0': !visible,
           'w-80': direction === 'left' && visible,
           'max-w-max': typeof path !== 'string' && direction === 'left',
           'top-0 right-0': direction === 'right' && isMobile,