Maintaining the navigation menu

We try to keep the Data Portal's navbar in sync with the NMDC website's navbar; i.e., to make it so the same menu items exist in each navbar.

Here's a screenshot of the Data Portal's navbar:

This navbar is rendered from data in: https://github.com/microbiomedata/nmdc-server/blob/main/web/src/menus.ts

Here's a screenshot of the website's navbar:

This navbar is rendered from data in the WordPress database (and is managed via the WordPress admin dashboard).

Tips

Here's a JavaScript snippet you can copy/paste into your web browser's JavaScript console (when viewing the website) and press Enter, in order to generate a JSON string representing the website's navbar content. The JSON string will be in a format similar to that found in web/src/menus.ts (i.e. they can be diff-ed).

// Usage: Copy/paste into a web browser's JavaScript console and press `ENTER`.
(function showMenuAsJSON() {
  const arr = [];

  // For each drop-down menu:
  document.querySelectorAll(".header-nav-item").forEach((col, colIdx) => {
    // Add a top-level element (having no `items` yet) to the result array, for the top-level link.
    const a = col.querySelectorAll("a:first-child")[0];
    arr.push({ label: a.title, href: a.href, items: [] });

    // For each link in this drop-down menu, add an item to this column's `items` array.
    col.querySelectorAll(".header-dropdown > a").forEach((a) => {
      arr[colIdx].items.push({ label: a.title, href: a.href });
    });
  });

  console.log(JSON.stringify(arr, null, 2));
})();

Here's how you can download the web/src/menus.ts file:

# To display its contents:
curl https://raw.githubusercontent.com/microbiomedata/nmdc-server/main/web/src/menus.ts

# Or, to download it as a file:
curl -o /tmp/menus.ts https://raw.githubusercontent.com/microbiomedata/nmdc-server/main/web/src/menus.ts

Here's an online tool you can use to diff two files, without running any commands locally.