From 847a5c68b27e4045dfd62800838c671cc61fc0c3 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sat, 13 Jul 2024 15:35:34 +0200
Subject: [PATCH] Reset app bar height to 0 on unmount

---
 src/components/navbar/DefaultNavBar.tsx              | 3 ++-
 src/components/navbar/navigation/DesktopSideBar.tsx  | 3 +--
 src/components/navbar/navigation/MobileBottomBar.tsx | 3 +--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/navbar/DefaultNavBar.tsx b/src/components/navbar/DefaultNavBar.tsx
index 68b4bad3..f3a818da 100644
--- a/src/components/navbar/DefaultNavBar.tsx
+++ b/src/components/navbar/DefaultNavBar.tsx
@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useCallback, useContext, useMemo, useRef } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
@@ -89,6 +89,7 @@ export function DefaultNavBar() {
         appBarRef,
         useCallback(() => setAppBarHeight(appBarRef.current?.clientHeight ?? 0), [appBarRef]),
     );
+    useEffect(() => setAppBarHeight(0), []);
 
     const activeNavBar: NavbarItem['show'] = isMobileWidth ? 'mobile' : 'desktop';
     const visibleNavBarItems = useMemo(
diff --git a/src/components/navbar/navigation/DesktopSideBar.tsx b/src/components/navbar/navigation/DesktopSideBar.tsx
index d3f09598..7258e3bc 100644
--- a/src/components/navbar/navigation/DesktopSideBar.tsx
+++ b/src/components/navbar/navigation/DesktopSideBar.tsx
@@ -87,13 +87,12 @@ const MAX_WIDTH_EXTENDED = 400;
 export const DesktopSideBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
     const { isCollapsed, setIsCollapsed, navBarWidth, setNavBarWidth } = useNavBarContext();
 
-    useEffect(() => () => setNavBarWidth(0), []);
-
     const ref = useRef<HTMLDivElement | null>(null);
     useResizeObserver(
         ref,
         useCallback(() => setNavBarWidth(ref.current?.clientWidth ?? 0), [ref]),
     );
+    useEffect(() => () => setNavBarWidth(0), []);
 
     return (
         <Drawer variant="permanent" sx={{ width: navBarWidth }}>
diff --git a/src/components/navbar/navigation/MobileBottomBar.tsx b/src/components/navbar/navigation/MobileBottomBar.tsx
index 8aa27573..54375b6e 100644
--- a/src/components/navbar/navigation/MobileBottomBar.tsx
+++ b/src/components/navbar/navigation/MobileBottomBar.tsx
@@ -22,13 +22,12 @@ export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] })
     const location = useLocation();
     const navigate = useNavigate();
 
-    useEffect(() => () => setBottomBarHeight(0), []);
-
     const ref = useRef<HTMLDivElement | null>(null);
     useResizeObserver(
         ref,
         useCallback(() => setBottomBarHeight(ref.current?.clientHeight ?? 0), [ref]),
     );
+    useEffect(() => () => setBottomBarHeight(0), []);
 
     const [selectedNavBarItem, setSelectedNavBarItem] = useState(
         navBarItems.find((navBarItem) => navBarItem.path === location.pathname)?.path,