@inferencesh/ui 0.0.0-stage → 0.1.1

package/src/components/logo-base.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import * as React from "react";
+
+// =============================================================================
+// CANONICAL SVG PATH DATA - Single source of truth for all logo variants
+// =============================================================================
+
+/** Inner triangle paths (the three internal colored strokes) */
+export const INNER_PATHS = {
+    green: "M201.89,131.89l98.4,170.21c.77,1.33-.19,3-1.73,3H2",
+    purple: "M126.96,261.83v-.02l98.28-170.19c.77-1.33,2.69-1.33,3.46,0l148.31,256.81",
+    yellow: "M277.02,261.81H80.44c-1.54,0-2.5-1.67-1.73-3L227,2",
+} as const;
+
+/** Outer border paths (the pink/coral perimeter strokes) */
+export const OUTER_PATHS = {
+    a: "M2,305.1l16.37,28.32c5.36,9.27,15.26,14.99,25.97,14.99l332.67.03",
+    b: "M227,2l-32.72.02c-10.71,0-20.61,5.72-25.96,15L2,305.1",
+    c: "M377.01,348.44l16.35-28.33c5.35-9.28,5.35-20.71,0-29.99L227,2",
+} as const;
+
+/** Canonical viewBox for the logo SVG */
+export const LOGO_VIEWBOX = "0 0 399.37 350.44";
+
+/** Brand colors */
+export const COLORS = {
+    green: "#00D08A",
+    purple: "#5415FF",
+    yellow: "#FFF14C",
+    pink: "#FF569D",
+} as const;
+
+// =============================================================================
+// LOGO BASE COMPONENT
+// =============================================================================
+
+export interface LogoBaseProps {
+    /** Width of the SVG (default: 240) */
+    width?: number;
+    /** Height of the SVG (default: 240) */
+    height?: number;
+    /** Additional className for the container */
+    className?: string;
+    /** Stroke width for all paths (default: 4) */
+    strokeWidth?: number;
+    /** Enable glow animation (default: true) */
+    animated?: boolean;
+    /** Animation duration in seconds (default: 2) */
+    animationDuration?: number;
+    /** Stagger delay between path animations in seconds (default: 0.05) */
+    animationStagger?: number;
+    /** Use colored strokes vs monochrome (default: true) */
+    colored?: boolean;
+    /** Custom monochrome color (CSS value, e.g. "hsl(var(--muted-foreground) / 0.2)") */
+    monoColor?: string;
+    /** Enable blur/glow effect layer (default: true) */
+    withGlow?: boolean;
+    /** Unique ID prefix for filters (auto-generated if not provided) */
+    filterId?: string;
+    /** Announces the logo as a status (e.g. "loading") to assistive tech */
+    label?: string;
+}
+
+const LogoBase: React.FC<LogoBaseProps> = ({
+    width = 240,
+    height = 240,
+    className,
+    strokeWidth = 4,
+    animated = true,
+    animationDuration = 2,
+    animationStagger = 0.02,
+    colored = true,
+    monoColor,
+    withGlow = true,
+    filterId,
+    label,
+}) => {
+    // Generate unique filter ID to avoid conflicts when multiple logos are rendered
+    const rawId = React.useId();
+    const uniqueId = rawId.replace(/:/g, '');
+    const blurFilterId = filterId ?? `logo-blur-${uniqueId}`;
+
+    // Determine colors: mono with custom color, mono with currentColor, or full brand colors
+    const effectiveMonoColor = monoColor ?? "currentColor";
+    const innerColors = colored
+        ? COLORS
+        : { green: effectiveMonoColor, purple: effectiveMonoColor, yellow: effectiveMonoColor };
+    const outerColor = colored ? COLORS.pink : effectiveMonoColor;
+
+    // CSS for animations (scoped to this instance)
+    const styles = `
+    /* Base stroke styling */
+    .logo-outer-${uniqueId},
+    .logo-inner-${uniqueId} {
+      fill: none;
+      stroke-width: ${strokeWidth};
+      stroke-miterlimit: 100;
+      stroke-linecap: round;
+      will-change: stroke-dashoffset, stroke-dasharray;
+      transform: translateZ(0);
+    }
+
+    .logo-outer-${uniqueId} {
+      stroke: ${outerColor};
+      ${animated ? `
+      stroke-dasharray: 500, 500;
+      stroke-dashoffset: -500;
+      animation: logo-outside-${uniqueId} ${animationDuration}s ease-in-out infinite;
+      ` : ""}
+    }
+
+    .logo-inner-${uniqueId} {
+      ${animated ? `
+      stroke-dasharray: 500, 500;
+      stroke-dashoffset: -500;
+      animation: logo-inside-${uniqueId} ${animationDuration}s ease-in-out infinite;
+      ` : ""}
+    }
+
+    .logo-outer-b-${uniqueId} { animation-delay: ${animationStagger}s; }
+    .logo-outer-c-${uniqueId} { animation-delay: ${animationStagger * 2}s; }
+    .logo-inner-purple-${uniqueId} { animation-delay: ${animationStagger}s; }
+    .logo-inner-yellow-${uniqueId} { animation-delay: ${animationStagger * 2}s; }
+
+    ${animated ? `
+    @keyframes logo-outside-${uniqueId} {
+      0% { stroke-dashoffset: -500; }
+      45% { stroke-dashoffset: 0; }
+      55% { stroke-dashoffset: 0; }
+      100% { stroke-dashoffset: 500; }
+    }
+
+    @keyframes logo-inside-${uniqueId} {
+      0% { stroke-dashoffset: -500; }
+      45% { stroke-dashoffset: 0; }
+      55% { stroke-dashoffset: 0; }
+      100% { stroke-dashoffset: 500; }
+    }
+    ` : ""}
+
+    .logo-blur-group-${uniqueId} {
+      will-change: filter;
+    }
+
+    .dark .logo-blur-group-${uniqueId},
+    [data-theme="dark"] .logo-blur-group-${uniqueId} {
+      mix-blend-mode: screen;
+    }
+
+    .dark .logo-blend-overlay-${uniqueId},
+    [data-theme="dark"] .logo-blend-overlay-${uniqueId} {
+      mix-blend-mode: lighten;
+    }
+  `;
+
+    return (
+        <div className={`flex items-center justify-center ${className ?? ""}`} role={label ? "status" : undefined} aria-label={label}>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox={LOGO_VIEWBOX}
+                width={width}
+                height={height}
+                style={{ overflow: "visible" }}
+            >
+                <defs>
+                    <filter id={blurFilterId}>
+                        <feGaussianBlur stdDeviation="5" />
+                        <feColorMatrix
+                            type="matrix"
+                            values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.8 0"
+                        />
+                    </filter>
+                </defs>
+
+                {/* Static base layer — always visible so the logo never goes blank */}
+                {animated && (
+                    <g opacity={withGlow ? "0.15" : "1"}>
+                        {[INNER_PATHS.green, INNER_PATHS.purple, INNER_PATHS.yellow, OUTER_PATHS.a, OUTER_PATHS.b, OUTER_PATHS.c].map((d, i) => (
+                            <path key={i} d={d} fill="none" stroke={withGlow ? effectiveMonoColor : "hsl(var(--border))"} strokeWidth={strokeWidth} strokeMiterlimit={100} strokeLinecap="round" />
+                        ))}
+                    </g>
+                )}
+
+                {/* Glow/blur layer */}
+                {withGlow && (
+                    <g filter={`url(#${blurFilterId})`} className={`logo-blur-group-${uniqueId}`}>
+                        <path className={`logo-inner-${uniqueId}`} style={{ stroke: innerColors.green }} d={INNER_PATHS.green} />
+                        <path className={`logo-inner-${uniqueId} logo-inner-purple-${uniqueId}`} style={{ stroke: innerColors.purple }} d={INNER_PATHS.purple} />
+                        <path className={`logo-inner-${uniqueId} logo-inner-yellow-${uniqueId}`} style={{ stroke: innerColors.yellow }} d={INNER_PATHS.yellow} />
+                        <path className={`logo-outer-${uniqueId}`} d={OUTER_PATHS.a} />
+                        <path className={`logo-outer-${uniqueId} logo-outer-b-${uniqueId}`} d={OUTER_PATHS.b} />
+                        <path className={`logo-outer-${uniqueId} logo-outer-c-${uniqueId}`} d={OUTER_PATHS.c} />
+                    </g>
+                )}
+
+                {/* Main visible layer */}
+                <g>
+                    <path className={`logo-inner-${uniqueId}${withGlow ? ` logo-blend-overlay-${uniqueId}` : ""}`} style={{ stroke: innerColors.green }} d={INNER_PATHS.green} />
+                    <path className={`logo-inner-${uniqueId} logo-inner-purple-${uniqueId}${withGlow ? ` logo-blend-overlay-${uniqueId}` : ""}`} style={{ stroke: innerColors.purple }} d={INNER_PATHS.purple} />
+                    <path className={`logo-inner-${uniqueId} logo-inner-yellow-${uniqueId}${withGlow ? ` logo-blend-overlay-${uniqueId}` : ""}`} style={{ stroke: innerColors.yellow }} d={INNER_PATHS.yellow} />
+                    <path className={`logo-outer-${uniqueId}`} d={OUTER_PATHS.a} />
+                    <path className={`logo-outer-${uniqueId} logo-outer-b-${uniqueId}`} d={OUTER_PATHS.b} />
+                    <path className={`logo-outer-${uniqueId} logo-outer-c-${uniqueId}`} d={OUTER_PATHS.c} />
+                </g>
+            </svg>
+
+            <style>{styles}</style>
+        </div>
+    );
+};
+
+export default LogoBase;

