Create NavBar

.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["next/babel"],
+    "plugins": [["styled-components", { "ssr": true, "displayName": true }]]
+  }

components/Layout.jsx

@@ -0,0 +1,27 @@
+import { Map } from "../components/map/Map.jsx";
+
+
+const Layout = ({ children }) => (
+    <>
+        <Map>
+            {({ Marker, Popup }) => (
+                // TODO: proper icon
+                <Marker
+                    position={[53.946, -1.042]}
+                    icon={L.icon({
+                        iconUrl:
+                            "https://iconarchive.com/download/i110135/thesquid.ink/free-flat-sample/rubber-duck.ico",
+                        iconSize: [40, 40],
+                    })}
+                >
+                    <Popup>Longboi</Popup>
+                </Marker>
+            )}
+        </Map>
+
+        {children}
+    </>
+
+);
+
+export default Layout;

components/navBar/NavBar.jsx

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+import Link from "next/link";
+
+const NavBarDiv = styled.div`
+    width: 100%;
+    background-color: black;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-evenly;
+    align-items: stretch;
+    position: fixed;
+    height: 5em;
+    bottom: 0;
+`;
+
+const TabButton = styled.a`
+    padding: 1em;
+    color: white;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+`;
+
+const NavBar = () => {
+
+
+    return (
+        <NavBarDiv>
+            <Link href="/profile" passHref><TabButton>Profile</TabButton></Link>
+            <Link href="/browse" passHref><TabButton>Browse</TabButton></Link>
+            <Link href="/upload" passHref><TabButton>Upload</TabButton></Link>
+            <Link href="/locate" passHref><TabButton>Locate</TabButton></Link>
+            <Link href="/settings" passHref><TabButton>Settings</TabButton></Link>
+        </NavBarDiv>
+    );
+};
+
+export default NavBar;

next.config.js

@@ -1,7 +1,7 @@
-/** @type {import('next').NextConfig} */
+/** @type {import(next").NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
 }
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -14,11 +14,12 @@
     "next": "12.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-firebase-hooks": "^5.1.1",
-    "react-firebaseui": "^6.0.0",
-    "react-leaflet": "^4.1.0"
+    "react-leaflet": "^4.1.0",
+    "styled-components": "^5.3.6",
+    "react-firebase-hooks": "^5.1.1"
   },
   "devDependencies": {
+    "babel-plugin-styled-components": "^2.0.7",
     "eslint": "8.25.0",
     "eslint-config-next": "12.3.1"
   }

pages/_app.js

@@ -1,7 +1,16 @@
+import Layout from "../components/Layout.jsx";
+import NavBar from "../components/navBar/NavBar.jsx";
 import '../styles/globals.css'
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+      <NavBar />
+    </>
+  );
 }
 
 export default MyApp

pages/index.js

@@ -2,7 +2,6 @@ import Head from "next/head";
 import Image from "next/image";
 
 import styles from "../styles/Home.module.css";
-import { Map } from "../components/map/Map.jsx";
 
 export default function Home() {
   return (
@@ -29,21 +28,7 @@ export default function Home() {
           </code>
         </p>
 
-        <Map>
-          {({ Marker, Popup }) => (
-            // TODO: proper icon
-            <Marker
-              position={[53.946, -1.042]}
-              icon={L.icon({
-                iconUrl:
-                  "https://iconarchive.com/download/i110135/thesquid.ink/free-flat-sample/rubber-duck.ico",
-                iconSize: [40, 40],
-              })}
-            >
-              <Popup>Longboi</Popup>
-            </Marker>
-          )}
-        </Map>
+
       </main>
       <footer className={styles.footer}></footer>
     </div>

pages/upload.js

@@ -0,0 +1,36 @@
+import Head from "next/head";
+import Image from "next/image";
+
+import styles from "../styles/Home.module.css";
+import { Map } from "../components/map/Map.jsx";
+
+export default function Home() {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Upload</title>
+        <meta
+          name="description"
+          content="Looking for Longboi? Use this locator to find the latest recorded location of Yorks longest duck."
+        />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>Longboi locator</h1>
+
+        <p className={styles.description}>
+          We were sick of spending all our time looking for Longboi, as we were
+          failing all our exams due to a lack of studying. So we made this
+          Longboi locator so that anyone can find him at ease.
+          <code className={styles.code}>
+            This website and the locator was coded by us, the good folk at
+            YorDevs!<a href="https://yordevs.com">Check us out here!</a>
+          </code>
+        </p>
+
+      </main>
+      <footer className={styles.footer}></footer>
+    </div>
+  );
+}