use routes to render ui

src/App.tsx

@@ -1,46 +1,20 @@
 import { useEffect, useMemo, useState } from "react";
-import Grid from "@mui/material/Grid";
-import Tabs from "@mui/material/Tabs";
-import Tab from "@mui/material/Tab";
-import AppBar from "@mui/material/AppBar";
-
+import Grid from "@mui/material/Grid2";
 import { useRoutes } from "react-router-dom";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 
 // components
 import Header from "components/Header";
-import routes from "routes";
+import { DesktopRoutes, MobileRoutes } from "routes";
 import DesktopBackground from "assets/DesktopBackground.jpg";
-import MobileBackground from "assets/MobileBackground.jpg";
 import SparusErrorContext from "utils/Context";
 
-// Icons
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import HomeIcon from "@mui/icons-material/Home";
-
-function HomePanel({ value, index }: { value: number; index: number }) {
-  return value === index ? (
-    <Grid
-      sx={{
-        display: {
-          sm: "none",
-          xs: "block",
-        },
-        height: "93%",
-        width: "100vw",
-        backgroundSize: "cover",
-        backgroundImage: `url(${MobileBackground})`,
-      }}
-    />
-  ) : null;
-}
-
 function App() {
   const [globalError, setGlobalError] = useState("");
-  const [currentTab, setCurrentTab] = useState(0);
 
   const theme = createTheme();
-  const routing = useRoutes(routes);
+  const DesktopRouting = useRoutes(DesktopRoutes);
+  const MobileRouting = useRoutes(MobileRoutes);
 
   const errorCache = useMemo(
     () => ({
@@ -83,12 +57,10 @@ function App() {
             },
           }}
         >
-          <Grid item xs={12}>
+          <Grid xs={12}>
             <Header />
           </Grid>
-          <Grid item xs={12}>
-            {routing}
-          </Grid>
+          <Grid xs={12}>{DesktopRouting}</Grid>
         </Grid>
         <Grid
           container
@@ -103,33 +75,7 @@ function App() {
             },
           }}
         >
-          <HomePanel value={currentTab} index={0} />
-          <AppBar
-            position="fixed"
-            sx={{
-              top: "auto",
-              bottom: 0,
-              display: {
-                sm: "none",
-                xs: "block",
-              },
-            }}
-          >
-            <Tabs
-              indicatorColor="secondary"
-              textColor="inherit"
-              variant="fullWidth"
-              value={currentTab}
-              aria-label="menu tab"
-              onChange={(_, tab: number) => setCurrentTab(tab)}
-            >
-              <Tab icon={<HomeIcon fontSize="large" />} aria-label="home" />
-              <Tab
-                icon={<AccountCircleIcon fontSize="large" />}
-                aria-label="account"
-              />
-            </Tabs>
-          </AppBar>
+          {MobileRouting}
         </Grid>
       </ThemeProvider>
     </SparusErrorContext.Provider>

src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import IconButton from "@mui/material/IconButton";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import { useNavigate, useLocation } from "react-router-dom";
 
 // Icons
@@ -22,7 +22,7 @@ function Header() {
 
   return (
     <Grid container>
-      <Grid item xs={1}>
+      <Grid size={1}>
         {location.pathname !== "/" ? (
           <IconButton
             color="primary"
@@ -34,8 +34,7 @@ function Header() {
         ) : null}
       </Grid>
       <Grid
-        item
-        xs={9}
+        size={8}
         sx={{ height: 50 }}
         onMouseDown={() => {
           getCurrentWindow()
@@ -44,13 +43,14 @@ function Header() {
         }}
       />
       <Grid
-        item
+        container
+        size={4}
         sx={{
           display: {
             sm: "block",
             xs: "none",
           },
-          position: "fixed",
+          position: "absolute",
           right: 0,
         }}
       >

src/routes.tsx

@@ -1,7 +1,8 @@
 import Index from "components/Index";
 import Options from "components/Options";
+import MobileIndex from "views/MobileIndex";
 
-const routes = [
+export const DesktopRoutes = [
   {
     path: "/",
     element: <Index />,
@@ -12,4 +13,9 @@ const routes = [
   },
 ];
 
-export default routes;
+export const MobileRoutes = [
+  {
+    path: "/",
+    element: <MobileIndex />,
+  },
+];

src/views/MobileIndex.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import Grid from "@mui/material/Grid";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import AppBar from "@mui/material/AppBar";
+import MobileBackground from "assets/MobileBackground.jpg";
+
+// Icons
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import HomeIcon from "@mui/icons-material/Home";
+
+function HomePanel({ value, index }: { value: number; index: number }) {
+  return value === index ? (
+    <Grid
+      sx={{
+        display: {
+          sm: "none",
+          xs: "block",
+        },
+        height: "93%",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundImage: `url(${MobileBackground})`,
+      }}
+    />
+  ) : null;
+}
+
+function MobileIndex() {
+  const [currentTab, setCurrentTab] = useState(0);
+
+  return (
+    <>
+      <HomePanel value={currentTab} index={0} />
+      <AppBar
+        position="fixed"
+        sx={{
+          top: "auto",
+          bottom: 0,
+          display: {
+            sm: "none",
+            xs: "block",
+          },
+        }}
+      >
+        <Tabs
+          indicatorColor="secondary"
+          textColor="inherit"
+          variant="fullWidth"
+          value={currentTab}
+          aria-label="menu tab"
+          onChange={(_, tab: number) => setCurrentTab(tab)}
+        >
+          <Tab icon={<HomeIcon fontSize="large" />} aria-label="home" />
+          <Tab
+            icon={<AccountCircleIcon fontSize="large" />}
+            aria-label="account"
+          />
+        </Tabs>
+      </AppBar>
+    </>
+  );
+}
+
+export default MobileIndex;