Invalidate menu if a page in the menu is invalidated

app/api/revalidate/route.tsx

@@ -1,6 +1,7 @@
 import {NextRequest, NextResponse} from "next/server"
 import {revalidateTag} from "next/cache"
-import {getEntityFromPath} from "@lib/gql/gql-queries"
+import {getEntityFromPath, getMenu} from "@lib/gql/gql-queries"
+import getActiveTrail from "@lib/drupal/utils"
 
 export const revalidate = 0
 
@@ -23,6 +24,9 @@ export const GET = async (request: NextRequest) => {
   const {entity} = await getEntityFromPath("/")
   if (entity?.path === path) tagsInvalidated.push("paths:/")
 
+  const menu = await getMenu()
+  if (!!getActiveTrail(menu, path).length) tagsInvalidated.push("menu:main")
+
   tagsInvalidated.map(tag => revalidateTag(tag))
   return NextResponse.json({revalidated: true, tags: tagsInvalidated})
 }

package.json

@@ -20,7 +20,7 @@
     "@mui/base": "5.0.0-dev.20240529-082515-213b5e33ab",
     "@next/third-parties": "^14.2.4",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "algoliasearch": "^4.24.0",
@@ -39,16 +39,16 @@
     "node-cache": "^5.1.2",
     "plaiceholder": "^3.0.0",
     "postcss": "^8.4.39",
-    "qs": "^6.12.2",
+    "qs": "^6.12.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-focus-lock": "^2.12.1",
-    "react-instantsearch": "^7.12.0",
-    "react-instantsearch-nextjs": "^0.3.5",
+    "react-instantsearch": "^7.12.1",
+    "react-instantsearch-nextjs": "^0.3.6",
     "react-slick": "^0.30.2",
     "react-tiny-oembed": "^1.1.0",
     "sharp": "^0.33.4",
-    "tailwind-merge": "^2.3.0",
+    "tailwind-merge": "^2.4.0",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.3",
     "usehooks-ts": "^3.1.0"

src/components/layouts/interior-page.tsx

@@ -3,7 +3,7 @@ import SideNav from "@components/menu/side-nav"
 import {HtmlHTMLAttributes} from "react"
 import {MenuAvailable} from "@lib/gql/__generated__/drupal.d"
 import {twMerge} from "tailwind-merge"
-import getActiveTrail from "@lib/utils/get-active-trail"
+import getActiveTrail from "@lib/drupal/utils"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   /**

src/components/menu/main-menu.tsx

@@ -10,7 +10,7 @@ import {useBoolean, useEventListener} from "usehooks-ts"
 import {useCallback, useEffect, useId, useLayoutEffect, useRef, useState} from "react"
 import {usePathname} from "next/navigation"
 import usePageHasTopBanner from "@lib/hooks/usePageHasTopBanner"
-import getActiveTrail from "@lib/utils/get-active-trail"
+import getActiveTrail from "@lib/drupal/utils"
 import {ShoppingCartIcon} from "@heroicons/react/24/outline"
 
 const menuLevelsToShow = 2
@@ -186,7 +186,7 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
   return (
     <li
       ref={menuItemRef}
-      className={clsx("relative m-0 border-b border-cool-grey py-2 first:border-t last:border-0 lg:relative lg:rs-ml-2 2xl:rs-ml-3 lg:border-black-20 lg:py-0 first:lg:ml-0", {"first:border-t-0 lg:border-b-0": level === 0})}
+      className={clsx("relative m-0 border-b border-cool-grey py-2 lg:rs-ml-2 2xl:rs-ml-3 first:border-t last:border-0 lg:relative lg:border-black-20 lg:py-0 first:lg:ml-0", {"first:border-t-0 lg:border-b-0": level === 0})}
     >
       <div className="flex items-center justify-between lg:justify-end">
         <Link

src/lib/drupal/utils.tsx

@@ -1,5 +1,5 @@
 import {stringify} from "qs"
-import {TermUnion} from "@lib/gql/__generated__/drupal"
+import {TermUnion, MenuItem} from "@lib/gql/__generated__/drupal"
 
 export const buildUrl = (path: string, params?: string | Record<string, string> | URLSearchParams): URL => {
   const url = new URL(path.charAt(0) === "/" ? `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}${path}` : path)
@@ -53,3 +53,39 @@ export const buildTaxonomyTree = <T extends TermUnion>(terms: T[], parent: T["id
       }
     : {}
 }
+
+/**
+ * Get an array of menu item ids representing the current page"s location in the main menu.
+ *
+ * @param menuItems
+ *   Array of menu items.
+ * @param currentPath
+ *   Current page url.
+ */
+const getActiveTrail = (menuItems: MenuItem[], currentPath?: string) => {
+  const getActiveTrailInternal = (menuItems: MenuItem[], trail: string[] = []): string[] => {
+    let childTrail, currentTrail
+    for (let i = 0; i < menuItems.length; i++) {
+      currentTrail = [...trail]
+      currentTrail.push(menuItems[i].id)
+
+      if (currentPath === menuItems[i].url) {
+        return currentTrail
+      }
+
+      const childrenItems = menuItems[i].children
+
+      if (childrenItems) {
+        childTrail = getActiveTrailInternal(childrenItems, [...currentTrail])
+        if (childTrail.length > 0) {
+          return childTrail
+        }
+      }
+    }
+    return []
+  }
+
+  return getActiveTrailInternal(menuItems)
+}
+
+export default getActiveTrail

