Fix height calculation of app layout components

The height of the app bar was lost after opening and closing the reader because ref was already created but its current value changed.
However, the ResizeObserver was still observing the old element.

Updated other hook usages, which might cause the same issue, as well

src/components/navbar/DefaultNavBar.tsx

@@ -87,7 +87,7 @@ export function DefaultNavBar() {
     const appBarRef = useRef<HTMLDivElement | null>(null);
     useResizeObserver(
         appBarRef,
-        useCallback(() => setAppBarHeight(appBarRef.current?.clientHeight ?? 0), [appBarRef]),
+        useCallback(() => setAppBarHeight(appBarRef.current?.clientHeight ?? 0), [appBarRef.current]),
     );
     useEffect(() => setAppBarHeight(0), []);
 

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -90,7 +90,7 @@ export const DesktopSideBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) =
     const ref = useRef<HTMLDivElement | null>(null);
     useResizeObserver(
         ref,
-        useCallback(() => setNavBarWidth(ref.current?.clientWidth ?? 0), [ref]),
+        useCallback(() => setNavBarWidth(ref.current?.clientWidth ?? 0), [ref.current]),
     );
     useEffect(() => () => setNavBarWidth(0), []);
 

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -25,7 +25,7 @@ export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] })
     const ref = useRef<HTMLDivElement | null>(null);
     useResizeObserver(
         ref,
-        useCallback(() => setBottomBarHeight(ref.current?.clientHeight ?? 0), [ref]),
+        useCallback(() => setBottomBarHeight(ref.current?.clientHeight ?? 0), [ref.current]),
     );
     useEffect(() => () => setBottomBarHeight(0), []);
 

src/components/tabs/TabsMenu.tsx

@@ -37,7 +37,7 @@ export const TabsMenu = forwardRef(
         const [width, setWidth] = useState<number>();
         useResizeObserver(
             tabsMenuRef,
-            useCallback(() => setWidth(tabsMenuRef.current?.clientWidth), [tabsMenuRef]),
+            useCallback(() => setWidth(tabsMenuRef.current?.clientWidth), [tabsMenuRef.current]),
         );
 
         // Visual Hack: 160px is min-width for viewport width of >600

src/screens/Browse.tsx

@@ -26,7 +26,7 @@ export function Browse() {
     const [tabsMenuHeight, setTabsMenuHeight] = useState(0);
     useResizeObserver(
         tabsMenuRef,
-        useCallback(() => setTabsMenuHeight(tabsMenuRef.current!.offsetHeight), [tabsMenuRef]),
+        useCallback(() => setTabsMenuHeight(tabsMenuRef.current!.offsetHeight), [tabsMenuRef.current]),
     );
 
     const [tabNum, setTabNum] = useState<number>(0);