pub fn Layout(ctx: zx.LayoutContext, children: zx.Component) zx.Component {
    return (
        <div @allocator={ctx.arena}>
            <Sidebar allocator={ctx.arena} categories={&categories} toc={&toc_links} children={children} />
            <script src=`/assets/docs.js?v={zx.info.version_string}` defer="true"></script>
        </div>
    );
}

const categories = [_]SidebarProps.Category{
    .{
        .title = "REFERENCE",
        .sections = &[_]SidebarProps.Section{
            .{ .title = "Overview", .href = "/docs#overview" },
        },
    },
    .{
        .title = "CORE CONCEPTS",
        .sections = &[_]SidebarProps.Section{
            .{
                .title = "Expressions",
                .href = "/docs#expressions",
                .items = &[_]SidebarProps.Link{
                    .{ .href = "/docs#expr-strings", .text = "Strings" },
                    .{ .href = "/docs#expr-integers", .text = "Integers" },
                    .{ .href = "/docs#expr-floats", .text = "Floats" },
                    .{ .href = "/docs#expr-booleans", .text = "Booleans" },
                    .{ .href = "/docs#expr-enums", .text = "Enums" },
                    .{ .href = "/docs#expr-optionals", .text = "Optionals" },
                    .{ .href = "/docs#expr-null", .text = "Null" },
                    .{ .href = "/docs#expr-components", .text = "Components" },
                    .{ .href = "/docs#expr-component-arrays", .text = "Component Arrays" },
                },
            },
            .{
                .title = "Control Flow",
                .href = "/docs#control-flow",
                .items = &[_]SidebarProps.Link{
                    .{ .href = "/docs#if-statements", .text = "If Statements" },
                    .{ .href = "/docs#switch-statements", .text = "Switch Statements" },
                    .{ .href = "/docs#for-loops", .text = "For Loops" },
                    .{ .href = "/docs#while-loops", .text = "While Loops" },
                    .{ .href = "/docs#optional-capture", .text = "Optional Capture" },
                    .{ .href = "/docs#error-capture", .text = "Error Capture" },
                },
            },
            .{
                .title = "Components",
                .href = "/docs#components",
                .items = &[_]SidebarProps.Link{
                    .{ .href = "/docs#component-context", .text = "ComponentContext" },
                    .{ .href = "/docs#component-ctx-props", .text = "ComponentCtx" },
                },
            },
            .{
                .title = "Routing",
                .href = "/docs#routing",
                .items = &[_]SidebarProps.Link{
                    .{ .href = "/docs#pages", .text = "Pages" },
                    .{ .href = "/docs#layouts", .text = "Layouts" },
                    .{ .href = "/docs#dynamic-routes", .text = "Dynamic Routes" },
                },
            },
        },
    },
    .{
        .title = "ADVANCED",
        .sections = &[_]SidebarProps.Section{
            .{
                .title = "Builtin Attributes",
                .href = "/docs#builtin-attributes",
                .items = &[_]SidebarProps.Link{
                    .{ .href = "/docs#allocator", .text = "@allocator" },
                    .{ .href = "/docs#escaping", .text = "@escaping" },
                    .{ .href = "/docs#rendering", .text = "@rendering" },
                },
            },
            .{
                .title = "Attribute Syntax",
                .href = "/docs#attribute-syntax",
                .items = &[_]SidebarProps.Link{
                    .{ .href = "/docs#spread-attributes", .text = "Spread Attributes" },
                    .{ .href = "/docs#shorthand-attributes", .text = "Shorthand" },
                    .{ .href = "/docs#template-attributes", .text = "Template Strings" },
                },
            },
            .{ .title = "Importing", .href = "/docs#importing" },
            .{ .title = "Fragments", .href = "/docs#fragments" },
            .{ .title = "Children Props", .href = "/docs#children-props" },
            .{
                .title = "Syntax",
                .href = "/docs#syntax",
                .items = &[_]SidebarProps.Link{
                    .{ .href = "/docs#multiline-strings", .text = "Multiline Strings" },
                    .{ .href = "/docs#comments", .text = "Comments" },
                },
            },
            .{
                .title = "Caching",
                .href = "/docs#caching",
                .items = &[_]SidebarProps.Link{
                    .{ .href = "/docs#caching-overview", .text = "Overview" },
                    .{ .href = "/docs#caching-components", .text = "Component Caching" },
                    .{ .href = "/docs#caching-pages", .text = "Page Caching" },
                    .{ .href = "/docs#caching-layouts", .text = "Layout Caching" },
                    .{ .href = "/docs#cache-invalidation", .text = "Invalidation" },
                    .{ .href = "/docs#caching-best-practices", .text = "Best Practices" },
                },
            },
        },
    },
    .{
        .title = "BUILD & TOOLS",
        .sections = &[_]SidebarProps.Section{
            .{
                .title = "CLI",
                .href = "/docs#cli",
                .items = &[_]SidebarProps.Link{
                    .{ .href = "/docs#cli-installation", .text = "Installation" },
                    .{ .href = "/docs#cli-init", .text = "init" },
                    .{ .href = "/docs#cli-dev", .text = "dev" },
                    .{ .href = "/docs#cli-serve", .text = "serve" },
                    .{ .href = "/docs#cli-transpile", .text = "transpile" },
                    .{ .href = "/docs#cli-fmt", .text = "fmt" },
                    .{ .href = "/docs#cli-export", .text = "export" },
                    .{ .href = "/docs#cli-bundle", .text = "bundle" },
                    .{ .href = "/docs#cli-update", .text = "update" },
                    .{ .href = "/docs#cli-upgrade", .text = "upgrade" },
                    .{ .href = "/docs#cli-version", .text = "version" },
                },
            },
            .{
                .title = "Plugins",
                .href = "/docs#plugins",
                .items = &[_]SidebarProps.Link{
                    .{ .href = "/docs#plugin-overview", .text = "Overview" },
                    .{ .href = "/docs#builtin-plugins", .text = "Builtin Plugins" },
                    .{ .href = "/docs#tailwind-plugin", .text = "Tailwind CSS" },
                    .{ .href = "/docs#esbuild-plugin", .text = "esbuild" },
                    .{ .href = "/docs#combining-plugins", .text = "Combining Plugins" },
                    .{ .href = "/docs#custom-plugins", .text = "Custom Plugins" },
                },
            },
        },
    },
};

const toc_links = [_]SidebarProps.Link{
    .{ .href = "/docs#overview", .text = "Overview" },
    .{ .href = "/docs#expressions", .text = "Expressions" },
    .{ .href = "/docs#control-flow", .text = "Control Flow" },
    .{ .href = "/docs#components", .text = "Components" },
    .{ .href = "/docs#routing", .text = "Routing" },
    .{ .href = "/docs#builtin-attributes", .text = "Builtin Attributes" },
    .{ .href = "/docs#attribute-syntax", .text = "Attribute Syntax" },
    .{ .href = "/docs#importing", .text = "Importing" },
    .{ .href = "/docs#dynamic-routes", .text = "Dynamic Routes" },
    .{ .href = "/docs#fragments", .text = "Fragments" },
    .{ .href = "/docs#children-props", .text = "Children Props" },
    .{ .href = "/docs#syntax", .text = "Syntax" },
    .{ .href = "/docs#caching", .text = "Caching" },
    .{ .href = "/docs#plugins", .text = "Plugins" },
    .{ .href = "/docs#cli", .text = "CLI" },
};

const Sidebar = @import("../components/sidebar.zx").Sidebar;
const SidebarProps = @import("../components/sidebar.zx").SidebarProps;

const zx = @import("zx");