yarn.lock

@@ -1725,7 +1725,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.1, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
   version: 7.24.5
   resolution: "@babel/runtime@npm:7.24.5"
   dependencies:
@@ -6098,12 +6098,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^20.14.9":
-  version: 20.14.9
-  resolution: "@types/node@npm:20.14.9"
+"@types/node@npm:^20.14.10":
+  version: 20.14.10
+  resolution: "@types/node@npm:20.14.10"
   dependencies:
     undici-types: "npm:~5.26.4"
-  checksum: 10c0/911ffa444dc032897f4a23ed580c67903bd38ea1c5ec99b1d00fa10b83537a3adddef8e1f29710cbdd8e556a61407ed008e06537d834e48caf449ce59f87d387
+  checksum: 10c0/0b06cff14365c2d0085dc16cc8cbea5c40ec09cfc1fea966be9eeecf35562760bfde8f88e86de6edfaf394501236e229d9c1084fad04fb4dec472ae245d8ae69
   languageName: node
   linkType: hard
 
@@ -8804,7 +8804,7 @@ __metadata:
     "@storybook/react": "npm:^8.1.11"
     "@storybook/testing-library": "npm:^0.2.2"
     "@tailwindcss/container-queries": "npm:^0.1.1"
-    "@types/node": "npm:^20.14.9"
+    "@types/node": "npm:^20.14.10"
     "@types/react": "npm:^18.3.3"
     "@types/react-dom": "npm:^18.3.0"
     "@types/react-slick": "npm:^0.23.13"
@@ -8831,18 +8831,18 @@ __metadata:
     postcss: "npm:^8.4.39"
     prettier: "npm:^3.3.2"
     prettier-plugin-tailwindcss: "npm:^0.6.5"
-    qs: "npm:^6.12.2"
+    qs: "npm:^6.12.3"
     react: "npm:^18.3.1"
     react-docgen: "npm:^7.0.3"
     react-dom: "npm:^18.3.1"
     react-focus-lock: "npm:^2.12.1"
-    react-instantsearch: "npm:^7.12.0"
-    react-instantsearch-nextjs: "npm:^0.3.5"
+    react-instantsearch: "npm:^7.12.1"
+    react-instantsearch-nextjs: "npm:^0.3.6"
     react-slick: "npm:^0.30.2"
     react-tiny-oembed: "npm:^1.1.0"
     sharp: "npm:^0.33.4"
     storybook: "npm:^8.1.11"
