From 8be7ff7b29f5dd9ba160a321536576a091291c37 Mon Sep 17 00:00:00 2001
From: Jesse Brault <jbrault@mac.com>
Date: Sat, 10 Aug 2024 17:57:40 -0500
Subject: [PATCH] Added a nav list to left side.

---
 src/components/main-nav/MainNav.tsx         | 17 +++++++++++++++++
 src/components/main-nav/main-nav.module.css | 11 +++++++++++
 src/main.css                                |  1 +
 src/routes/__root.module.css                |  5 ++++-
 src/routes/__root.tsx                       | 12 ++++++++----
 5 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 src/components/main-nav/MainNav.tsx
 create mode 100644 src/components/main-nav/main-nav.module.css

diff --git a/src/components/main-nav/MainNav.tsx b/src/components/main-nav/MainNav.tsx
new file mode 100644
index 0000000..c273781
--- /dev/null
+++ b/src/components/main-nav/MainNav.tsx
@@ -0,0 +1,17 @@
+import { Link } from '@tanstack/react-router'
+import classes from './main-nav.module.css'
+
+const MainNav = () => {
+    return (
+        <nav className={classes.mainNav}>
+            <Link to="/recipes" className={classes.mainNavLink}>
+                Browse Recipes
+            </Link>
+            <Link to="/login" className={classes.mainNavLink}>
+                Login
+            </Link>
+        </nav>
+    )
+}
+
+export default MainNav
diff --git a/src/components/main-nav/main-nav.module.css b/src/components/main-nav/main-nav.module.css
new file mode 100644
index 0000000..02698c4
--- /dev/null
+++ b/src/components/main-nav/main-nav.module.css
@@ -0,0 +1,11 @@
+.main-nav {
+    max-width: 40ch;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.main-nav-link {
+    font-size: 20px;
+}
diff --git a/src/main.css b/src/main.css
index 1d25cc8..6657b89 100644
--- a/src/main.css
+++ b/src/main.css
@@ -9,6 +9,7 @@
 body {
     margin: 0;
     font-family: 'Inter', sans-serif;
+    box-sizing: border-box;
 }
 
 a {
diff --git a/src/routes/__root.module.css b/src/routes/__root.module.css
index 2690c4c..9c759d3 100644
--- a/src/routes/__root.module.css
+++ b/src/routes/__root.module.css
@@ -1,3 +1,6 @@
-main {
+.main-wrapper {
     padding: 20px;
+    display: grid;
+    grid-template-columns: 1fr 4fr;
+    justify-content: stretch;
 }
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index f9f0f79..d03e616 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -4,7 +4,8 @@ import RouterContext from '../RouterContext'
 import { useAuth } from '../auth'
 import Footer from '../components/footer/Footer'
 import Header from '../components/header/Header'
-import './__root.module.css'
+import classes from './__root.module.css'
+import MainNav from '../components/main-nav/MainNav'
 
 const RootLayout = () => {
     const { username } = useAuth()
@@ -12,9 +13,12 @@ const RootLayout = () => {
     return (
         <>
             <Header username={username ?? undefined} />
-            <main>
-                <Outlet />
-            </main>
+            <div className={classes.mainWrapper}>
+                <MainNav />
+                <main>
+                    <Outlet />
+                </main>
+            </div>
             <Footer />
             <TanStackRouterDevtools position="bottom-right" />
         </>