create mobile interface

Ludea · Aug 31, 2024 · feb7f06 · feb7f06
1 parent c098936
commit feb7f06
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 33 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,8 @@
 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";
@@ -10,8 +13,27 @@ import routes from "routes";
 import Background from "assets/background.jpg";
 import SparusErrorContext from "utils/Context";
 
+// Icons
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import HomeIcon from "@mui/icons-material/Home";
+
+function HomePanel(value: number) {
+  return value.value === value.index ? (
+    <Grid
+      sx={{
+        height: "92%",
+        width: "100vw",
+        backgroundSize: "cover",
+        backgroundImage: `url(${Background})`,
+      }}
+    />
+  ) : null;
+}
+
 function App() {
   const [globalError, setGlobalError] = useState("");
+  const [currentTab, setCurrentTab] = useState(0);
+
   const theme = createTheme();
   const routing = useRoutes(routes);
 
@@ -46,6 +68,7 @@ function App() {
           spacing={0}
           m={-1}
           sx={{
+            display: { xl: "block", xs: "none" },
             backgroundSize: "cover",
             height: "100vh",
             width: "100vw",
@@ -60,6 +83,41 @@ function App() {
             {routing}
           </Grid>
         </Grid>
+        <Grid
+          container
+          spacing={0}
+          m={-1}
+          sx={{
+            display: { xl: "none", xs: "block" },
+            height: window.innerHeight,
+            width: window.innerWidth,
+          }}
+        >
+          <HomePanel value={currentTab} index={0} />
+          <AppBar
+            position="fixed"
+            sx={{
+              top: "auto",
+              bottom: 0,
+              display: { xl: "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>
   );

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -3,14 +3,6 @@ import LinearProgress from "@mui/material/LinearProgress";
 import LoadingButton from "@mui/lab/LoadingButton";
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
-import Tabs from "@mui/material/Tabs";
-import Tab from "@mui/material/Tab";
-import AppBar from "@mui/material/AppBar";
-
-// Icons
-import ChatIcon from "@mui/icons-material/Chat";
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import HomeIcon from "@mui/icons-material/Home";
 
 // Context
 import SparusErrorContext from "utils/Context";
@@ -235,31 +227,6 @@ function Footer() {
             : null}
         </Grid>
       </Grid>
-      <Box
-        sx={{
-          display: { xl: "none", xs: "block" },
-          cbgcolor: "background.paper",
-          width: window.innerWidth,
-        }}
-      >
-        <AppBar position="static">
-          <Tabs
-            indicatorColor="secondary"
-            textColor="inherit"
-            variant="fullWidth"
-            value={currentTab}
-            onChange={(_, t) => setCurrentTab(t)}
-            aria-label="menu tab"
-          >
-            <Tab icon={<HomeIcon fontSize="large" />} aria-label="home" />
-            <Tab icon={<ChatIcon fontSize="large" />} aria-label="chat" />
-            <Tab
-              icon={<AccountCircleIcon fontSize="large" />}
-              aria-label="account"
-            />
-          </Tabs>
-        </AppBar>
-      </Box>
     </Box>
   );
 }