-    tailwind-merge: "npm:^2.3.0"
+    tailwind-merge: "npm:^2.4.0"
     tailwindcss: "npm:^3.4.4"
     tsconfig-paths-webpack-plugin: "npm:^4.1.0"
     typescript: "npm:^5.5.3"
@@ -11677,9 +11677,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"instantsearch.js@npm:4.73.0":
-  version: 4.73.0
-  resolution: "instantsearch.js@npm:4.73.0"
+"instantsearch.js@npm:4.73.1":
+  version: 4.73.1
+  resolution: "instantsearch.js@npm:4.73.1"
   dependencies:
     "@algolia/events": "npm:^4.0.1"
     "@types/dom-speech-recognition": "npm:^0.0.1"
@@ -11692,10 +11692,10 @@ __metadata:
     instantsearch-ui-components: "npm:0.7.0"
     preact: "npm:^10.10.0"
     qs: "npm:^6.5.1 < 6.10"
-    search-insights: "npm:^2.13.0"
+    search-insights: "npm:^2.15.0"
   peerDependencies:
     algoliasearch: ">= 3.1 < 6"
-  checksum: 10c0/9db612088f71e5ece0ce232bca8062ba3851bcdd728c06c36d20b1d6a4a36ded4c34aaeccde8cccc6e10b88c397ba8713ca655c096a181152ac273e98e1bcd1e
+  checksum: 10c0/de2be092614360fd1ee8dbdc82081b25fda971f4f7d61ea1ebbca982502001472874fdfeeb2e995f70f66b374c3c3498d6d78dfa091322f45fa32a7176f3004d
   languageName: node
   linkType: hard
 
@@ -14674,12 +14674,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:^6.12.2":
-  version: 6.12.2
-  resolution: "qs@npm:6.12.2"
+"qs@npm:^6.12.3":
+  version: 6.12.3
+  resolution: "qs@npm:6.12.3"
   dependencies:
     side-channel: "npm:^1.0.6"
-  checksum: 10c0/d431fe6914aea026794c047b9c5ac5d29e96cc13dc14f3ca838f5f3061b0f1ed435d3f616508bc0e8a64fc29d13359f08bfe723aabc5f80f36d11057b2de6ebf
+  checksum: 10c0/243ddcc8f49dab78fc51041f7f64c500b47c671c45a101a8aca565d8537cb562921da7ef1a831b4a7051596ec88bb35a0d5e25a240025e8b32c6bfb69f00bf2f
   languageName: node
   linkType: hard
 
@@ -14852,44 +14852,44 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-instantsearch-core@npm:7.12.0":
-  version: 7.12.0
-  resolution: "react-instantsearch-core@npm:7.12.0"
+"react-instantsearch-core@npm:7.12.1":
+  version: 7.12.1
+  resolution: "react-instantsearch-core@npm:7.12.1"
   dependencies:
     "@babel/runtime": "npm:^7.1.2"
     algoliasearch-helper: "npm:3.22.2"
-    instantsearch.js: "npm:4.73.0"
+    instantsearch.js: "npm:4.73.1"
     use-sync-external-store: "npm:^1.0.0"
   peerDependencies:
-    algoliasearch: ">= 3.1 < 5"
+    algoliasearch: ">= 3.1 < 6"
     react: ">= 16.8.0 < 19"
-  checksum: 10c0/3390f5bf223122322eabed2b447b7d0b4dd486abfa5c69dc18a5d7c10711832ddc3220b6f6c64452e76ffbabd3161d4fd3ce31ad5a3421e26d3e8b5001af14ee
+  checksum: 10c0/830b6a404b187d2cc2802195db4a584cf20d7359c04520b9b44d32da2c42af90231b7e74c28f5ef9ac1bd4de46c74df148aea8ecb97656ba1da8579523e8b2ec
   languageName: node
   linkType: hard
 
