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,