Add basic layout

components/layout/defaultLayout.tsx

@@ -0,0 +1,34 @@
+import { FC } from "react";
+import { AppBar, Box, Container, Toolbar, Typography } from "@mui/material";
+import { Styling } from "../general/styling";
+import { DefaultNavbar } from "./defaultNavbar";
+
+export const DefaultLayout: FC = ({ children }) => (
+  <Styling>
+    <Box
+      sx={{
+        display: "flex",
+        width: "100%",
+        minHeight: "100vh",
+        bgcolor: "background.default",
+        color: "text.primary",
+        flexDirection: "column",
+      }}
+    >
+      <AppBar position="sticky">
+        <Toolbar>
+          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            OpenFood
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Box sx={{ flexGrow: 1, pt: 2 }}>
+        <Container maxWidth="sm">
+          <DefaultNavbar />
+
+          <Box sx={{ p: 2 }}>{children}</Box>
+        </Container>
+      </Box>
+    </Box>
+  </Styling>
+);

components/layout/defaultNavbar.tsx

@@ -0,0 +1,51 @@
+import { FC, useMemo } from "react";
+import { useRouter } from "next/router";
+import { Breadcrumbs, Link as MuiLink } from "@mui/material";
+import Link from "next/link";
+
+export const DefaultNavbar: FC = () => {
+  const router = useRouter();
+
+  const breadcrumbs = useMemo(() => {
+    const linkPath = router.asPath.split("/");
+    linkPath.shift();
+    return linkPath.map((path, i) => ({
+      breadcrumb: path,
+      href: "/" + linkPath.slice(0, i + 1).join("/"),
+    }));
+  }, [router.asPath]);
+
+  if (!breadcrumbs) {
+    return null;
+  }
+
+  console.log(breadcrumbs);
+
+  return (
+    <Breadcrumbs aria-label="breadcrumb">
+      <Link href="/" passHref>
+        <MuiLink
+          underline="hover"
+          color={
+            breadcrumbs.length === 1 && breadcrumbs[0].href == "/"
+              ? "text.primary"
+              : "inherit"
+          }
+        >
+          home
+        </MuiLink>
+      </Link>
+
+      {breadcrumbs.map((breadcrumb, i) => (
+        <Link key={breadcrumb.href} href={breadcrumb.href} passHref>
+          <MuiLink
+            underline="hover"
+            color={i === breadcrumbs.length - 1 ? "text.primary" : "inherit"}
+          >
+            {breadcrumb.breadcrumb}
+          </MuiLink>
+        </Link>
+      ))}
+    </Breadcrumbs>
+  );
+};