Navigation Link in page navigation #5

Starchasers · Oct 7, 2021 · 8e00179 · 8e00179
1 parent 61898d9
commit 8e00179
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 9 deletions.
diff --git a/@types/generated/contentful.d.ts b/@types/generated/contentful.d.ts
@@ -79,7 +79,7 @@ export interface ILayoutFields {
   metaTags: IMetaTag[]
 
   /** ContentPages */
-  contentPages: IContentPage[]
+  contentPages: (IContentPage | INavigationLink)[]
 }
 
 export interface ILayout extends Entry<ILayoutFields> {
@@ -124,6 +124,31 @@ export interface IMetaTag extends Entry<IMetaTagFields> {
   }
 }
 
+export interface INavigationLinkFields {
+  /** Title */
+  title: string
+
+  /** Slug */
+  slug: string
+}
+
+export interface INavigationLink extends Entry<INavigationLinkFields> {
+  sys: {
+    id: string
+    type: string
+    createdAt: string
+    updatedAt: string
+    locale: string
+    contentType: {
+      sys: {
+        id: 'navigationLink'
+        linkType: 'ContentType'
+        type: 'Link'
+      }
+    }
+  }
+}
+
 export interface IWarTeamFields {
   /** Title */
   title: string
@@ -197,6 +222,7 @@ export type CONTENT_TYPE =
   | 'coordinatesConfiguration'
   | 'layout'
   | 'metaTag'
+  | 'navigationLink'
   | 'warTeam'
   | 'warTeamsPage'
 

diff --git a/src/components/elements/PageNavigation.tsx b/src/components/elements/PageNavigation.tsx
@@ -1,11 +1,11 @@
 import { css } from '@emotion/css'
 import React from 'react'
 import Link from 'next/link'
-import { IContentPage } from '../../../@types/generated/contentful'
+import { IContentPage, INavigationLink } from '../../../@types/generated/contentful'
 import NavigationMenu from '../blocks/NavigationMenu'
 
 interface IPageNavigation {
-  contentPages: IContentPage[]
+  contentPages: (IContentPage | INavigationLink)[]
   activePage: IContentPage
 }
 
@@ -19,14 +19,23 @@ const PageNavigation = (props: IPageNavigation) => (
       <NavigationMenu.Item>
         <b>Navigation</b>
       </NavigationMenu.Item>
-      {props.contentPages?.map((contentPage, index) => (
+      {props.contentPages?.map((link, index) => (
         <NavigationMenu.Item
-          key={contentPage.sys.id + index}
-          className={contentPage.sys.id === props.activePage.sys.id ? 'active' : undefined}
+          key={link.sys.id + index}
+          className={link.sys.id === props.activePage.sys.id ? 'active' : undefined}
         >
-          <Link href={contentPage.fields.slug} passHref>
-            <a>{contentPage.fields.title}</a>
-          </Link>
+          {link.sys.contentType.sys.id === 'contentPage' && (
+            <Link href={link.fields.slug} passHref>
+              <a>{link.fields.title}</a>
+            </Link>
+          )}
+          {link.sys.contentType.sys.id === 'navigationLink' && (
+            <Link href={link.fields.slug} passHref>
+              <a target={'_blank'} rel='noreferrer noopener'>
+                {link.fields.title}
+              </a>
+            </Link>
+          )}
         </NavigationMenu.Item>
       ))}
     </NavigationMenu>