Improve decoupled menu by using js data on the page instead of json api

SU-SWS · Apr 11, 2024 · 14e86c9 · 14e86c9
1 parent 388d46d
commit 14e86c9
Show file tree

Hide file tree

Showing 6 changed files with 817 additions and 558 deletions.
diff --git a/themes/stanford_basic/decoupled-menu/dist/islands/main-menu.island.umd.js b/themes/stanford_basic/decoupled-menu/dist/islands/main-menu.island.umd.js
diff --git a/themes/stanford_basic/decoupled-menu/package.json b/themes/stanford_basic/decoupled-menu/package.json
@@ -17,45 +17,45 @@
     "prettier-fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@preact/preset-vite": "^2.8.1",
-    "@vanilla-extract/css": "^1.14.1",
+    "@preact/preset-vite": "^2.8.2",
+    "@vanilla-extract/css": "^1.14.2",
     "@vanilla-extract/dynamic": "^2.1.0",
     "@vanilla-extract/recipes": "^0.5.2",
     "@vanilla-extract/sprinkles": "^1.6.1",
     "clsx": "^2.1.0",
     "jsona": "^1.12.1",
     "polished": "^4.3.1",
-    "preact": "^10.19.6",
+    "preact": "^10.20.2",
     "preact-island": "^1.1.2",
-    "preact-render-to-string": "^6.4.0",
+    "preact-render-to-string": "^6.4.2",
     "redaxios": "^0.5.1",
     "styled-components": "^6.1.8",
-    "usehooks-ts": "^2.16.0"
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@playwright/test": "^1.42.1",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@playwright/test": "^1.43.0",
     "@types/webpack": "^5.28.5",
     "@vanilla-extract/babel-plugin": "^1.2.0",
-    "@vanilla-extract/webpack-plugin": "^2.3.6",
+    "@vanilla-extract/webpack-plugin": "^2.3.7",
     "babel-loader": "^9.1.3",
     "brotli-size": "^4.0.0",
-    "css-loader": "^6.10.0",
+    "css-loader": "^6.11.0",
     "dotenv": "^16.4.5",
-    "glob": "^10.3.10",
+    "glob": "^10.3.12",
     "gzip-size": "^6.0.0",
     "html-webpack-plugin": "^5.6.0",
     "kleur": "^4.1.5",
     "prettier": "^3.2.5",
     "pretty-bytes": "^5.6.0",
     "style-loader": "^3.3.4",
     "ts-node": "~10.9.2",
-    "typescript": "^5.3.3",
-    "webpack": "^5.90.3",
+    "typescript": "^5.4.5",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.2"
+    "webpack-dev-server": "^5.0.4"
   },
   "packageManager": "[email protected]"
 }
diff --git a/themes/stanford_basic/decoupled-menu/src/main-menu.island.tsx b/themes/stanford_basic/decoupled-menu/src/main-menu.island.tsx
@@ -131,13 +131,15 @@ const SearchContainer = styled.div`
 
 export const MainMenu = ({}) => {
   useWebComponentEvents(islandName)
-  const [menuItems, setMenuItems] = useState<MenuContentItem[]>([]);
+  const [menuItems, setMenuItems] = useState<MenuContentItem[]>(window.drupalSettings?.stanford_basic?.decoupledMenuItems || []);
   const [menuOpen, setMenuOpen] = useState<boolean>(false);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const navRef = useRef<HTMLElement | null>(null);
   useOutsideClick(navRef, () => setMenuOpen(false));
 
   useEffect(() => {
+    if (menuItems.length) return;
+
     fetch(DRUPAL_DOMAIN + '/jsonapi/menu_items/main')
       .then(res => res.json())
       .then(data => setMenuItems(deserialize(data)))
@@ -154,13 +156,11 @@ export const MainMenu = ({}) => {
   useEventListener("keydown", handleEscape);
 
   const menuTree = buildMenuTree(menuItems);
-  if (!menuTree.items || menuTree.items?.length === 0) return <div/>;
+  if (!menuTree.items || menuTree.items?.length === 0) return;
 
   // Remove the default menu.
   const existingMenu = document.getElementsByClassName('su-multi-menu');
-  if (existingMenu.length > 0) {
-    existingMenu[0].remove();
-  }
+  if (existingMenu.length > 0) existingMenu[0].remove();
 
   return (
     <nav
@@ -196,7 +196,7 @@ export const MainMenu = ({}) => {
 
         </SearchContainer>
         <TopList>
-          {menuTree.items.map(item => <MenuItem key={item.id} {...item}/>)}
+          {menuTree.items.sort((a, b) => a.weight < b.weight ? -1 : 1).map(item => <MenuItem key={item.id} {...item}/>)}
         </TopList>
       </MenuWrapper>
     </nav>
@@ -419,7 +419,7 @@ const MenuItem = ({id, title, url, items, expanded, level = 0}: {
       {(items && expanded) &&
         <MenuList open={submenuOpen} level={level}>
 
-          {items.map(item =>
+          {items.sort((a, b) => a.weight < b.weight ? -1 : 1).map(item =>
             <MenuItem key={item.id} {...item} level={level + 1}/>
           )}
         </MenuList>

diff --git a/themes/stanford_basic/decoupled-menu/src/tools/build-menu-tree.tsx b/themes/stanford_basic/decoupled-menu/src/tools/build-menu-tree.tsx
@@ -4,6 +4,7 @@ export interface MenuContentItem {
   url: string
   parent: string
   items?: MenuContentItem[]
+  weight: number
 }
 
 export const buildMenuTree = (links: MenuContentItem[], parent = ""): { items?: MenuContentItem[] } => {