[FEATURE] Basic System with file manager (#4)

Co-authored-by: dunemask <dunemask@gmail.com>
Co-authored-by: Dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.dev/elysium/minecluster/pulls/4

src/nav/MCLMenu.jsx

@@ -13,7 +13,7 @@ import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 import MenuIcon from "@mui/icons-material/Menu";
 import Drawer from "@mui/material/Drawer";
-import ListItemIcon from "@mui/material/ListItemIcon";
+import HomeIcon from "@mui/icons-material/Home";
 import ListItemText from "@mui/material/ListItemText";
 import List from "@mui/material/List";
 import ListItemButton from "@mui/material/ListItemButton";
@@ -36,48 +36,23 @@ export default function MCLMenu() {
     theme.zIndex.modal + 2 - (isDrawer ? 1 : 0);
 
   return (
-    <AppBar position="fixed" sx={{ bgcolor: "black", zIndex: drawerIndex() }}>
-      <Box sx={{ flexGrow: 1, margin: "0 20px" }}>
+    <AppBar
+      position="fixed"
+      color="primary"
+      sx={{ zIndex: drawerIndex(), bgcolor: "black" }}
+      enableColorOnDark={true}
+    >
+      <Box
+        sx={{ flexGrow: 1, margin: "0 20px", color: "white" }}
+        className="appbar-items"
+      >
         <Toolbar disableGutters>
-          <IconButton
-            size="large"
-            edge="start"
-            color="inherit"
-            aria-label="menu"
-            sx={{ mr: 2 }}
-            onClick={toggleDrawer}
-          >
-            <MenuIcon />
+          <IconButton component={Link} to="/" color="inherit">
+            <HomeIcon />
           </IconButton>
-          <Drawer
-            open={drawerOpen}
-            onClose={closeDrawer}
-            sx={{ zIndex: drawerIndex(true) }}
-          >
-            <Toolbar />
-            <Box
-              sx={{ width: drawerWidth, overflow: "auto" }}
-              role="presentation"
-            >
-              <List>
-                {pages.map((page, index) => (
-                  <ListItemButton
-                    key={index}
-                    component={Link}
-                    to={page.path}
-                    selected={location.pathname === page.path}
-                    onClick={closeDrawer}
-                  >
-                    <ListItemIcon>{page.icon}</ListItemIcon>
-                    <ListItemText primary={page.name} />
-                  </ListItemButton>
-                ))}
-              </List>
-            </Box>
-          </Drawer>
-          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
+          <span style={{ margin: "auto 0", color: "inherit" }}>
             {navHeader()}
-          </Typography>
+          </span>
         </Toolbar>
       </Box>
     </AppBar>

src/nav/MCLPages.jsx

@@ -1,5 +1,6 @@
 import Home from "@mcl/pages/Home.jsx";
 import Create from "@mcl/pages/Create.jsx";
+import Files from "@mcl/pages/Files.jsx";
 // Go To https://mui.com/material-ui/material-icons/ for more!
 import HomeIcon from "@mui/icons-material/Home";
 import AddIcon from "@mui/icons-material/Add";
@@ -17,4 +18,10 @@ export default [
     icon: <AddIcon />,
     component: <Create />,
   },
+  {
+    name: "Edit",
+    path: "/mcl/files",
+    icon: <AddIcon />,
+    component: <Files />,
+  },
 ];

src/nav/Viewport.jsx

@@ -1,6 +1,8 @@
 import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import MCLPortal from "./MCLPortal.jsx";
+import Button from "@mui/material/Button";
+import SpeedDialIcon from "@mui/material/SpeedDialIcon";
 // Import Navbar
 /*import Navbar from "./Navbar.jsx";*/
 import MCLMenu from "./MCLMenu.jsx";