-"react-instantsearch-nextjs@npm:^0.3.5":
-  version: 0.3.5
-  resolution: "react-instantsearch-nextjs@npm:0.3.5"
+"react-instantsearch-nextjs@npm:^0.3.6":
+  version: 0.3.6
+  resolution: "react-instantsearch-nextjs@npm:0.3.6"
   peerDependencies:
     next: "*"
     react-instantsearch: "*"
-  checksum: 10c0/4ced0cf7f89b1d52e3882250f68ec1cd39e1f3dc5711795225ba724ec5e3c0ab98f42bb270a9489ce246dfa360702d852a9d40b520e788e853adb8e21ae95af9
+  checksum: 10c0/57462bd25a16eea460a70667bfbec082c641158d3ee4e9eb087e0a97e56e73a3fcc830620a1920a15e184637a41fe334cddffe1721e1c95753eeb1b6948debb0
   languageName: node
   linkType: hard
 
-"react-instantsearch@npm:^7.12.0":
-  version: 7.12.0
-  resolution: "react-instantsearch@npm:7.12.0"
+"react-instantsearch@npm:^7.12.1":
+  version: 7.12.1
+  resolution: "react-instantsearch@npm:7.12.1"
   dependencies:
     "@babel/runtime": "npm:^7.1.2"
     instantsearch-ui-components: "npm:0.7.0"
-    instantsearch.js: "npm:4.73.0"
-    react-instantsearch-core: "npm:7.12.0"
+    instantsearch.js: "npm:4.73.1"
+    react-instantsearch-core: "npm:7.12.1"
   peerDependencies:
-    algoliasearch: ">= 3.1 < 5"
+    algoliasearch: ">= 3.1 < 6"
     react: ">= 16.8.0 < 19"
     react-dom: ">= 16.8.0 < 19"
-  checksum: 10c0/15327c3a1cca1afcd70b476aa6bb1e7196b69fe57b12eed74ba5359a6893f221b754dc38ea7569b2dd22b1c3758dfe0d4ae4ea098e12b28a161eed6c37c01a5e
+  checksum: 10c0/34364ed0207afad79074b95776d399b4caaf72c0331ed2447299a8f612cd4319e858fb891fb097a01ef7ae20b1b8d5fa36d4fe4640fc5aeeaeb27cbbce47cf37
   languageName: node
   linkType: hard
 
@@ -15653,10 +15653,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"search-insights@npm:^2.13.0":
-  version: 2.13.0
-  resolution: "search-insights@npm:2.13.0"
-  checksum: 10c0/9235cc25e45bd3602edf1337aa43a89152575eda82bbec4f6fa7c8f61f45c788948e1ed6cfb26e986811307b7e83a56892fb3fbc77a84cfea3d84cd4cf0ad2b3
+"search-insights@npm:^2.15.0":
+  version: 2.15.0
+  resolution: "search-insights@npm:2.15.0"
+  checksum: 10c0/fecef0382e49b86c027f5c2fa91692844b50d3296f07e3aba3e181e1d3d62c83e26b0f68cd0abfea3c8ae856cd824c8534b1887c7405d19d2184576d1e3e6445
   languageName: node
   linkType: hard
 
@@ -16577,12 +16577,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwind-merge@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "tailwind-merge@npm:2.3.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.24.1"
-  checksum: 10c0/5ea308e23c3ab1cf4c3f35f0a471753f4d3ed232d63dd7c09151a74428737321902203d90e9f0cb76ea5c3978e71b0adbc503dc455e56cda967a7674ae4b94b5
+"tailwind-merge@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "tailwind-merge@npm:2.4.0"
+  checksum: 10c0/77bd20647d08db78a0bdf7b57d4b904479aee7727f44570f8834d62a1aa56f42d7ae68ac959e3d610c9f188aa164eeefb6c43df4f0c8bb7cfc3418e1575bfecb
   languageName: node
   linkType: hard