feat: better mobile navigation

web/src/app/(app)/layout.tsx

@@ -1,9 +1,7 @@
+import { Navbar } from "../../components/Navbar";
 import "./globals.css";
-import { NavbarMenu } from "@/components/NavbarMenu";
-import { Button } from "@/components/ui/button";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { ClerkProvider, OrganizationSwitcher, UserButton } from "@clerk/nextjs";
-import { Github } from "lucide-react";
+import { ClerkProvider } from "@clerk/nextjs";
 import type { Metadata } from "next";
 import meta from "next-gen/config";
 import PlausibleProvider from "next-plausible";
@@ -47,45 +45,7 @@ export default function RootLayout({
                 <div className="absolute h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
               </div>
               <div className="sticky w-full h-18 flex items-center justify-between gap-4 p-4 border-b border-gray-200">
-                <div className="flex flex-row items-center gap-4">
-                  <a
-                    className="font-bold text-md md:text-lg hover:underline"
-                    href="/"
-                  >
-                    {meta.name}
-                  </a>
-                  <OrganizationSwitcher
-                    appearance={{
-                      elements: {
-                        rootBox: "flex items-center justify-center",
-                      },
-                    }}
-                  />
-                </div>
-                <div className="flex flex-row items-center gap-2">
-                  <NavbarMenu />
-                  <Button
-                    asChild
-                    variant="link"
-                    className="rounded-full aspect-square p-2 mr-4"
-                  >
-                    <a href="/docs">Docs</a>
-                  </Button>
-                  <UserButton />
-                  <Button
-                    asChild
-                    variant="outline"
-                    className="rounded-full aspect-square p-2"
-                  >
-                    <a
-                      target="_blank"
-                      href="https://github.com/BennyKok/comfyui-deploy"
-                    >
-                      <Github />
-                    </a>
-                  </Button>
-                </div>
-                {/* <div></div> */}
+                <Navbar />
               </div>
               <div className="md:px-10 px-6 w-full h-[calc(100dvh-73px)]">
                 {children}