🛠️ Create context-menu for svgl homepage link

src/components/layout/header.svelte

@@ -4,7 +4,6 @@
   import { mode } from "mode-watcher";
   import ModeToggle from "@/components/modeToggle.svelte";
 
-  import Svgl from "@/components/logos/svgl.svelte";
   import Twitter from "@/components/logos/twitter.svelte";
 
   import { Separator } from "@/components/ui/separator";
@@ -13,6 +12,7 @@
   import SidebarMobileMenu from "@/components/layout/sidebarMobileMenu.svelte";
   import SettingsMenu from "@/components/settings/settingsMenu.svelte";
   import GithubLink from "@/components/githubLink.svelte";
+  import HomeLink from "@/components/layout/homeLink.svelte";
 </script>
 
 <header
@@ -21,13 +21,7 @@
   <nav class="flex w-full items-center justify-between">
     <div class="flex items-center space-x-2">
       <SidebarMobileMenu className="md:hidden" />
-      <a
+      <HomeLink />
-        href="/"
-        class="flex items-center space-x-2 transition-colors hover:text-neutral-700 dark:hover:text-neutral-300"
-      >
-        <Svgl size={28} />
-        <h2 class="text-xl font-medium tracking-tight">svgl</h2>
-      </a>
     </div>
     <div class="flex h-5 items-center space-x-2.5">
       <div class="flex items-center space-x-1.5">

src/components/layout/homeLink.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type { iSVG } from "@/types/svg";
+
+  import { globals } from "@/globals";
+  import { toast } from "svelte-sonner";
+  import { refreshAll } from "$app/navigation";
+  import { clipboard } from "@/utils/clipboard";
+
+  import { getSource } from "@/templates/getSource";
+
+  import Svgl from "@/components/logos/svgl.svelte";
+  import Github from "@/components/logos/github.svelte";
+  import * as ContextMenu from "@/components/ui/context-menu";
+
+  import CopyIcon from "@lucide/svelte/icons/copy";
+  import BugIcon from "@lucide/svelte/icons/bug";
+  import BoxIcon from "@lucide/svelte/icons/box";
+  import HeartHandshakeIcon from "@lucide/svelte/icons/heart-handshake";
+  import ArrowUpRight from "@lucide/svelte/icons/arrow-up-right";
+
+  const svgInfo = {
+    title: "Svgl",
+    category: "Library",
+    route: `/library/svgl.svg`,
+    url: "https://svgl.app",
+  } as iSVG;
+
+  const copySvgToClipboard = async () => {
+    let content = await getSource({
+      url: svgInfo.route as string,
+      optimize: false,
+    });
+
+    await clipboard(content);
+
+    const category = Array.isArray(svgInfo.category)
+      ? svgInfo.category.sort().join(" - ")
+      : svgInfo.category;
+
+    toast.success("Copied SVG to clipboard", {
+      description: `${svgInfo.title} - ${category}`,
+    });
+  };
+
+  const gotoUrl = (url: string) => {
+    window.open(url, "_blank");
+  };
+</script>
+
+<ContextMenu.Root>
+  <ContextMenu.Trigger>
+    <a
+      href="/"
+      class="flex items-center space-x-2 transition-colors hover:text-neutral-700 dark:hover:text-neutral-300"
+    >
+      <Svgl size={28} />
+      <h2 class="text-xl font-medium tracking-tight">svgl</h2>
+    </a>
+  </ContextMenu.Trigger>
+  <ContextMenu.Content class="w-fit">
+    <ContextMenu.Item onclick={() => copySvgToClipboard()}>
+      <CopyIcon size={14} />
+      <span>Copy SVG</span>
+    </ContextMenu.Item>
+    <ContextMenu.Item
+      onclick={() => gotoUrl(`${globals.githubUrl}/issues/new/choose`)}
+    >
+      <BugIcon size={14} />
+      <span>Create Issue</span>
+      <ArrowUpRight size={10} />
+    </ContextMenu.Item>
+    <ContextMenu.Item onclick={() => gotoUrl(globals.submitUrl)}>
+      <HeartHandshakeIcon size={14} />
+      <span>Contribute</span>
+      <ArrowUpRight size={10} />
+    </ContextMenu.Item>
+    <ContextMenu.Item onclick={() => gotoUrl(globals.githubUrl)}>
+      <Github size={14} />
+      <span>GitHub Repository</span>
+      <ArrowUpRight size={10} />
+    </ContextMenu.Item>
+  </ContextMenu.Content>
+</ContextMenu.Root>