From 893b433d44aed2f0b65504a51b50e7ed2fe5c2da Mon Sep 17 00:00:00 2001
From: Kichiyaki <dawidwysokinski000@gmail.com>
Date: Fri, 1 Jan 2021 14:47:05 +0100
Subject: [PATCH] close sidebar after route change

---
 .../ServerPage/common/PageLayout/PageLayout.tsx     |  8 ++++++--
 .../PageLayout/components/Sidebar/Sidebar.tsx       | 13 +++++++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/features/ServerPage/common/PageLayout/PageLayout.tsx b/src/features/ServerPage/common/PageLayout/PageLayout.tsx
index b78c970..1dfb04f 100644
--- a/src/features/ServerPage/common/PageLayout/PageLayout.tsx
+++ b/src/features/ServerPage/common/PageLayout/PageLayout.tsx
@@ -26,11 +26,15 @@ function PageLayout({ children }: Props) {
   const shouldOpenSidebar = isDesktop ? true : open;
 
   const openSidebar = () => {
-    setOpen(true);
+    if (!isDesktop) {
+      setOpen(true);
+    }
   };
 
   const closeSidebar = () => {
-    setOpen(false);
+    if (!isDesktop) {
+      setOpen(false);
+    }
   };
 
   return (
diff --git a/src/features/ServerPage/common/PageLayout/components/Sidebar/Sidebar.tsx b/src/features/ServerPage/common/PageLayout/components/Sidebar/Sidebar.tsx
index 8a74d03..729c605 100644
--- a/src/features/ServerPage/common/PageLayout/components/Sidebar/Sidebar.tsx
+++ b/src/features/ServerPage/common/PageLayout/components/Sidebar/Sidebar.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 import clsx from 'clsx';
 import { TFunction } from 'i18next';
 import useServer from '@features/ServerPage/libs/ServerContext/useServer';
@@ -31,8 +32,8 @@ export interface Props {
   t: TFunction;
   className?: string;
   open: boolean;
-  onClose: React.ReactEventHandler<{}>;
-  onOpen: React.ReactEventHandler<{}>;
+  onClose: () => void;
+  onOpen: () => void;
   variant?: DrawerProps['variant'];
 }
 
@@ -40,7 +41,7 @@ const Sidebar = ({ t, className, open, variant, onClose, onOpen }: Props) => {
   const classes = useStyles();
   const { key } = useServer();
   const theme = useTheme();
-
+  const { pathname } = useLocation();
   const routes: Route[] = [
     {
       name: t('pageLayout.sidebar.routes.dashboard'),
@@ -136,6 +137,10 @@ const Sidebar = ({ t, className, open, variant, onClose, onOpen }: Props) => {
     },
   ];
 
+  useEffect(() => {
+    onClose(); // eslint-disable-next-line
+  }, [pathname]);
+
   return (
     <SwipeableDrawer
       anchor="left"