Frontend root layout

frontend/package.json

@@ -13,6 +13,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.14",
     "@mui/material": "^5.14.14",
+    "mui-image": "^1.0.7",
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",

frontend/src/components/Layout.js

@@ -1,6 +1,12 @@
 import React from "react";
+import NavigationBar from "./NavigationBar";
 
 const Layout = ({ children }) => {
-  return <div>{children}</div>;
+  return (
+    <>
+      <NavigationBar />
+      {children}
+    </>
+  );
 };
 export default Layout;

frontend/src/components/NavigationBar.js

@@ -0,0 +1,135 @@
+import * as React from "react";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import Menu from "@mui/material/Menu";
+import MenuIcon from "@mui/icons-material/Menu";
+import Container from "@mui/material/Container";
+import Button from "@mui/material/Button";
+import MenuItem from "@mui/material/MenuItem";
+import AutoMateLogo from "../../public/Automate_logo.png";
+import Image from "next/image";
+import Link from "next/link";
+
+const pages = ["upload", "profiling", "machine learning"];
+
+function NavigationBar() {
+  const [anchorElNav, setAnchorElNav] = React.useState(null);
+
+  const handleOpenNavMenu = (event) => {
+    setAnchorElNav(event.currentTarget);
+  };
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  return (
+    <AppBar position="static">
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+          <Box sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}>
+            <Image width={50} alt="AutoMate Logo" src={AutoMateLogo} />
+          </Box>
+          <Typography
+            variant="h6"
+            noWrap
+            component="a"
+            href="/"
+            sx={{
+              ml: 2,
+              mr: 2,
+              display: { xs: "none", md: "flex" },
+              fontFamily: "monospace",
+              fontWeight: 700,
+              letterSpacing: ".3rem",
+              color: "inherit",
+              textDecoration: "none",
+            }}
+          >
+            AutoMate
+          </Typography>
+
+          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
+            <IconButton
+              size="large"
+              aria-label="Menu Hamburger"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleOpenNavMenu}
+              color="inherit"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "left",
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "left",
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: { xs: "block", md: "none" },
+              }}
+            >
+              {pages.map((page) => (
+                <MenuItem
+                  key={page}
+                  onClick={handleCloseNavMenu}
+                  component={Link}
+                  href={page.replace(" ", "-")}
+                >
+                  <Typography textAlign="center">{page}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+
+          <Box sx={{ display: { xs: "flex", md: "none" }, mr: 1 }}>
+            <Image width={50} alt="AutoMate Logo" src={AutoMateLogo} />
+          </Box>
+          <Typography
+            variant="h5"
+            noWrap
+            component="a"
+            href="/"
+            sx={{
+              mr: 2,
+              display: { xs: "flex", md: "none" },
+              flexGrow: 1,
+              fontFamily: "monospace",
+              fontWeight: 700,
+              letterSpacing: ".3rem",
+              color: "inherit",
+              textDecoration: "none",
+            }}
+          >
+            AutoMate
+          </Typography>
+          <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
+            {pages.map((page) => (
+              <Button
+                key={page}
+                LinkComponent={Link}
+                href={page.replace(" ", "-")}
+                sx={{ my: 2, color: "white", display: "block" }}
+              >
+                {page}
+              </Button>
+            ))}
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}
+export default NavigationBar;

frontend/src/pages/index.js

@@ -1,5 +1,17 @@
+import { useEffect, useState } from "react";
+
 export default function Home() {
-  return <h1>
-    Hello Team!
-  </h1>;
+  const [message, setMessage] = useState("Loading...");
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await fetch("/api/python");
+      const data = await res.json();
+      setMessage(data.message);
+    };
+
+    fetchData();
+  }, []);
+
+  return <h1>{message}</h1>;
 }