RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

allows downloading brand assets directly from the logo in the header
This commit is contained in:
Maze Winther 2026-03-04 17:11:32 +01:00
parent 5ca2de25c6
commit ca3e5c98e6
1 changed files with 56 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
apps/web/src/components/header.tsx
View File

@ -7,10 +7,22 @@ import { Button } from "./ui/button";
import { ArrowRight } from "lucide-react"; import { ArrowRight } from "lucide-react";
import Image from "next/image"; import Image from "next/image";
import { ThemeToggle } from "./theme-toggle"; 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 { HugeiconsIcon } from "@hugeicons/react";
import { cn } from "@/utils/ui"; import { cn } from "@/utils/ui";
import { DEFAULT_LOGO_URL, SOCIAL_LINKS } from "@/constants/site-constants"; import { DEFAULT_LOGO_URL, SOCIAL_LINKS } from "@/constants/site-constants";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "./ui/context-menu";
export function Header() { export function Header() {
const [isMenuOpen, setIsMenuOpen] = useState(false); 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)]"> <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 flex w-full items-center justify-between px-6 pt-4">
<div className="relative z-10 flex items-center gap-6"> <div className="relative z-10 flex items-center gap-6">
<Link href="/" className="flex items-center gap-3"> <ContextMenu>
<Image <ContextMenuTrigger asChild>
src={DEFAULT_LOGO_URL} <Link href="/" className="flex items-center gap-3">
alt="OpenCut Logo" <Image
className="invert dark:invert-0" src={DEFAULT_LOGO_URL}
width={32} alt="OpenCut Logo"
height={32} className="invert dark:invert-0"
/> width={32}
</Link> 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"> <nav className="hidden items-center gap-4 md:flex">
{links.map((link) => ( {links.map((link) => (
<Link key={link.href} href={link.href}> <Link key={link.href} href={link.href}>