From a67f3c402b443a4b11550b9610afb43457ed2b9e Mon Sep 17 00:00:00 2001
From: kjuulh <contact@kjuulh.io>
Date: Thu, 14 Oct 2021 21:28:06 +0200
Subject: [PATCH] Add login and signature

---
 .../{defaultNavbar.tsx => breadCrumbs.tsx}    | 29 ++++++++++---------
 components/layout/defaultLayout.tsx           | 29 ++++++++++++++++---
 pages/auth/login.tsx                          |  5 ++++
 pages/auth/sign-up.tsx                        |  5 ++++
 4 files changed, 51 insertions(+), 17 deletions(-)
 rename components/layout/{defaultNavbar.tsx => breadCrumbs.tsx} (63%)
 create mode 100644 pages/auth/login.tsx
 create mode 100644 pages/auth/sign-up.tsx

diff --git a/components/layout/defaultNavbar.tsx b/components/layout/breadCrumbs.tsx
similarity index 63%
rename from components/layout/defaultNavbar.tsx
rename to components/layout/breadCrumbs.tsx
index 82f2613..da4148d 100644
--- a/components/layout/defaultNavbar.tsx
+++ b/components/layout/breadCrumbs.tsx
@@ -1,26 +1,29 @@
-import { FC, useMemo } from "react";
+import React, { FC, useMemo } from "react";
 import { useRouter } from "next/router";
-import { Breadcrumbs, Link as MuiLink } from "@mui/material";
+import { Breadcrumbs, Button, Link as MuiLink } from "@mui/material";
 import Link from "next/link";
 
-export const DefaultNavbar: FC = () => {
+const getPathAsContinuousLinks = (path: string) => {
+  const linkPath = path.split("/");
+  linkPath.shift();
+  return linkPath.map((path, i) => ({
+    breadcrumb: path,
+    href: "/" + linkPath.slice(0, i + 1).join("/"),
+  }));
+};
+
+export const BreadCrumbs: 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]);
+  const breadcrumbs = useMemo(
+    () => getPathAsContinuousLinks(router.asPath),
+    [router.asPath]
+  );
 
   if (!breadcrumbs) {
     return null;
   }
 
-  console.log(breadcrumbs);
-
   return (
     <Breadcrumbs aria-label="breadcrumb">
       <Link href="/" passHref>
diff --git a/components/layout/defaultLayout.tsx b/components/layout/defaultLayout.tsx
index 373a61a..3f60196 100644
--- a/components/layout/defaultLayout.tsx
+++ b/components/layout/defaultLayout.tsx
@@ -1,7 +1,16 @@
-import { FC } from "react";
-import { AppBar, Box, Container, Toolbar, Typography } from "@mui/material";
+import React, { FC } from "react";
+import {
+  AppBar,
+  Box,
+  Button,
+  Container,
+  Link as MuiLink,
+  Toolbar,
+  Typography,
+} from "@mui/material";
 import { Styling } from "../general/styling";
-import { DefaultNavbar } from "./defaultNavbar";
+import { BreadCrumbs } from "./breadCrumbs";
+import Link from "next/link";
 
 export const DefaultLayout: FC = ({ children }) => (
   <Styling>
@@ -20,11 +29,23 @@ export const DefaultLayout: FC = ({ children }) => (
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             OpenFood
           </Typography>
+          <Box sx={{ display: "flex", gap: 2 }}>
+            <Link href="/auth/login" passHref>
+              <MuiLink>
+                <Button>Login</Button>
+              </MuiLink>
+            </Link>
+            <Link href="/auth/sign-up" passHref>
+              <MuiLink>
+                <Button>Sign up</Button>
+              </MuiLink>
+            </Link>
+          </Box>
         </Toolbar>
       </AppBar>
       <Box sx={{ flexGrow: 1, pt: 2 }}>
         <Container maxWidth="sm">
-          <DefaultNavbar />
+          <BreadCrumbs />
 
           <Box sx={{ p: 2 }}>{children}</Box>
         </Container>
diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
new file mode 100644
index 0000000..1f0f5f3
--- /dev/null
+++ b/pages/auth/login.tsx
@@ -0,0 +1,5 @@
+const LoginPage = () => {
+  return <div>Login page</div>;
+};
+
+export default LoginPage;
diff --git a/pages/auth/sign-up.tsx b/pages/auth/sign-up.tsx
new file mode 100644
index 0000000..7adae56
--- /dev/null
+++ b/pages/auth/sign-up.tsx
@@ -0,0 +1,5 @@
+const SignUpPage = () => {
+  return <div>Sign up page</div>;
+};
+
+export default SignUpPage;