supermemory/apps/web/app/onboarding/nav-menu.tsx

"use client";
import {
    HoverCard,
    HoverCardContent,
    HoverCardTrigger,
} from "@ui/components/hover-card"
import { useOnboarding, type OnboardingStep } from "./onboarding-context";
import { useState } from "react";
import { cn } from "@lib/utils";

export function NavMenu({ children }: { children: React.ReactNode }) {
    const { setStep, currentStep, visibleSteps, getStepNumberFor } = useOnboarding();
    const [open, setOpen] = useState(false);
    const LABELS: Record<OnboardingStep, string> = {
        intro: "Intro",
        name: "Name",
        bio: "About you",
        // connections: "Connections",
        mcp: "MCP",
        extension: "Extension",
        welcome: "Welcome",
    };
    const navigableSteps = visibleSteps.filter(step => step !== "intro" && step !== "welcome");
    return (
        <HoverCard openDelay={100} open={open} onOpenChange={setOpen}>
            <HoverCardTrigger className="w-fit" asChild>{children}</HoverCardTrigger>
            <HoverCardContent align="start" side="left" sideOffset={24} className="origin-top-right bg-white border border-zinc-200 text-zinc-900">
                <h2 className="text-zinc-900 text-sm font-medium">Go to step</h2>
                <ul className="text-sm mt-2">
                    {navigableSteps.map((step) => (
                        <li key={step}>
                            <button type="button" className={cn("py-1.5 px-2 rounded-md hover:bg-zinc-100 w-full text-left", currentStep === step && "bg-zinc-100")} onClick={() => {
                                setStep(step);
                                setOpen(false);
                            }}>
                                {getStepNumberFor(step)}. {LABELS[step]}
                            </button>
                        </li>
                    ))}
                </ul>
            </HoverCardContent>
        </HoverCard>
    );
}