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 (
-
- {entry.name}
-
+ {isExternalHref(entry.href) ? (
+
+ {entry.name}
+
+ ) : (
+
+ {entry.name}
+
+ )}
);
@@ -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) ? (
+
+ {entry.name}
+
+ ) : (
{entry.name}