package/src/components/logo-color.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import LogoBase from "./logo-base";
+
+/**
+ * Static colored logo (no animation).
+ * Used for nav headers, small brand marks, etc.
+ */
+function LogoColor(props: React.SVGProps<SVGSVGElement> & { size?: number }) {
+  const { size = 18, className, ...rest } = props;
+  return (
+    <LogoBase
+      width={size}
+      height={size}
+      className={className}
+      strokeWidth={0.5}
+      animated={false}
+      colored={true}
+      withGlow={false}
+    />
+  );
+}
+
+export default LogoColor;

package/src/components/logo-full.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+
+function LogoSvg(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={18}
+      height={16}
+      viewBox="0 0 385.87 339"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <defs>
+        <style>
+          {`.logo-full-1{fill:url(#linear-gradient-3)}
+            .logo-full-2{fill:url(#linear-gradient-2)}
+            .logo-full-3{fill:url(#linear-gradient)}`}
+        </style>
+        <linearGradient
+          id="linear-gradient"
+          x1=".1"
+          y1="145.5"
+          x2="278.64"
+          y2="145.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#fff14c" />
+          <stop offset="1" stopColor="#ff569d" />
+        </linearGradient>
+        <linearGradient
+          id="linear-gradient-2"
+          x1="235.28"
+          y1="411.28"
+          x2="95.92"
+          y2="169.91"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#f08aff" />
+          <stop offset="1" stopColor="#5415ff" />
+        </linearGradient>
+        <linearGradient
+          id="linear-gradient-3"
+          x1="349.77"
+          y1="72.37"
+          x2="210.48"
+          y2="313.61"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#fff14c" />
+          <stop offset="1" stopColor="#00d08a" />
+        </linearGradient>
+      </defs>
+      <g id="Layer_1-2">
+        <path
+          className="logo-full-3"
+          d="M.1,291C27.32,243.84,129.02,67.7,159.45,14.99c5.36-9.28,15.26-14.99,25.98-14.99h33.41c-32.88,56.95-126.96,219.91-140.88,244.01-.77,1.33.2,2.99,1.74,2.99h173.54l25.4,44H.1Z"
+        />
+        <path
+          className="logo-full-2"
+          d="M16.69,323.97L0,295h282.12c1.54,0,2.5-1.67,1.73-3l-86.84-150.43,25.37-43.94,42.16,73.03c33.95,58.81,73.13,126.68,97.19,168.34H42.69c-10.73,0-20.64-5.73-26-15.03Z"
+        />
+        <path
+          className="logo-full-1"
+          d="M220.64,92.63c-10.85,18.78-69.6,120.54-86.82,150.37h-50.73C119.17,180.52,187.08,62.88,222.37,1.76c24.91,43.15,72.98,126.41,113.71,196.97l45.76,79.27c5.35,9.27,5.36,20.69.01,29.97l-16.7,29c-21.16-36.64-126.27-218.71-141.06-244.33-.77-1.33-2.69-1.34-3.46,0Z"
+        />
+      </g>
+    </svg>
+  )
+}
+
+export default LogoSvg

