Skip to content

Commit

Permalink
Refactored main menu collapse behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
pookmish committed Mar 11, 2024
1 parent 41b4e84 commit 2320797
Show file tree
Hide file tree
Showing 7 changed files with 104 additions and 68 deletions.
3 changes: 2 additions & 1 deletion app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Link from "@components/elements/link";
import {getConfigPage} from "@lib/gql/gql-queries";
import {StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal.d";
import {GoogleAnalytics} from "@next/third-parties/google";
import DrupalWindowSync from "@components/elements/drupal-window-sync";

export const metadata = {
// Update the metadataBase to the production domain.
Expand All @@ -26,7 +27,7 @@ const RootLayout = async ({children, modal}: { children: React.ReactNode, modal:
const siteSettingsConfig = await getConfigPage<StanfordBasicSiteSetting>('StanfordBasicSiteSetting')
return (
<html lang="en" className={sourceSans3.className}>
{draftMode && <Editori11y/>}
{draftMode && <><Editori11y/><DrupalWindowSync/></>}

{/* Add Google Analytics and SiteImprove when not in draft mode. */}
{(!draftMode && siteSettingsConfig?.suGoogleAnalytics) &&
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"graphql-tag": "^2.12.6",
"html-entities": "^2.5.2",
"html-react-parser": "^5.1.8",
"next": "^14.1.3",
"next": "^14.2.0-canary.13",
"next-drupal": "^1.6.0",
"postcss": "^8.4.35",
"qs": "^6.12.0",
Expand Down
24 changes: 24 additions & 0 deletions src/components/elements/drupal-window-sync.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
"use client";

import {usePathname} from "next/navigation";
import {useEffect} from "react";

const DrupalWindowSync = () => {
const pathname = usePathname();

useEffect(() => {
if (!pathname) return;

if (
pathname &&
!pathname?.startsWith('/gallery/') &&
window &&
window.top !== window.self
) {
window.parent.postMessage({type: "NEXT_DRUPAL_ROUTE_SYNC", path: pathname}, process.env.NEXT_PUBLIC_DRUPAL_BASE_URL as string)
}
}, [pathname]);
return null;
}

export default DrupalWindowSync
5 changes: 2 additions & 3 deletions src/components/menu/main-menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import Link from "@components/elements/link";
import {useCallback, useEffect, useId, useLayoutEffect, useRef, useState} from "react";
import {Bars3Icon, ChevronDownIcon} from "@heroicons/react/20/solid";
import {XCircleIcon} from "@heroicons/react/24/outline";
import useNavigationEvent from "@lib/hooks/useNavigationEvent";
import SiteSearchForm from "@components/search/site-search-form";
import useActiveTrail from "@lib/hooks/useActiveTrail";
import useOutsideClick from "@lib/hooks/useOutsideClick";
Expand All @@ -20,7 +19,7 @@ const MainMenu = ({menuItems}: { menuItems: MenuItemType[] }) => {
const menuRef = useRef<HTMLDivElement>(null);

const {value: menuOpen, setFalse: closeMenu, toggle: toggleMenu} = useBoolean(false)
const browserUrl = useNavigationEvent()
const browserUrl = usePathname()
const activeTrail = useActiveTrail(menuItems, usePathname() || '');

useOutsideClick(menuRef, closeMenu);
Expand Down Expand Up @@ -72,7 +71,7 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
const [positionRight, setPositionRight] = useState<boolean>(true)
const buttonRef = useRef<HTMLButtonElement>(null)
const {value: submenuOpen, setFalse: closeSubmenu, toggle: toggleSubmenu} = useBoolean(false)
const browserUrl = useNavigationEvent()
const browserUrl = usePathname()

useOutsideClick(sublistRef, closeSubmenu);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const GalleryImage = ({image, galleryId}: {
return (
<figure>
<div className="relative aspect-[4/3] w-full">
<Link href={`/gallery/${galleryId}/${image.id}`} className="block relative w-full h-full" rel="nofollow" scroll={false}>
<Link href={`/gallery/${galleryId}/${image.id}`} className="block relative w-full h-full" rel="nofollow" scroll={false} prefetch={false}>
<Image
className="object-cover"
src={imageUrl}
Expand Down
23 changes: 9 additions & 14 deletions src/lib/hooks/useNavigationEvent.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,27 @@
'use client';

import {usePathname} from 'next/navigation';
import {useEffect, useState} from "react";
import {useEffect} from "react";

/**
* When the user navigates to another page, get the url.
*/
const useNavigationEvent = () => {
const [url, setUrl] = useState<string>();
const pathname = usePathname();

useEffect(() => {
if (!pathname) return;

if (pathname !== url && !(pathname?.startsWith('/gallery-image/'))) {
setUrl(pathname);

if (pathname && window && window.top !== window.self) {
// console.log('pathname', pathname);
window.parent.postMessage(
{type: "NEXT_DRUPAL_ROUTE_SYNC", path: pathname},
process.env.NEXT_PUBLIC_DRUPAL_BASE_URL as string
)
}
if (pathname && !pathname?.startsWith('/gallery/') && window && window.top !== window.self) {
// console.log('pathname', pathname);
window.parent.postMessage(
{type: "NEXT_DRUPAL_ROUTE_SYNC", path: pathname},
process.env.NEXT_PUBLIC_DRUPAL_BASE_URL as string
)
}
}, [url, pathname]);
}, [pathname]);

return url;
return pathname;
}

export default useNavigationEvent;
113 changes: 65 additions & 48 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3346,10 +3346,10 @@ __metadata:
languageName: node
linkType: hard

"@next/env@npm:14.1.3":
version: 14.1.3
resolution: "@next/env@npm:14.1.3"
checksum: 10c0/928dba385f1ed3346880845662f87fe386e42ee0c798ccbd7c13a31e2cb509153d42e6c8a4a73ad9c6d647ac9cb6a570316c8ddcaccc9ec201f7519ec383dc02
"@next/env@npm:14.2.0-canary.13":
version: 14.2.0-canary.13
resolution: "@next/env@npm:14.2.0-canary.13"
checksum: 10c0/5c965ea326a6a6fa42268713dc6241f793ed473f951d65716c9b80de52024b92119996aa3cd287d484d4024be5a4e16f9c008534f6884bd6103b0c8ec6376be5
languageName: node
linkType: hard

Expand All @@ -3369,9 +3369,9 @@ __metadata:
languageName: node
linkType: hard

"@next/swc-darwin-arm64@npm:14.1.3":
version: 14.1.3
resolution: "@next/swc-darwin-arm64@npm:14.1.3"
"@next/swc-darwin-arm64@npm:14.2.0-canary.13":
version: 14.2.0-canary.13
resolution: "@next/swc-darwin-arm64@npm:14.2.0-canary.13"
conditions: os=darwin & cpu=arm64
languageName: node
linkType: hard
Expand All @@ -3383,9 +3383,9 @@ __metadata:
languageName: node
linkType: hard

"@next/swc-darwin-x64@npm:14.1.3":
version: 14.1.3
resolution: "@next/swc-darwin-x64@npm:14.1.3"
"@next/swc-darwin-x64@npm:14.2.0-canary.13":
version: 14.2.0-canary.13
resolution: "@next/swc-darwin-x64@npm:14.2.0-canary.13"
conditions: os=darwin & cpu=x64
languageName: node
linkType: hard
Expand All @@ -3397,9 +3397,9 @@ __metadata:
languageName: node
linkType: hard

"@next/swc-linux-arm64-gnu@npm:14.1.3":
version: 14.1.3
resolution: "@next/swc-linux-arm64-gnu@npm:14.1.3"
"@next/swc-linux-arm64-gnu@npm:14.2.0-canary.13":
version: 14.2.0-canary.13
resolution: "@next/swc-linux-arm64-gnu@npm:14.2.0-canary.13"
conditions: os=linux & cpu=arm64 & libc=glibc
languageName: node
linkType: hard
Expand All @@ -3411,9 +3411,9 @@ __metadata:
languageName: node
linkType: hard

"@next/swc-linux-arm64-musl@npm:14.1.3":
version: 14.1.3
resolution: "@next/swc-linux-arm64-musl@npm:14.1.3"
"@next/swc-linux-arm64-musl@npm:14.2.0-canary.13":
version: 14.2.0-canary.13
resolution: "@next/swc-linux-arm64-musl@npm:14.2.0-canary.13"
conditions: os=linux & cpu=arm64 & libc=musl
languageName: node
linkType: hard
Expand All @@ -3425,9 +3425,9 @@ __metadata:
languageName: node
linkType: hard

"@next/swc-linux-x64-gnu@npm:14.1.3":
version: 14.1.3
resolution: "@next/swc-linux-x64-gnu@npm:14.1.3"
"@next/swc-linux-x64-gnu@npm:14.2.0-canary.13":
version: 14.2.0-canary.13
resolution: "@next/swc-linux-x64-gnu@npm:14.2.0-canary.13"
conditions: os=linux & cpu=x64 & libc=glibc
languageName: node
linkType: hard
Expand All @@ -3439,9 +3439,9 @@ __metadata:
languageName: node
linkType: hard

"@next/swc-linux-x64-musl@npm:14.1.3":
version: 14.1.3
resolution: "@next/swc-linux-x64-musl@npm:14.1.3"
"@next/swc-linux-x64-musl@npm:14.2.0-canary.13":
version: 14.2.0-canary.13
resolution: "@next/swc-linux-x64-musl@npm:14.2.0-canary.13"
conditions: os=linux & cpu=x64 & libc=musl
languageName: node
linkType: hard
Expand All @@ -3453,9 +3453,9 @@ __metadata:
languageName: node
linkType: hard

"@next/swc-win32-arm64-msvc@npm:14.1.3":
version: 14.1.3
resolution: "@next/swc-win32-arm64-msvc@npm:14.1.3"
"@next/swc-win32-arm64-msvc@npm:14.2.0-canary.13":
version: 14.2.0-canary.13
resolution: "@next/swc-win32-arm64-msvc@npm:14.2.0-canary.13"
conditions: os=win32 & cpu=arm64
languageName: node
linkType: hard
Expand All @@ -3467,9 +3467,9 @@ __metadata:
languageName: node
linkType: hard

"@next/swc-win32-ia32-msvc@npm:14.1.3":
version: 14.1.3
resolution: "@next/swc-win32-ia32-msvc@npm:14.1.3"
"@next/swc-win32-ia32-msvc@npm:14.2.0-canary.13":
version: 14.2.0-canary.13
resolution: "@next/swc-win32-ia32-msvc@npm:14.2.0-canary.13"
conditions: os=win32 & cpu=ia32
languageName: node
linkType: hard
Expand All @@ -3481,9 +3481,9 @@ __metadata:
languageName: node
linkType: hard

"@next/swc-win32-x64-msvc@npm:14.1.3":
version: 14.1.3
resolution: "@next/swc-win32-x64-msvc@npm:14.1.3"
"@next/swc-win32-x64-msvc@npm:14.2.0-canary.13":
version: 14.2.0-canary.13
resolution: "@next/swc-win32-x64-msvc@npm:14.2.0-canary.13"
conditions: os=win32 & cpu=x64
languageName: node
linkType: hard
Expand Down Expand Up @@ -5462,6 +5462,13 @@ __metadata:
languageName: node
linkType: hard

"@swc/counter@npm:^0.1.3":
version: 0.1.3
resolution: "@swc/counter@npm:0.1.3"
checksum: 10c0/8424f60f6bf8694cfd2a9bca45845bce29f26105cda8cf19cdb9fd3e78dc6338699e4db77a89ae449260bafa1cc6bec307e81e7fb96dbf7dcfce0eea55151356
languageName: node
linkType: hard

"@swc/helpers@npm:0.5.2":
version: 0.5.2
resolution: "@swc/helpers@npm:0.5.2"
Expand All @@ -5471,6 +5478,16 @@ __metadata:
languageName: node
linkType: hard

"@swc/helpers@npm:0.5.5":
version: 0.5.5
resolution: "@swc/helpers@npm:0.5.5"
dependencies:
"@swc/counter": "npm:^0.1.3"
tslib: "npm:^2.4.0"
checksum: 10c0/21a9b9cfe7e00865f9c9f3eb4c1cc5b397143464f7abee76a2c5366e591e06b0155b5aac93fe8269ef8d548df253f6fd931e9ddfc0fd12efd405f90f45506e7d
languageName: node
linkType: hard

"@swc/types@npm:^0.1.5":
version: 0.1.5
resolution: "@swc/types@npm:0.1.5"
Expand Down Expand Up @@ -8588,7 +8605,7 @@ __metadata:
graphql-tag: "npm:^2.12.6"
html-entities: "npm:^2.5.2"
html-react-parser: "npm:^5.1.8"
next: "npm:^14.1.3"
next: "npm:^14.2.0-canary.13"
next-drupal: "npm:^1.6.0"
postcss: "npm:^8.4.35"
qs: "npm:^6.12.0"
Expand Down Expand Up @@ -13121,21 +13138,21 @@ __metadata:
languageName: node
linkType: hard

"next@npm:^14.1.3":
version: 14.1.3
resolution: "next@npm:14.1.3"
dependencies:
"@next/env": "npm:14.1.3"
"@next/swc-darwin-arm64": "npm:14.1.3"
"@next/swc-darwin-x64": "npm:14.1.3"
"@next/swc-linux-arm64-gnu": "npm:14.1.3"
"@next/swc-linux-arm64-musl": "npm:14.1.3"
"@next/swc-linux-x64-gnu": "npm:14.1.3"
"@next/swc-linux-x64-musl": "npm:14.1.3"
"@next/swc-win32-arm64-msvc": "npm:14.1.3"
"@next/swc-win32-ia32-msvc": "npm:14.1.3"
"@next/swc-win32-x64-msvc": "npm:14.1.3"
"@swc/helpers": "npm:0.5.2"
"next@npm:^14.2.0-canary.13":
version: 14.2.0-canary.13
resolution: "next@npm:14.2.0-canary.13"
dependencies:
"@next/env": "npm:14.2.0-canary.13"
"@next/swc-darwin-arm64": "npm:14.2.0-canary.13"
"@next/swc-darwin-x64": "npm:14.2.0-canary.13"
"@next/swc-linux-arm64-gnu": "npm:14.2.0-canary.13"
"@next/swc-linux-arm64-musl": "npm:14.2.0-canary.13"
"@next/swc-linux-x64-gnu": "npm:14.2.0-canary.13"
"@next/swc-linux-x64-musl": "npm:14.2.0-canary.13"
"@next/swc-win32-arm64-msvc": "npm:14.2.0-canary.13"
"@next/swc-win32-ia32-msvc": "npm:14.2.0-canary.13"
"@next/swc-win32-x64-msvc": "npm:14.2.0-canary.13"
"@swc/helpers": "npm:0.5.5"
busboy: "npm:1.6.0"
caniuse-lite: "npm:^1.0.30001579"
graceful-fs: "npm:^4.2.11"
Expand Down Expand Up @@ -13172,7 +13189,7 @@ __metadata:
optional: true
bin:
next: dist/bin/next
checksum: 10c0/b723955669b40b49761220b582e46ee0fb472b01b67fb9b6ceabc9a191a252bba253a65d72b284fcac1001c85d39bd6816db71e78e97b2221137ed15776c35bd
checksum: 10c0/5bd9557bc830337e69014340f3e1efba5b13b6022d217d7c59b5b82b78e890454f90b544722bafb110fdb10d4db5d99a09ee22015e1ef5e6104740eca98c4dc6
languageName: node
linkType: hard

Expand Down

0 comments on commit 2320797

Please sign in to comment.