From 6a69c26fa2fa2900d2bdf565a24517e3f8215be1 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Tue, 19 May 2026 23:14:28 +0700
Subject: [PATCH] website: readd Image/Video navbar links

---
 .../src/components/navbar/navbar.tsx          | 52 ++++++++++++++-----
 1 file changed, 38 insertions(+), 14 deletions(-)

diff --git a/frontend/apps/artcraft-website/src/components/navbar/navbar.tsx b/frontend/apps/artcraft-website/src/components/navbar/navbar.tsx
index c803cc2094..2420acddc4 100644
--- a/frontend/apps/artcraft-website/src/components/navbar/navbar.tsx
+++ b/frontend/apps/artcraft-website/src/components/navbar/navbar.tsx
@@ -26,6 +26,7 @@ import {
 } from "@fortawesome/pro-solid-svg-icons";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import {
+  appLink,
   SOCIAL_LINKS,
   USE_WEBAPP_FOR_APP_FEATURES,
   WEBAPP_URL,
@@ -37,6 +38,8 @@ type NavEntry = NavLeaf | NavGroup;
 
 const NAV_ITEMS: NavEntry[] = [
   { name: "Home", href: "/" },
+  { name: "Image", href: appLink("/create-image") },
+  { name: "Video", href: appLink("/create-video") },
   {
     name: "Resources",
     children: [
@@ -50,6 +53,8 @@ const NAV_ITEMS: NavEntry[] = [
   { name: "Support", href: "/support" },
 ];
 
+const isExternalHref = (href: string) => /^https?:\/\//.test(href);
+
 function isGroup(entry: NavEntry): entry is NavGroup {
   return "children" in entry && Array.isArray(entry.children);
 }
@@ -113,13 +118,22 @@ export default function Navbar() {
                         return (
                           <NavigationMenu.Item key={entry.name}>
                             <NavigationMenu.Link asChild>
-                              <Link
-                                to={entry.href}
-                                aria-current={active ? "page" : undefined}
-                                className={twMerge(baseClasses, stateClasses)}
-                              >
-                                {entry.name}
-                              </Link>
+                              {isExternalHref(entry.href) ? (
+                                <a
+                                  href={entry.href}
+                                  className={twMerge(baseClasses, stateClasses)}
+                                >
+                                  {entry.name}
+                                </a>
+                              ) : (
+                                <Link
+                                  to={entry.href}
+                                  aria-current={active ? "page" : undefined}
+                                  className={twMerge(baseClasses, stateClasses)}
+                                >
+                                  {entry.name}
+                                </Link>
+                              )}
                             </NavigationMenu.Link>
                           </NavigationMenu.Item>
                         );
@@ -381,17 +395,27 @@ export default function Navbar() {
                         location.pathname,
                         entry.href,
                       );
-                      return (
+                      const leafClassName = twMerge(
+                        "rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+                        isCurrent
+                          ? "bg-white/[0.08] text-white"
+                          : "text-white/60 active:bg-white/[0.04]",
+                      );
+                      return isExternalHref(entry.href) ? (
+                        <DisclosureButton
+                          key={entry.name}
+                          as="a"
+                          href={entry.href}
+                          className={leafClassName}
+                        >
+                          {entry.name}
+                        </DisclosureButton>
+                      ) : (
                         <DisclosureButton
                           key={entry.name}
                           as={Link}
                           to={entry.href}
-                          className={twMerge(
-                            "rounded-lg px-3 py-2 text-sm font-medium transition-colors",
-                            isCurrent
-                              ? "bg-white/[0.08] text-white"
-                              : "text-white/60 active:bg-white/[0.04]",
-                          )}
+                          className={leafClassName}
                         >
                           {entry.name}
                         </DisclosureButton>