package/src/components/logo-svg.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import LogoBase from "./logo-base";
+
+/**
+ * Monochrome outline logo (uses currentColor, no animation).
+ * Adapts to text color context.
+ */
+function LogoSvg(props: React.SVGProps<SVGSVGElement> & { size?: number, strokeWidth?: number }) {
+  const { size = 18, strokeWidth = 2, className, ...rest } = props;
+  return (
+    <LogoBase
+      width={size}
+      height={size}
+      className={className}
+      strokeWidth={strokeWidth}
+      animated={false}
+      colored={false}
+      withGlow={false}
+    />
+  );
+}
+
+export default LogoSvg;

package/src/components/menu-navigation.tsx

@@ -0,0 +1,359 @@
+import type { MenuDTO, MenuItem } from "@inferencesh/sdk";
+
+/** The part of a menu the navigation reads. */
+export type Menu = Pick<MenuDTO, "items">;
+import { cn } from "cn";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+import React, { ComponentType, ReactNode, useState } from "react";
+
+export interface LinkProps {
+    href: string;
+    className?: string;
+    children: ReactNode;
+}
+
+export interface MenuNavigationProps {
+    menu?: Menu;
+    basePath: string;
+    className?: string;
+    currentSlug: string;
+    LinkComponent: ComponentType<LinkProps>;
+}
+
+// Check if any descendant has the current slug (for auto-expanding)
+function hasActiveDescendant(item: MenuItem, currentSlug: string): boolean {
+    if (item.slug === currentSlug) return true;
+    if (item.children) {
+        return item.children.some(child => hasActiveDescendant(child, currentSlug));
+    }
+    return false;
+}
+
+// Recursive menu item renderer for nested items
+interface MenuItemRendererProps {
+    item: MenuItem;
+    basePath: string;
+    currentSlug: string;
+    LinkComponent: ComponentType<LinkProps>;
+    depth: number; // 0 = top level, 1 = first children, 2 = second children, etc.
+}
+
+function MenuItemRenderer({
+    item,
+    basePath,
+    currentSlug,
+    LinkComponent: Link,
+    depth,
+}: MenuItemRendererProps) {
+    const hasChildren = item.children && item.children.length > 0;
+    const isActive = currentSlug === item.slug;
+    const hasActiveChild = hasChildren && hasActiveDescendant(item, currentSlug);
+
+    // Auto-expand if this item or any descendant is active
+    const [isExpanded, setIsExpanded] = useState(
+        item.expanded !== undefined ? item.expanded : hasActiveChild
+    );
+    const panelId = `menu-${React.useId()}`;
+
+    // Calculate indentation based on depth
+    const paddingLeft = depth === 0 ? "px-3" : depth === 1 ? "pl-3 pr-3" : "pl-6 pr-3";
+
+    // Items with children act as collapsible groups
+    if (hasChildren) {
+        return (
+            <li>
+                <button
+                    onClick={() => setIsExpanded(!isExpanded)}
+                    aria-expanded={isExpanded}
+                    aria-controls={panelId}
+                    className={cn(
+                        "cursor-pointer w-full group flex items-center justify-between gap-2 text-sm py-2 rounded-lg transition-all duration-150 hover:bg-muted/70",
+                        paddingLeft,
+                        isActive
+                            ? "bg-brand-pink/10 text-brand-pink font-medium"
+                            : hasActiveChild
+                                ? "text-foreground font-medium"
+                                : "text-muted-foreground hover:text-foreground hover:bg-muted/70"
+                    )}
+                >
+                    <span className="flex items-center gap-2">
+                        <span
+                            className={cn(
+                                "w-1 h-1 rounded-full transition-all",
+                                isActive
+                                    ? "bg-brand-pink w-1.5 h-1.5"
+                                    : hasActiveChild
+                                        ? "bg-foreground/50"
+                                        : "bg-muted-foreground/30 group-hover:bg-muted-foreground/50"
+                            )}
+                        />
+                        {item.label}
+                    </span>
+                    <ChevronDown
+                        className={cn(
+                            "w-4 h-4 text-muted-foreground transition-transform duration-200",
+                            isExpanded ? "rotate-0" : "-rotate-90"
+                        )}
+                    />
+                </button>
+                {/* Rendered whether or not the group is open, and hidden with
+                    CSS when it is closed. Dropping the children from the markup
+                    also drops them from the page a crawler sees: a page in a
+                    closed group is then linked from nowhere but the sitemap. */}
+                <ul id={panelId} hidden={!isExpanded} className="mt-0.5 space-y-0.5">
+                    {item.children!.map((child) => (
+                        <MenuItemRenderer
+                            key={child.id || child.slug}
+                            item={child}
+                            basePath={basePath}
+                            currentSlug={currentSlug}
+                            LinkComponent={Link}
+                            depth={depth + 1}
+                        />
+                    ))}
+                </ul>
+            </li>
+        );
+    }
+
+    // Regular link item (no children)
+    return (
+        <li>
+            <Link
+                href={`${basePath}/${item.slug}`}
+                className={cn(
+                    "group flex items-center gap-2 text-sm py-2 rounded-lg transition-all duration-150",
+                    paddingLeft,
+                    isActive
+                        ? "bg-brand-pink/10 text-brand-pink font-medium"
+                        : "text-muted-foreground hover:text-foreground hover:bg-muted/70"
+                )}
+            >
+                <span
+                    className={cn(
+                        "w-1 h-1 rounded-full transition-all",
+                        isActive
+                            ? "bg-brand-pink w-1.5 h-1.5"
+                            : "bg-muted-foreground/30 group-hover:bg-muted-foreground/50"
+                    )}
+                />
+                {item.label}
+            </Link>
+        </li>
+    );
+}
+
+// Sidebar navigation component
+export function MenuNavigation({
+    menu,
+    basePath,
+    className,
+    currentSlug,
+    LinkComponent: Link,
+}: MenuNavigationProps) {
+    if (!menu?.items) return null;
+
+    return (
+        <nav className={cn("space-y-6", className)}>
+            {menu.items.map((group: MenuItem, index: number) => (
+                <div key={group.id || group.label}>
+                    {group.is_group ? (
+                        <div className="space-y-1">
+                            <div className="font-semibold text-xs tracking-wider text-muted-foreground/70">
+                                {group.slug ? (() => {
+                                    const isActive = currentSlug === group.slug;
+                                    return (
+                                        <Link
+                                            href={`${basePath}/${group.slug}`}
+                                            className={cn(
+                                                "group flex items-center gap-2 text-sm rounded-lg transition-all duration-150 p-2",
+                                                isActive
+                                                    ? "text-brand-pink hover:bg-brand-pink/10"
+                                                    : "text-muted-foreground hover:text-foreground hover:bg-muted/70"
+                                            )}
+                                        >
+                                            {group.label}
+                                        </Link>
+                                    );
+                                })() : (
+                                    <span>{group.label}</span>
+                                )}
+
+                            </div>
+                            <ul className="space-y-0.5">
+                                {group.children?.map((item: MenuItem) => (
+                                    <MenuItemRenderer
+                                        key={item.id || item.slug}
+                                        item={item}
+                                        basePath={basePath}
+                                        currentSlug={currentSlug}
+                                        LinkComponent={Link}
+                                        depth={1}
+                                    />
+                                ))}
+                            </ul>
+                        </div>
+                    ) : (
+                        <Link
+                            href={`${basePath}/${group.slug}`}
+                            className={cn(
+                                "group flex items-center gap-2 text-sm font-medium py-2 px-3 rounded-lg transition-all duration-150",
+                                currentSlug === group.slug
+                                    ? "bg-brand-pink/10 text-brand-pink"
+                                    : "text-muted-foreground hover:text-foreground hover:bg-muted/70"
+                            )}
+                        >
+                            <span
+                                className={cn(
+                                    "w-1.5 h-1.5 rounded-full transition-all",
+                                    currentSlug === group.slug
+                                        ? "bg-brand-pink"
+                                        : "bg-muted-foreground/30 group-hover:bg-muted-foreground/50"
+                                )}
+                            />
+                            {group.label}
+                        </Link>
+                    )}
+                    {/* Subtle divider between groups */}
+                    {index < menu.items.length - 1 && (
+                        <div className="mt-6 border-t border-border/50" />
+                    )}
+                </div>
+            ))
+            }
+        </nav >
+    );
+}
+
+// Get all pages in order from menu (recursive to support any nesting depth)
+function collectPagesFromItems(items: MenuItem[], pages: { slug: string; label: string }[]) {
+    for (const item of items) {
+        if (item.slug) {
+            pages.push({ slug: item.slug, label: item.label });
+        }
+        if (item.children && item.children.length > 0) {
+            collectPagesFromItems(item.children, pages);
+        }
+    }
+}
+
+function getAllPagesFromMenu(menu: Menu): { slug: string; label: string }[] {
+    if (!menu?.items) return [];
+
+    const pages: { slug: string; label: string }[] = [];
+
+    for (const group of menu.items) {
+        if (group.slug) {
+            pages.push({ slug: group.slug, label: group.label });
+        }
+        if (group.children && group.children.length > 0) {
+            collectPagesFromItems(group.children, pages);
+        }
+    }
+
+    return pages;
+}
+
+export interface PageNavigationProps {
+    menu?: Menu;
+    basePath: string;
+    currentSlug: string;
+    LinkComponent: ComponentType<LinkProps>;
+}
+
+// Prev/Next navigation component
+export function PageNavigation({
+    menu,
+    basePath,
+    currentSlug,
+    LinkComponent: Link,
+}: PageNavigationProps) {
+    if (!menu) return null;
+
+    const pages = getAllPagesFromMenu(menu);
+    const currentIndex = pages.findIndex((p) => p.slug === currentSlug);
+
+    const prevPage = currentIndex > 0 ? pages[currentIndex - 1] : null;
+    const nextPage =
+        currentIndex < pages.length - 1 ? pages[currentIndex + 1] : null;
+
+    if (!prevPage && !nextPage) return null;
+
+    return (
+        <div className="grid grid-cols-2 gap-4 pt-10 mt-10 border-t border-border">
+            {prevPage ? (
+                <Link
+                    href={`${basePath}/${prevPage.slug}`}
+                    className="group flex flex-col gap-2 p-4 rounded-xl border border-border hover:border-brand-pink/40 hover:bg-brand-pink/[0.02] transition-all"
+                >
+                    <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                        <ChevronLeft className="w-3 h-3" />
+                        previous
+                    </span>
+                    <span className="text-sm font-medium text-foreground group-hover:text-brand-pink transition-colors">
+                        {prevPage.label}
+                    </span>
+                </Link>
+            ) : (
+                <div />
+            )}
+
+            {nextPage ? (
+                <Link
+                    href={`${basePath}/${nextPage.slug}`}
+                    className="group flex flex-col gap-2 p-4 rounded-xl border border-border hover:border-brand-pink/40 hover:bg-brand-pink/[0.02] transition-all text-right"
+                >
+                    <span className="flex items-center justify-end gap-1 text-xs text-muted-foreground">
+                        next
+                        <ChevronRight className="w-3 h-3" />
+                    </span>
+                    <span className="text-sm font-medium text-foreground group-hover:text-brand-pink transition-colors">
+                        {nextPage.label}
+                    </span>
+                </Link>
+            ) : (
+                <div />
+            )}
+        </div>
+    );
+}
+
+export interface MenuSidebarProps {
+    menu?: Menu;
+    basePath: string;
+    title?: string;
+    currentSlug: string;
+    LinkComponent: ComponentType<LinkProps>;
+}
+
+// Wrapper for sticky sidebar
+export function MenuSidebar({
+    menu,
+    basePath,
+    title,
+    currentSlug,
+    LinkComponent: Link,
+}: MenuSidebarProps) {
+    if (!menu) return null;
+
+    return (
+        <div className="sticky top-0 overflow-y-auto pr-2 -mr-2 py-2">
+            {title && (
+                <div className="px-2 mb-6">
+                    <Link
+                        href={basePath}
+                        className="text-lg font-bold text-foreground hover:text-brand-pink transition-colors"
+                    >
+                        {title}
+                    </Link>
+                </div>
+            )}
+            <MenuNavigation
+                menu={menu}
+                basePath={basePath}
+                currentSlug={currentSlug}
+                LinkComponent={Link}
+            />
+        </div>
+    );
+}