feat: optimize navigation

components/layouts/main.tsx

@@ -4,18 +4,50 @@ export type Props = {
   children: ComponentChildren;
   title?: string;
   name?: string;
+  url: URL;
   description?: string;
 };
 
-export const MainLayout = ({ children }: Props) => {
+export const MainLayout = ({ children, url }: Props) => {
+  const menu = [
+    {
+      name: "🏡 Home",
+      link: "/",
+    },
+    {
+      name: "🍽️ Recipes",
+      link: "/recipes",
+    },
+    {
+      name: "🍿 Movies",
+      link: "/movies",
+    },
+  ];
+
   return (
-    <>
+    <div class="md:grid" style={{ gridTemplateColumns: "200px 1fr" }}>
+      <aside class="p-4 hidden md:block">
+        <nav class="min-h-fit rounded-3xl p-3 grid gap-3">
+          {menu.map((m) => {
+            return (
+              <a
+                href={m.link}
+                class={`block ${
+                  m.link === url.pathname ? "bg-white text-black" : "text-white"
+                } p-3 text-xl w-full rounded-2xl`}
+              >
+                {m.name}
+              </a>
+            );
+          })}
+        </nav>
+      </aside>
       <main
-        class="max-w-2xl mx-auto lg:max-w-4xl py-5"
+        class="py-5"
         style={{ fontFamily: "Work Sans" }}
       >
         {children}
       </main>
-    </>
+    </div>
   );
 };