diff --git a/apps/blog/src/app/(blog)/layout.tsx b/apps/blog/src/app/(blog)/layout.tsx
index ec90473df7..eaf14060da 100644
--- a/apps/blog/src/app/(blog)/layout.tsx
+++ b/apps/blog/src/app/(blog)/layout.tsx
@@ -1,23 +1,106 @@
-import { HomeLayout } from 'fumadocs-ui/layouts/home';
-import { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
-export function baseOptions(): BaseLayoutProps {
+import {
+ Logo,
+ NavigationMenu,
+ NavigationMenuContent,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+ NavigationMenuTrigger,
+ NavigationWrapper,
+} from "@prisma-docs/ui/components/navigation-menu";
+export function baseOptions() {
return {
nav: {
- title: 'My App',
+ title: "My App",
},
links: [
{
- url: '/docs',
- text: 'Docs',
+ text: "Products",
+ sub: [
+ {
+ text: "Postgres",
+ url: "/postgres",
+ desc: "Managed Postgres for global workloads",
+ },
+ {
+ text: "ORM",
+ url: "/orm",
+ },
+ ],
},
{
- url: '/blog',
- text: 'Blog',
+ url: "/pricing",
+ text: "Pricing",
+ },
+ {
+ text: "Resources",
+ sub: [
+ {
+ text: "MCP",
+ url: "/mcp",
+ desc: "Managed Postgres for global workloads",
+ },
+ {
+ text: "Tutorials",
+ url: "/learn",
+ },
+ ],
+ },
+ {
+ url: "/partners",
+ text: "Partners",
+ },
+ {
+ url: "/blog",
+ text: "Blog",
},
],
};
}
-export default function Layout({ children, }: { children: React.ReactNode; }) {
- return {children};
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <>
+
+
+
+
+
+ {Logo}
+
+
+ {baseOptions().links.map((link: any) =>
+ link.url ? (
+
+
+ {link.text}
+
+
+ ) : link.sub ? (
+
+ {link.text}
+
+ {link.sub.map((sublink: any) => (
+
+ {sublink.text}
+
+ ))}
+
+
+ ) : null,
+ )}
+
+
+
+ Item One
+
+ Link 2
+
+
+
+
+
+ {children}
+
+ );
}
diff --git a/packages/ui/src/components/navigation-menu.tsx b/packages/ui/src/components/navigation-menu.tsx
new file mode 100644
index 0000000000..aefe5ed1b2
--- /dev/null
+++ b/packages/ui/src/components/navigation-menu.tsx
@@ -0,0 +1,210 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { cva } from "class-variance-authority";
+
+import { cn } from "../lib/cn";
+import { ChevronDownIcon } from "lucide-react";
+
+const Logo = (
+
+);
+
+function NavigationMenu({
+ align = "start",
+ className,
+ children,
+ ...props
+}: NavigationMenuPrimitive.Root.Props &
+ Pick) {
+ return (
+
+ {children}
+
+
+ );
+}
+
+function NavigationWrapper({
+ className,
+ ...props
+}: React.ComponentPropsWithRef<"div">) {
+ return (
+
+ {props.children}
+
+ );
+}
+
+function NavigationMenuList({
+ className,
+ ...props
+}: React.ComponentPropsWithRef) {
+ return (
+
+ );
+}
+
+function NavigationMenuItem({
+ className,
+ ...props
+}: React.ComponentPropsWithRef) {
+ return (
+
+ );
+}
+
+const navigationMenuTriggerStyle = cva(
+ "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none",
+);
+
+function NavigationMenuTrigger({
+ className,
+ children,
+ ...props
+}: NavigationMenuPrimitive.Trigger.Props) {
+ return (
+
+ {children}{" "}
+
+
+ );
+}
+
+function NavigationMenuContent({
+ className,
+ ...props
+}: NavigationMenuPrimitive.Content.Props) {
+ return (
+
+ );
+}
+
+function NavigationMenuPositioner({
+ className,
+ side = "bottom",
+ sideOffset = 8,
+ align = "start",
+ alignOffset = 0,
+ ...props
+}: NavigationMenuPrimitive.Positioner.Props) {
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+function NavigationMenuLink({
+ className,
+ ...props
+}: NavigationMenuPrimitive.Link.Props) {
+ return (
+
+ );
+}
+
+function NavigationMenuIndicator({
+ className,
+ ...props
+}: React.ComponentPropsWithRef) {
+ return (
+
+
+
+ );
+}
+
+export {
+ Logo,
+ NavigationMenu,
+ NavigationMenuContent,
+ NavigationMenuIndicator,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationWrapper,
+ NavigationMenuList,
+ NavigationMenuTrigger,
+ navigationMenuTriggerStyle,
+ NavigationMenuPositioner,
+};