Nav Bar Fixed

actualbudget · Sep 6, 2023 · 6e0469d · 6e0469d
1 parent 525c428
commit 6e0469d
Showing 1 changed file with 32 additions and 7 deletions.
diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx
@@ -53,24 +53,41 @@ function NarrowNotSupported({
   children: ReactElement;
 }) {
   const { isNarrowWidth } = useResponsive();
+  const { isExtraSmallWidth } = useResponsive();
+  let isWidth = false;
+
+  if (isNarrowWidth || isExtraSmallWidth) {
+    isWidth = true;
+  } else {
+    isWidth = false;
+  }
+
   const navigate = useNavigate();
   useEffect(() => {
-    if (isNarrowWidth) {
+    if (isWidth) {
       navigate(redirectTo);
     }
-  }, [isNarrowWidth, navigate, redirectTo]);
-  return isNarrowWidth ? null : children;
+  }, [isWidth, navigate, redirectTo]);
+  return isWidth ? null : children;
 }
 
 function WideNotSupported({ children, redirectTo = '/budget' }) {
   const { isNarrowWidth } = useResponsive();
+  const { isExtraSmallWidth } = useResponsive();
+  let isWidth = false;
+
+  if (isNarrowWidth || isExtraSmallWidth) {
+    isWidth = true;
+  } else {
+    isWidth = false;
+  }
   const navigate = useNavigate();
   useEffect(() => {
-    if (!isNarrowWidth) {
+    if (!isWidth) {
       navigate(redirectTo);
     }
-  }, [isNarrowWidth, navigate, redirectTo]);
-  return isNarrowWidth ? children : null;
+  }, [isWidth, navigate, redirectTo]);
+  return isWidth ? children : null;
 }
 
 function NavTab({ icon: TabIcon, name, path }) {
@@ -93,14 +110,22 @@ function NavTab({ icon: TabIcon, name, path }) {
 
 function MobileNavTabs() {
   const { isNarrowWidth } = useResponsive();
+  const { isExtraSmallWidth } = useResponsive();
+  let isWidth = false;
+
+  if (isNarrowWidth || isExtraSmallWidth) {
+    isWidth = true;
+  } else {
+    isWidth = false;
+  }
   return (
     <div
       style={{
         backgroundColor: theme.mobileNavBackground,
         borderTop: `1px solid ${theme.menuBorder}`,
         bottom: 0,
         ...styles.shadow,
-        display: isNarrowWidth ? 'flex' : 'none',
+        display: isWidth ? 'flex' : 'none',
         height: '80px',
         justifyContent: 'space-around',
         paddingTop: 10,