feat(basic-starter): use server-side menus

chapter-three · Feb 16, 2022 · 58f1150 · 58f1150
1 parent 135cc1b
commit 58f1150
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 38 deletions.
diff --git a/starters/basic-starter/components/layout.tsx b/starters/basic-starter/components/layout.tsx
@@ -1,12 +1,17 @@
 import Link from "next/link"
-import { useMenu } from "next-drupal"
 import { useRouter } from "next/router"
+import { DrupalMenuLinkContent } from "next-drupal"
 
 import { PreviewAlert } from "@/components/preview-alert"
 
-export function Layout({ children }) {
+export interface LayoutProps {
+  menus: {
+    main: DrupalMenuLinkContent[]
+  }
+}
+
+export function Layout({ menus, children }) {
   const { asPath } = useRouter()
-  const { tree } = useMenu("main")
 
   return (
     <>
@@ -17,23 +22,25 @@ export function Layout({ children }) {
             <Link href="/" passHref>
               <a className="text-2xl font-semibold no-underline">Brand.</a>
             </Link>
-            <nav>
-              <ul className={`flex`}>
-                {tree?.map((link) => (
-                  <li key={link.url}>
-                    <Link href={link.url} passHref>
-                      <a
-                        className={`ml-10 hover:text-blue-600 ${
-                          asPath === link.url ? "underline" : "no-underline"
-                        }`}
-                      >
-                        {link.title}
-                      </a>
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </nav>
+            {menus?.main && (
+              <nav>
+                <ul className={`flex`}>
+                  {menus.main?.map((link) => (
+                    <li key={link.url}>
+                      <Link href={link.url} passHref>
+                        <a
+                          className={`ml-10 hover:text-blue-600 ${
+                            asPath === link.url ? "underline" : "no-underline"
+                          }`}
+                        >
+                          {link.title}
+                        </a>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            )}
           </div>
         </header>
         <main className="container py-10 mx-auto">{children}</main>

diff --git a/starters/basic-starter/components/preview-alert.tsx b/starters/basic-starter/components/preview-alert.tsx
@@ -7,7 +7,7 @@ export function PreviewAlert() {
   const [showPreviewAlert, setShowPreviewAlert] = React.useState<boolean>(false)
 
   React.useEffect(() => {
-    setShowPreviewAlert(true)
+    setShowPreviewAlert(isPreview && window.top === window.self)
   }, [isPreview])
 
   if (!showPreviewAlert) {

diff --git a/starters/basic-starter/lib/get-menus.ts b/starters/basic-starter/lib/get-menus.ts
@@ -0,0 +1,11 @@
+import { DrupalMenuLinkContent, getMenu } from "next-drupal"
+
+export async function getMenus(): Promise<{
+  main: DrupalMenuLinkContent[]
+}> {
+  const { tree: mainMenu } = await getMenu("main")
+
+  return {
+    main: mainMenu,
+  }
+}
diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
@@ -1,24 +1,27 @@
 import * as React from "react"
+import { GetStaticPathsResult, GetStaticPropsResult } from "next"
 import Head from "next/head"
 import {
   DrupalNode,
   getPathsFromContext,
   getResourceFromContext,
   getResourceTypeFromContext,
 } from "next-drupal"
-import { GetStaticPathsResult, GetStaticPropsResult } from "next"
+
+import { getMenus } from "@/lib/get-menus"
 import { NodeArticle } from "@/components/node-article"
 import { NodeBasicPage } from "@/components/node-basic-page"
+import { Layout, LayoutProps } from "@/components/layout"
 
-interface NodePageProps {
+interface NodePageProps extends LayoutProps {
   node: DrupalNode
 }
 
-export default function NodePage({ node }: NodePageProps) {
+export default function NodePage({ node, menus }: NodePageProps) {
   if (!node) return null
 
   return (
-    <>
+    <Layout menus={menus}>
       <Head>
         <title>{node.title}</title>
         <meta
@@ -28,7 +31,7 @@ export default function NodePage({ node }: NodePageProps) {
       </Head>
       {node.type === "node--page" && <NodeBasicPage node={node} />}
       {node.type === "node--article" && <NodeArticle node={node} />}
-    </>
+    </Layout>
   )
 }
 
@@ -69,6 +72,7 @@ export async function getStaticProps(
 
   return {
     props: {
+      menus: await getMenus(),
       node,
     },
     revalidate: 900,

diff --git a/starters/basic-starter/pages/_app.tsx b/starters/basic-starter/pages/_app.tsx
@@ -1,12 +1,7 @@
 import { AppProps } from "next/app"
-import { Layout } from "@/components/layout"
 
-import "../styles/globals.css"
+import "styles/globals.css"
 
 export default function App({ Component, pageProps }: AppProps) {
-  return (
-    <Layout>
-      <Component {...pageProps} />
-    </Layout>
-  )
+  return <Component {...pageProps} />
 }
diff --git a/starters/basic-starter/pages/index.tsx b/starters/basic-starter/pages/index.tsx
@@ -1,15 +1,18 @@
 import Head from "next/head"
+import { GetStaticPropsResult } from "next"
 import { DrupalNode, getResourceCollectionFromContext } from "next-drupal"
+
+import { getMenus } from "@/lib/get-menus"
 import { NodeArticleTeaser } from "@/components/node-article"
-import { GetStaticPropsResult } from "next"
+import { Layout, LayoutProps } from "@/components/layout"
 
-interface IndexPageProps {
+interface IndexPageProps extends LayoutProps {
   nodes: DrupalNode[]
 }
 
-export default function IndexPage({ nodes }: IndexPageProps) {
+export default function IndexPage({ menus, nodes }: IndexPageProps) {
   return (
-    <>
+    <Layout menus={menus}>
       <Head>
         <title>Next.js for Drupal</title>
         <meta
@@ -31,7 +34,7 @@ export default function IndexPage({ nodes }: IndexPageProps) {
           <p className="py-4">No nodes found</p>
         )}
       </div>
-    </>
+    </Layout>
   )
 }
 
@@ -52,6 +55,7 @@ export async function getStaticProps(
   return {
     props: {
       nodes,
+      menus: await getMenus(),
     },
     revalidate: 10,
   }