Added a nav list to left side.

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

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;
+}

src/main.css

@@ -9,6 +9,7 @@
 body {
     margin: 0;
     font-family: 'Inter', sans-serif;
+    box-sizing: border-box;
 }
 
 a {

src/routes/__root.module.css

@@ -1,3 +1,6 @@
-main {
+.main-wrapper {
     padding: 20px;
+    display: grid;
+    grid-template-columns: 1fr 4fr;
+    justify-content: stretch;
 }

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" />
         </>