feat: mobile interface

src/App.tsx

@@ -1,17 +1,44 @@
 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 { useRoutes } from "react-router-dom";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 
 // components
 import Header from "components/Header";
 import routes from "routes";
-import Background from "assets/background.jpg";
+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);
 
@@ -46,9 +73,14 @@ function App() {
           spacing={0}
           m={-1}
           sx={{
-            height: 600,
-            width: 800,
-            backgroundImage: `url(${Background})`,
+            height: "100vh",
+            width: "100vw",
+            backgroundSize: "cover",
+            backgroundImage: `url(${DesktopBackground})`,
+            display: {
+              sm: "block",
+              xs: "none",
+            },
           }}
         >
           <Grid item xs={12}>
@@ -58,6 +90,47 @@ function App() {
             {routing}
           </Grid>
         </Grid>
+        <Grid
+          container
+          spacing={0}
+          m={-1}
+          sx={{
+            height: "100vh",
+            width: "100vw",
+            display: {
+              sm: "none",
+              xs: "block",
+            },
+          }}
+        >
+          <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>
+        </Grid>
       </ThemeProvider>
     </SparusErrorContext.Provider>
   );

src/components/Footer.tsx

@@ -123,7 +123,7 @@ function Footer() {
     let extension;
     let shell: string;
     let arg: string;
-    //    const platformName = await platform();
+
     switch (platform()) {
       case "windows":
         extension = ".exe";
@@ -197,6 +197,10 @@ function Footer() {
                   .catch((err: string) => setGlobalError(err));
               }}
               sx={{
+                display: {
+                  sm: "block",
+                  xs: "none",
+                },
                 position: "fixed",
                 right: "130px",
                 bottom: "70px",

src/components/Header.tsx

@@ -29,7 +29,7 @@ function Header() {
             aria-label="back to Home page"
             onClick={() => navigate("/")}
           >
-            <ArrowBackIosIcon />
+            <ArrowBackIosIcon fontSize="large" />
           </IconButton>
         ) : null}
       </Grid>
@@ -46,6 +46,10 @@ function Header() {
       <Grid
         item
         sx={{
+          display: {
+            sm: "block",
+            xs: "none",
+          },
           position: "fixed",
           right: 0,
         }}