add context menu (w/ brand options) to header logo

allows downloading brand assets directly from the logo in the header

1 files changed, 56 insertions, 10 deletions

diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index 7fe0046f..a32d5d6d 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -7,10 +7,22 @@ import { Button } from "./ui/button";
 import { ArrowRight } from "lucide-react";
 import Image from "next/image";
 import { ThemeToggle } from "./theme-toggle";
-import { GithubIcon, Menu02Icon } from "@hugeicons/core-free-icons";
+import {
+	Copy01Icon,
+	Download01Icon,
+	GithubIcon,
+	LinkSquare02Icon,
+	Menu02Icon,
+} from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { cn } from "@/utils/ui";
 import { DEFAULT_LOGO_URL, SOCIAL_LINKS } from "@/constants/site-constants";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuTrigger,
+} from "./ui/context-menu";
 
 export function Header() {
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -39,15 +51,49 @@ export function Header() {
 		<header className="bg-background shadow-background/85 sticky top-0 z-10 shadow-[0_30px_35px_15px_rgba(0,0,0,1)]">
 			<div className="relative flex w-full items-center justify-between px-6 pt-4">
 				<div className="relative z-10 flex items-center gap-6">
-					<Link href="/" className="flex items-center gap-3">
-						<Image
-							src={DEFAULT_LOGO_URL}
-							alt="OpenCut Logo"
-							className="invert dark:invert-0"
-							width={32}
-							height={32}
-						/>
-					</Link>
+					<ContextMenu>
+						<ContextMenuTrigger asChild>
+							<Link href="/" className="flex items-center gap-3">
+								<Image
+									src={DEFAULT_LOGO_URL}
+									alt="OpenCut Logo"
+									className="invert dark:invert-0"
+									width={32}
+									height={32}
+								/>
+							</Link>
+						</ContextMenuTrigger>
+						<ContextMenuContent>
+							<ContextMenuItem
+								onClick={async () => {
+									const res = await fetch(DEFAULT_LOGO_URL);
+									const svg = await res.text();
+									await navigator.clipboard.writeText(svg);
+								}}
+							>
+								<HugeiconsIcon icon={Copy01Icon} />
+								Copy SVG
+							</ContextMenuItem>
+							<ContextMenuItem
+								onClick={() => {
+									const a = document.createElement("a");
+									a.href = DEFAULT_LOGO_URL;
+									a.download = "opencut-logo.svg";
+									a.click();
+								}}
+							>
+								<HugeiconsIcon icon={Download01Icon} />
+								Download SVG
+							</ContextMenuItem>
+							<Link href="/brand">
+								<ContextMenuItem>
+									<HugeiconsIcon icon={LinkSquare02Icon} />
+									Brand assets
+								</ContextMenuItem>
+							</Link>
+						</ContextMenuContent>
+					</ContextMenu>
+
 					<nav className="hidden items-center gap-4 md:flex">
 						{links.map((link) => (
 							<Link key={link.href} href={link.href}>