feat: optimize navigation

routes/recipes/[name].tsx

@@ -21,7 +21,7 @@ export default function Greet(props: PageProps<Recipe>) {
   const amount = useSignal(portion || 1);
 
   return (
-    <MainLayout>
+    <MainLayout url={props.url}>
       <RecipeHero recipe={recipe} />
       <div class="px-8 text-white mt-10">
         <div class="flex items-center gap-8">

routes/recipes/index.tsx

@@ -13,8 +13,8 @@ export const handler: Handlers<Recipe[] | null> = {
 
 export default function Greet(props: PageProps<Recipe[] | null>) {
   return (
-    <MainLayout>
-      <header class="flex gap-4 items-center mb-5">
+    <MainLayout url={props.url}>
+      <header class="flex gap-4 items-center mb-5 md:hidden">
         <a
           class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
           href="/"
@@ -25,7 +25,7 @@ export default function Greet(props: PageProps<Recipe[] | null>) {
 
         <h3 class="text-2xl text-white font-light">Recipes</h3>
       </header>
-      <div class="flex flex-wrap justify-center items-center gap-4 px-4">
+      <div class="flex flex-wrap items-center gap-4 px-4">
         {props.data?.map((doc) => {
           return <RecipeCard recipe={doc} />;
         })}