Web spotlight root in Navigation

.env.local.template

@@ -1,6 +1,9 @@
 APP_VERSION=$npm_package_version
 APP_NAME=$npm_package_name
 NEXT_PUBLIC_KONTENT_ENVIRONMENT_ID=2cedc519-a547-01ba-dde7-b01e00b909a1
-KONTENT_COLLECTION_CODENAME=ficto_healthtech_surgical
+NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME=ficto_healthtech_surgical
+# Collection in format <COLLECTION_CODENAME>:<DOMAIN_WITOUHOUT_PROTOCOL> i.e. "ficto_healthtech:ficto-healthtech.vercel.app,ficto_healthtech_imaging:ficto-healthtech-imaging.vercel.app,ficto_healthtech_surgical:ficto-healthtech-surgical.vercel.app
+NEXT_PUBLIC_COLLECTION_DOMAINS=
 KONTENT_PREVIEW_API_KEY=
 KONTENT_MANAGEMENT_API_KEY=
+

components/shared/ui/menu.tsx

@@ -4,8 +4,9 @@ import { NextRouter, useRouter } from "next/router";
 import { FC, useState } from "react";
 
 import { mainColorBgClass } from "../../../lib/constants/colors";
+import { externalPreviewUrlsMapping } from "../../../lib/constants/menu";
 import { createItemSmartLink } from "../../../lib/utils/smartLinkUtils";
-import { Block_Navigation } from "../../../models";
+import { Block_Navigation, contentTypes } from "../../../models";
 import { useSiteCodename } from "../siteCodenameContext";
 
 type Link = Readonly<Block_Navigation>;
@@ -29,9 +30,24 @@ const isCurrentNavigationItemActive = (navigation: Block_Navigation, router: Nex
   const pathWithoutQuerystring = router.asPath.replace(/\?.*/, '');
   const pathSegments = pathWithoutQuerystring.split("/");
   const topLevelSegment = pathSegments[1];
-  return (navigation.elements.pageLink.linkedItems[0]?.elements.url.value === topLevelSegment);
+  const pageLink = navigation.elements.pageLink.linkedItems[0];
+  return (pageLink?.system.codename === contentTypes.page.codename && pageLink.elements.url.value === topLevelSegment);
 };
 
+const resolveLink = (link: Readonly<Block_Navigation>) => {
+  if (link.elements.externalLink.value) {
+    return link.elements.externalLink.value;
+  }
+
+  const pageLink = link.elements.pageLink.linkedItems[0];
+  const collectionDomain = externalPreviewUrlsMapping[pageLink?.system.collection ?? ""] || "";
+
+  if (pageLink?.system.type === contentTypes.web_spotlight_root.codename) {
+    return collectionDomain;
+  }
+
+  return collectionDomain + "/" + pageLink?.elements.url.value;
+}
 
 const MenuList: FC<MenuListProps> = props => {
   const router = useRouter();
@@ -59,7 +75,7 @@ const MenuList: FC<MenuListProps> = props => {
             <Link
               {...link.elements.openInANewWindow.value[0] ? { rel: "noopener noreferrer", target: "_blank" } : {}}
               className="h-full flex items-center justify-between w-full py-2 pl-3 pr-4 font-medium text-gray-900 border-b border-gray-100 md:w-auto md:bg-transparent md:border-0 md:hover:bg-white"
-              href={link.elements.externalLink.value ? link.elements.externalLink.value : "/" + link.elements.pageLink.linkedItems[0]?.elements.url.value}
+              href={resolveLink(link)}
             >
               {link.elements.label.value}
             </Link>
@@ -70,6 +86,7 @@ const MenuList: FC<MenuListProps> = props => {
   );
 }
 
+
 const DropdownButton: FC<Props> = props => {
   return (
     <button
@@ -90,7 +107,7 @@ const DropdownMenuItems: FC<DropdownMenuProps> = props => {
         <li key={link.system.codename}>
           <Link
             {...link.elements.openInANewWindow.value[0] ? { rel: "noopener noreferrer", target: "_blank" } : {}}
-            href={link.elements.externalLink.value ? link.elements.externalLink.value : "/" + link.elements.pageLink.linkedItems[0]?.elements.url.value}
+            href={resolveLink(link)}
             className={`${isCurrentNavigationItemActive(link, router) ? "border-l-gray-500 cursor-default " : "border-l-transparent hover:border-l-gray-500"}
           block p-3 bg-gray-200 border-l-8 h-full`}
           >

lib/constants/menu.ts

@@ -6,5 +6,12 @@ export const perCollectionRootItems = {
   ficto_healthtech_surgical: "ficto_healthtech_surgical"
 } as const satisfies PerCollection<string>;
 
+export const externalPreviewUrlsMapping = Object.fromEntries(
+  process.env.NEXT_PUBLIC_COLLECTION_DOMAINS?.split(",")
+    .map(collectionPair => collectionPair.split(":"))
+    .map(([collectionCodename, domain]) => [collectionCodename, "https://" + domain])
+    .filter(([collectionCodename]) => collectionCodename !== process.env.NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME) ?? []
+);
+
 export const getRootCodename = (siteCodename: ValidCollectionCodename) => perCollectionRootItems[siteCodename];
 

lib/utils/env.ts

@@ -1,10 +1,10 @@
 import { isValidCollectionCodename } from "../types/perCollection";
 
-const { KONTENT_COLLECTION_CODENAME } = process.env;
+const { NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME } = process.env;
 
-if (!isValidCollectionCodename(KONTENT_COLLECTION_CODENAME)) {
-  throw new Error(`Invalid collection codename "${KONTENT_COLLECTION_CODENAME}".`);
+if (!isValidCollectionCodename(NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME)) {
+  throw new Error(`Invalid collection codename "${NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME}".`);
 }
 
 /** Use only on server - for client use `useSiteCodename` hook */
-export const siteCodename = KONTENT_COLLECTION_CODENAME;
+export const siteCodename = NEXT_PUBLIC_KONTENT_COLLECTION_CODENAME;