From 31f082bdaca3f99ff2d5dd3d217d64b582428818 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Fri, 2 Aug 2024 17:08:18 -0700
Subject: [PATCH 1/6] adding JumpMenu component

---
 apps/vue-storybook/.storybook/preview.ts      |  3 +-
 .../NavDropdownToggle/NavDropdownToggle.vue   | 11 ++-
 .../NavJumpMenu/NavJumpMenu.stories.js        | 53 +++++++++++++
 .../components/NavJumpMenu/NavJumpMenu.vue    | 71 +++++++++++++++++
 .../NavJumpMenu/NavJumpMenuContent.vue        | 78 +++++++++++++++++++
 .../NavSecondary/NavSecondary.stories.js      | 11 ++-
 .../components/NavSecondary/NavSecondary.vue  | 55 ++++++++++---
 .../NavSecondary/NavSecondaryDropdown.vue     | 61 ++++++++++++---
 .../NavSecondaryDropdownContent.vue           |  6 +-
 .../NavSecondary/NavSecondaryLink.vue         | 45 ++++++++---
 packages/vue/src/interfaces.ts                |  6 +-
 11 files changed, 362 insertions(+), 38 deletions(-)
 create mode 100644 packages/vue/src/components/NavJumpMenu/NavJumpMenu.stories.js
 create mode 100644 packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
 create mode 100644 packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue

diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts
index ee3a5ef3..4afb70bc 100644
--- a/apps/vue-storybook/.storybook/preview.ts
+++ b/apps/vue-storybook/.storybook/preview.ts
@@ -122,7 +122,8 @@ const preview: Preview = {
             ['Overview', 'WWW'],
             'Footers',
             ['Overview', 'WWW'],
-            'Secondary Navigation'
+            'Secondary Navigation',
+            'Jump Menu'
           ],
           'Global Layout',
           [
diff --git a/packages/vue/src/components/NavDropdownToggle/NavDropdownToggle.vue b/packages/vue/src/components/NavDropdownToggle/NavDropdownToggle.vue
index 479feadd..19ac6492 100644
--- a/packages/vue/src/components/NavDropdownToggle/NavDropdownToggle.vue
+++ b/packages/vue/src/components/NavDropdownToggle/NavDropdownToggle.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="NavDropdownToggle group cursor-pointer"
-    :class="{ '-active': isActivePath }"
+    :class="{ '-active': isActivePath, '-invert': invert }"
     :aria-expanded="ariaExpanded"
     @click="clickEvent()"
     @keydown.esc="escEvent()"
@@ -26,13 +26,18 @@ export default defineComponent({
   props: {
     path: {
       type: String,
-      required: false
+      default: undefined
     },
     ariaExpanded: {
       type: Boolean,
-      required: false
+      default: false
+    },
+    invert: {
+      type: Boolean,
+      default: false
     }
   },
+  emits: ['closeDropdown', 'toggleClicked'],
   computed: {
     isActivePath() {
       if (this.path) {
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.stories.js b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.stories.js
new file mode 100644
index 00000000..c3b947bc
--- /dev/null
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.stories.js
@@ -0,0 +1,53 @@
+import NavJumpMenu from './NavJumpMenu.vue'
+
+export default {
+  title: 'Navigation/Jump Menu',
+  component: NavJumpMenu,
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/
+}
+
+const JumpLinksData = [
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  },
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  },
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  },
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  },
+  {
+    title: 'Heading title',
+    path: '#heading_title'
+  }
+]
+export const BaseStory = {
+  name: 'Jump Menu',
+  args: {
+    title: {
+      title: 'Page Title',
+      path: '#'
+    },
+    jumpLinks: JumpLinksData,
+    invert: true
+  }
+}
+
+export const Light = {
+  args: {
+    title: {
+      title: 'Page Title',
+      path: '#'
+    },
+    jumpLinks: JumpLinksData,
+    invert: false
+  }
+}
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
new file mode 100644
index 00000000..327b6498
--- /dev/null
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
@@ -0,0 +1,71 @@
+<template>
+  <NavSecondary
+    v-if="enabled"
+    :invert="invert"
+    :jump-links="theBreadcrumbs"
+    :include-overview="false"
+  />
+</template>
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import NavSecondary from './../NavSecondary/NavSecondary.vue'
+import type { BreadcrumbPathObject } from './../../interfaces'
+
+export default defineComponent({
+  /** The complexity of this component is due to the need for it to be populated from multiple data sources
+   ** SecondaryNav will first check to see if there is a navigation override from the data fetched for this specific page (data.breadcrumb and store.header.secondaryNav)
+   ** If there is no breadcrumb override, then it will fallback to using the breadcrumbs derived form the active global nav item (store.header.globalChildren)
+   ** store.header.secondaryNav reverts to null on route changes, so the breadcrumb override is re-evaluted on every page
+   */
+  name: 'NavJumpMenu',
+  components: {
+    NavSecondary
+  },
+  props: {
+    // jump links create a jump link menu
+    title: {
+      type: Object as PropType<Partial<BreadcrumbPathObject>>,
+      required: false,
+      default: undefined
+    },
+    jumpLinks: {
+      type: Object as PropType<BreadcrumbPathObject[]>,
+      required: false,
+      default: undefined
+    },
+    enabled: {
+      type: Boolean,
+      default: true
+    },
+    invert: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    // formats content in a way that NavSecondary will recognize it
+    theBreadcrumbs(): BreadcrumbPathObject[] | undefined {
+      let breadcrumb = undefined
+      const rootItem = this.title
+        ? {
+            ...this.title,
+            children: []
+          }
+        : {
+            title: 'nothing',
+            path: '#',
+            children: []
+          }
+      const jumpMenu: BreadcrumbPathObject = {
+        title: 'Jump to',
+        path: '#',
+        children: this.jumpLinks as BreadcrumbPathObject[]
+      }
+      if (this.jumpLinks) {
+        breadcrumb = [rootItem, jumpMenu]
+      }
+      return breadcrumb as BreadcrumbPathObject[] | undefined
+    }
+  }
+})
+</script>
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue
new file mode 100644
index 00000000..adb870ae
--- /dev/null
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue
@@ -0,0 +1,78 @@
+<template>
+  <ul class="NavJumpMenuContent bg-white">
+    <li
+      v-for="(child, index) in item.children"
+      :key="index"
+      class="text-base border-b border-gray-light"
+    >
+      <BaseLink
+        :to="child.path"
+        variant="none"
+        :link-class="linkClass(child, index === item.children.length - 1)"
+        exact
+      >
+        <span>
+          {{ child.title }}
+        </span>
+      </BaseLink>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+
+interface NavItemObject {
+  path: String
+  title: String
+  children: [Object]
+}
+export default defineComponent({
+  name: 'NavJumpMenuContent',
+  components: {
+    BaseLink
+  },
+  props: {
+    // the tertiary nav item object that includes path, title, and children
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    linkClass(item?: NavItemObject, isLast?: Boolean) {
+      // default
+      let computedClass = 'py-2 lg:py-4'
+      if (!item) {
+        // if first (aka Overview)
+        computedClass = 'py-2 lg:pt-4 lg:pb-4'
+      } else if (item.children && item.children.length > 0) {
+        // if has children
+        computedClass = 'pt-2 pb-1 lg:pt-4 lg:pb-2'
+      } else if (isLast) {
+        // if the very last
+        computedClass = 'py-2 lg:pt-4 lg:pb-6'
+      }
+      return computedClass
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavJumpMenuContent {
+  a {
+    @apply block pl-18 pr-6 lg:pl-6 text-gray-dark;
+
+    > span {
+      @apply border-b border-transparent pb-2px;
+    }
+
+    &:hover {
+      > span {
+        @apply border-gray-dark text-gray-dark;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/vue/src/components/NavSecondary/NavSecondary.stories.js b/packages/vue/src/components/NavSecondary/NavSecondary.stories.js
index 678449a9..206adf51 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondary.stories.js
+++ b/packages/vue/src/components/NavSecondary/NavSecondary.stories.js
@@ -1,7 +1,7 @@
 import NavSecondary from './NavSecondary.vue'
 
 export default {
-  title: 'Navigation/Secondary Navigation/NavSecondary',
+  title: 'Navigation/Secondary Navigation',
   component: NavSecondary,
   excludeStories: /.*Data$/,
   parameters: {
@@ -19,6 +19,11 @@ export const NavSecondaryData = {
 }
 
 export const BaseStory = {
-  name: 'NavSecondary',
-  args: { breadcrumb: NavSecondaryData.breadcrumb }
+  name: 'Secondary Navigation',
+  args: {
+    breadcrumb: NavSecondaryData.breadcrumb
+  }
+}
+export const Inverted = {
+  args: { breadcrumb: NavSecondaryData.breadcrumb, invert: true }
 }
diff --git a/packages/vue/src/components/NavSecondary/NavSecondary.vue b/packages/vue/src/components/NavSecondary/NavSecondary.vue
index 706e27cc..608690b9 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondary.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondary.vue
@@ -6,9 +6,12 @@
     class="NavSecondary"
     :class="{ 'has-intro': hasIntro }"
   >
-    <div class="max-w-screen-3xl mx-auto">
+    <div
+      class="max-w-screen-3xl mx-auto"
+      :class="{ 'bg-gradient-to-r from-black to-primary bg-transparent to-90% text-white': invert }"
+    >
       <div
-        class="nav-secondary-container lg:container lg:px-0 lg:whitespace-normal border-gray-mid text-gray-mid-dark lg:overflow-visible relative px-4 pb-0 mx-auto overflow-x-auto text-sm font-medium whitespace-nowrap border-t border-opacity-50 edu:border-0"
+        :class="`nav-secondary-container lg:container lg:px-0 lg:whitespace-normal lg:overflow-visible relative px-4 pb-0 mx-auto overflow-x-auto text-sm font-medium whitespace-nowrap ${invert ? 'border-0' : 'border-t border-gray-mid text-gray-mid-dark  border-opacity-50'}`"
       >
         <div class="lg:ml-0 2xl:-mr-3 lg:justify-end flex -ml-3">
           <template v-for="(item, index) in theBreadcrumb">
@@ -18,13 +21,22 @@
                 :item="item"
                 :index="index"
                 :is-last="theBreadcrumb && index === theBreadcrumb.length - 1"
-              />
+                :invert="invert"
+              >
+                <template v-if="isJumpMenu">
+                  <NavJumpMenuContent
+                    :key="index"
+                    :item="item"
+                  />
+                </template>
+              </NavSecondaryDropdown>
             </template>
             <template v-else>
               <NavSecondaryLink
                 :key="index"
                 :item="item"
                 :index="index"
+                :invert="invert"
               />
             </template>
           </template>
@@ -35,11 +47,12 @@
   </nav>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from './../../store/header'
 import NavSecondaryDropdown from './NavSecondaryDropdown.vue'
 import NavSecondaryLink from './NavSecondaryLink.vue'
+import NavJumpMenuContent from './../NavJumpMenu/NavJumpMenuContent.vue'
 import { mixinHighlightPrimary, mixinUpdateSecondary } from './../../utils/mixins'
 import type { BreadcrumbPathObject } from './../../interfaces'
 
@@ -49,19 +62,34 @@ export default defineComponent({
    ** If there is no breadcrumb override, then it will fallback to using the breadcrumbs derived form the active global nav item (store.header.globalChildren)
    ** store.header.secondaryNav reverts to null on route changes, so the breadcrumb override is re-evaluted on every page
    */
+  name: 'NavSecondary',
   components: {
     NavSecondaryDropdown,
+    NavJumpMenuContent,
     NavSecondaryLink
   },
   props: {
+    // breadcrumbs create a secondary navigation
     breadcrumb: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
+    },
+    // jump links create a jump link menu
+    jumpLinks: {
+      type: Object as PropType<BreadcrumbPathObject[]>,
+      required: false,
+      default: undefined
     },
     hasIntro: {
       type: Boolean,
       required: false,
       default: false
+    },
+    invert: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -71,8 +99,13 @@ export default defineComponent({
   },
   computed: {
     ...mapStores(useHeaderStore),
-    theBreadcrumb(): [BreadcrumbPathObject] | undefined {
-      if (this.breadcrumb) {
+    isJumpMenu(): boolean {
+      return this.jumpLinks ? true : false
+    },
+    theBreadcrumb(): BreadcrumbPathObject[] | undefined {
+      if (this.isJumpMenu) {
+        return this.jumpLinks
+      } else if (this.breadcrumb) {
         // we also want to update the store to override secondary nav
         mixinUpdateSecondary(JSON.parse(this.breadcrumb))
         return JSON.parse(this.breadcrumb)
@@ -82,14 +115,18 @@ export default defineComponent({
       return undefined
     },
     enabled(): Boolean {
-      if ((this.theBreadcrumb && this.theBreadcrumb.length > 1) || this.$slots.default) {
+      if (
+        (this.theBreadcrumb && this.theBreadcrumb.length > 1) ||
+        this.jumpLinks ||
+        this.$slots.default
+      ) {
         return true
       }
       return false
     }
   },
   mounted() {
-    if (this.enabled) {
+    if (this.enabled && !this.isJumpMenu) {
       // if there is a secondary nav displayed, then don't highlight the primary active item
       mixinHighlightPrimary(false)
     }
diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue b/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
index 12c26a71..f5a7bf24 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
@@ -10,21 +10,14 @@
       :aria-expanded="dropdownVisible ? true : false"
       :path="item.path"
       class="font-medium border-t-2 border-transparent block px-3 py-2"
-      :class="{
-        'mr-auto text-primary font-semibold secondary-root': index === 0,
-        'text-gray-dark': index !== 0,
-        '-open': dropdownVisible
-      }"
+      :class="dropdownToggleClasses(index)"
+      :invert="invert"
       @toggle-clicked="toggleDropdown()"
       @close-dropdown="closeDropdown()"
     >
       <span
         class="flex content-center pt-2 pb-1 mb-1 transition-colors duration-100 ease-in border-b-2 border-transparent"
-        :class="
-          index === 0
-            ? 'can-hover:group-hover:border-primary'
-            : 'can-hover:group-hover:border-gray-mid-dark can-hover:group-hover:text-gray-mid-dark '
-        "
+        :class="dropdownButtonClasses(index)"
       >
         <span>{{ item.title }}</span>
         <IconCaret class="transform rotate-90 text-sm ml-2 pl-2 -mt-px" />
@@ -62,7 +55,8 @@ export default defineComponent({
     // the index from the parent v-for loop
     index: {
       type: Number,
-      required: false
+      required: false,
+      default: 0
     },
     isLast: {
       type: Boolean,
@@ -73,8 +67,15 @@ export default defineComponent({
     item: {
       type: Object,
       required: true
+    },
+
+    invert: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
+  emits: ['closeDropdown', 'openDropdown'],
   data() {
     return {
       dropdownVisible: false
@@ -120,6 +121,28 @@ export default defineComponent({
         return true
       }
       return false
+    },
+    dropdownToggleClasses(index: number) {
+      return this.invert
+        ? {
+            'mr-auto text-white font-semibold secondary-root': index === 0,
+            'text-white': index !== 0,
+            '-open': this.dropdownVisible
+          }
+        : {
+            'mr-auto text-primary font-semibold secondary-root': index === 0,
+            'text-gray-dark': index !== 0,
+            '-open': this.dropdownVisible
+          }
+    },
+    dropdownButtonClasses(index: number) {
+      const titleButton = this.invert
+        ? 'can-hover:group-hover:border-white'
+        : 'can-hover:group-hover:border-primary'
+      const regularButton = this.invert
+        ? 'can-hover:group-hover:border-white can-hover:group-hover:text-white'
+        : 'can-hover:group-hover:border-gray-mid-dark can-hover:group-hover:text-gray-mid-dark'
+      return index === 0 ? titleButton : regularButton
     }
   }
 })
@@ -131,6 +154,11 @@ export default defineComponent({
       > span {
         @apply border-black text-gray-dark #{!important};
       }
+      &.-invert {
+        > span {
+          @apply border-white text-white #{!important};
+        }
+      }
     }
 
     &.-active {
@@ -138,12 +166,23 @@ export default defineComponent({
         @apply font-bold text-gray-dark;
         @apply border-primary #{!important};
       }
+      &.-invert {
+        > span {
+          @apply text-white;
+          @apply border-white #{!important};
+        }
+      }
     }
     &:hover {
       &.-active {
         > span {
           @apply text-gray-mid-dark;
         }
+        &.-invert {
+          > span {
+            @apply text-white;
+          }
+        }
       }
     }
   }
diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryDropdownContent.vue b/packages/vue/src/components/NavSecondary/NavSecondaryDropdownContent.vue
index 58ce12fc..d11acc03 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondaryDropdownContent.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondaryDropdownContent.vue
@@ -1,6 +1,6 @@
 <template>
   <ul class="NavSecondaryDropdownContent">
-    <li>
+    <li v-if="includeOverview">
       <BaseLink
         :to="item.path"
         variant="none"
@@ -80,6 +80,10 @@ export default defineComponent({
     item: {
       type: Object,
       required: true
+    },
+    includeOverview: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {
diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue b/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue
index 0d73c921..7ce97ca7 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue
@@ -5,15 +5,11 @@
     link-class="block px-3 py-2"
     variant="none"
     class="NavSecondaryLink border-t-2 border-transparent"
-    :class="index === 0 ? 'mr-auto text-primary font-semibold secondary-root' : 'text-gray-dark'"
+    :class="baseLinkClasses(index)"
   >
     <span
       class="inline-block pt-2 pb-1 mb-1 transition-colors duration-100 ease-in border-b-2 border-transparent"
-      :class="
-        index === 0
-          ? 'can-hover:group-hover:border-primary'
-          : 'can-hover:group-hover:border-gray-mid-dark can-hover:group-hover:text-gray-mid-dark '
-      "
+      :class="spanClasses(index)"
     >
       {{ item.title }}
     </span>
@@ -21,7 +17,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import type { BasicLinkObject } from './../../interfaces'
 import BaseLink from './../BaseLink/BaseLink.vue'
 export default defineComponent({
   name: 'NavSecondaryLink',
@@ -32,12 +29,17 @@ export default defineComponent({
     // the index from the v-for loop
     index: {
       type: Number,
-      required: false
+      required: false,
+      default: undefined
     },
     // the nav item object that includes path and title
     item: {
-      type: Object,
+      type: Object as PropType<BasicLinkObject>,
       required: true
+    },
+    invert: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
@@ -46,6 +48,23 @@ export default defineComponent({
         return true
       }
       return false
+    },
+    baseLinkClasses(index: number | undefined) {
+      let rootClasses = 'mr-auto font-semibold secondary-root'
+      rootClasses = this.invert
+        ? `${rootClasses} text-white -invert`
+        : `${rootClasses} text-primary`
+      const regularClasses = this.invert ? 'text-white -invert' : 'text-gray-dark'
+      return index === 0 ? rootClasses : regularClasses
+    },
+    spanClasses(index: number | undefined) {
+      const rootClasses = this.invert
+        ? 'can-hover:group-hover:border-white'
+        : 'can-hover:group-hover:border-primary'
+      const regularClasses = this.invert
+        ? 'can-hover:group-hover:border-white can-hover:group-hover:text-white'
+        : 'can-hover:group-hover:border-gray-mid-dark can-hover:group-hover:text-gray-mid-dark'
+      return index === 0 ? rootClasses : regularClasses
     }
   }
 })
@@ -58,5 +77,13 @@ export default defineComponent({
       @apply border-primary #{!important};
     }
   }
+  &.-invert {
+    .nuxt-link-exact-active {
+      span {
+        @apply font-bold text-white;
+        @apply border-white #{!important};
+      }
+    }
+  }
 }
 </style>
diff --git a/packages/vue/src/interfaces.ts b/packages/vue/src/interfaces.ts
index c4542002..51eb8471 100644
--- a/packages/vue/src/interfaces.ts
+++ b/packages/vue/src/interfaces.ts
@@ -1,7 +1,11 @@
 export interface BreadcrumbPathObject {
   path: string
   title: string
-  children: any[]
+  children: BreadcrumbPathObject[]
+}
+export interface BasicLinkObject {
+  title: string
+  path: string
 }
 
 export interface BlockData {

From 01ca085ff97b3b3e2a583498125f856b7d59bc12 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 6 Aug 2024 11:44:23 -0700
Subject: [PATCH 2/6] fixing links in jump menu

---
 apps/vue-storybook/.storybook/preview.ts      |  2 +-
 .../components/BlockHeading/BlockHeading.vue  | 28 +++++++++++
 .../BlockStreamfield/BlockStreamfield.vue     |  6 ++-
 .../components/NavJumpMenu/NavJumpMenu.vue    | 48 +++++++++++++++++--
 .../NavJumpMenu/NavJumpMenuContent.vue        |  3 +-
 .../components/NavSecondary/NavSecondary.vue  |  2 +-
 packages/vue/src/interfaces.ts                |  2 +
 .../PageEduNewsDetail.stories.js              |  4 +-
 .../PageEduNewsDetail/PageEduNewsDetail.vue   |  3 +-
 packages/vue/src/utils/getHeadingId.ts        |  5 ++
 10 files changed, 92 insertions(+), 11 deletions(-)
 create mode 100644 packages/vue/src/utils/getHeadingId.ts

diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts
index 4afb70bc..ebff4e08 100644
--- a/apps/vue-storybook/.storybook/preview.ts
+++ b/apps/vue-storybook/.storybook/preview.ts
@@ -150,7 +150,7 @@ const preview: Preview = {
             'Cards',
             ['Overview', 'BlockLinkCard', 'BlockLinkTile', 'BlockCircleImageCard'],
             'Blocks',
-            ['Overview', 'Heroes', ['Overview', 'Small', 'Medium', 'Large']],
+            ['BlockStreamfield'],
             'Heroes',
             ['Overview', 'Small', 'Medium', 'Large', 'Media Only', 'HeroListingIndex'],
             'Forms',
diff --git a/packages/vue/src/components/BlockHeading/BlockHeading.vue b/packages/vue/src/components/BlockHeading/BlockHeading.vue
index fe3dfb45..c583a639 100644
--- a/packages/vue/src/components/BlockHeading/BlockHeading.vue
+++ b/packages/vue/src/components/BlockHeading/BlockHeading.vue
@@ -1,7 +1,10 @@
 <template>
   <BaseHeading
     v-if="data"
+    :id="getId"
     :level="data.level"
+    class="BlockHeading"
+    :class="{ 'has-anchor': generateId }"
   >
     {{ data.heading }}
   </BaseHeading>
@@ -9,6 +12,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { getHeadingId } from '../../utils/getHeadingId'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
 export default defineComponent({
@@ -20,7 +24,31 @@ export default defineComponent({
     data: {
       type: Object,
       required: false
+    },
+    index: {
+      type: Number,
+      required: false,
+      default: undefined
+    },
+    generateId: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    getId() {
+      return this.generateId ? getHeadingId(this.data?.heading, this.index) : undefined
     }
   }
 })
 </script>
+<style lang="scss">
+.BlockHeading {
+  &:target {
+    @apply scroll-mt-14;
+    @screen lg {
+      @apply scroll-mt-20;
+    }
+  }
+}
+</style>
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
index 4fda137a..4720733f 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
+++ b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -11,7 +11,11 @@
         indent="col-3"
         class="mb-5"
       >
-        <BlockHeading :data="block" />
+        <BlockHeading
+          :data="block"
+          :index="index"
+          generate-id
+        />
       </LayoutHelper>
 
       <!-- custom margin bottom that matches BlockText styles if followed by InlineImageBlock -->
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
index 327b6498..18310e6b 100644
--- a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
@@ -9,7 +9,8 @@
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue'
 import NavSecondary from './../NavSecondary/NavSecondary.vue'
-import type { BreadcrumbPathObject } from './../../interfaces'
+import type { BlockData, BreadcrumbPathObject } from './../../interfaces'
+import { getHeadingId } from '../../utils/getHeadingId'
 
 export default defineComponent({
   /** The complexity of this component is due to the need for it to be populated from multiple data sources
@@ -28,11 +29,23 @@ export default defineComponent({
       required: false,
       default: undefined
     },
+    // manually define jumpLinks
     jumpLinks: {
       type: Object as PropType<BreadcrumbPathObject[]>,
       required: false,
       default: undefined
     },
+    // or provide a streamfield
+    blocks: {
+      type: Object as PropType<BlockData[]>,
+      required: false,
+      default: undefined
+    },
+    headingLevel: {
+      type: String,
+      required: false,
+      default: 'h2'
+    },
     enabled: {
       type: Boolean,
       default: true
@@ -40,6 +53,12 @@ export default defineComponent({
     invert: {
       type: Boolean,
       default: true
+    },
+    // if the JumpMenu should initially be visible or hidden.
+    // if hidden, it will appear once the user has scrolled past the first Jump menu item
+    hidden: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -59,13 +78,36 @@ export default defineComponent({
       const jumpMenu: BreadcrumbPathObject = {
         title: 'Jump to',
         path: '#',
-        children: this.jumpLinks as BreadcrumbPathObject[]
+        children: this.theJumpLinks as BreadcrumbPathObject[]
       }
-      if (this.jumpLinks) {
+      if (this.theJumpLinks) {
         breadcrumb = [rootItem, jumpMenu]
       }
       return breadcrumb as BreadcrumbPathObject[] | undefined
+    },
+    theJumpLinks(): BreadcrumbPathObject[] {
+      if (this.jumpLinks) {
+        return this.jumpLinks
+      } else if (this.blocks) {
+        const filteredBlocks = this.blocks.filter((b, index) => {
+          // @ts-expect-error adding a parameter to BlockData
+          b.index = index
+          return b.blockType === 'HeadingBlock' && b.level === this.headingLevel
+        })
+        // map to the correct data shape
+        const links: BreadcrumbPathObject[] = filteredBlocks.map((l) => {
+          return {
+            // @ts-expect-error using parameter that was added to BlockData
+            path: '#' + getHeadingId(l.heading, l.index),
+            title: l.heading
+          } as BreadcrumbPathObject
+        })
+        return links
+      }
+      return []
     }
   }
 })
+// path: string
+// title: string
 </script>
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue
index adb870ae..859bb2b5 100644
--- a/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue
@@ -6,10 +6,9 @@
       class="text-base border-b border-gray-light"
     >
       <BaseLink
-        :to="child.path"
+        :href="child.path"
         variant="none"
         :link-class="linkClass(child, index === item.children.length - 1)"
-        exact
       >
         <span>
           {{ child.title }}
diff --git a/packages/vue/src/components/NavSecondary/NavSecondary.vue b/packages/vue/src/components/NavSecondary/NavSecondary.vue
index 608690b9..8a1f367c 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondary.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondary.vue
@@ -4,7 +4,7 @@
     ref="NavSecondary"
     aria-label="Secondary"
     class="NavSecondary"
-    :class="{ 'has-intro': hasIntro }"
+    :class="{ 'has-intro': hasIntro, '!bg-transparent': invert }"
   >
     <div
       class="max-w-screen-3xl mx-auto"
diff --git a/packages/vue/src/interfaces.ts b/packages/vue/src/interfaces.ts
index 51eb8471..c1a4c93a 100644
--- a/packages/vue/src/interfaces.ts
+++ b/packages/vue/src/interfaces.ts
@@ -11,6 +11,8 @@ export interface BasicLinkObject {
 export interface BlockData {
   blockType: string
   field?: string
+  heading?: string
+  level?: string
   items?: any[]
 }
 export interface ImageSrcObject {
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
index 10225897..2f3d6bf5 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
@@ -1,5 +1,5 @@
 import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories'
-import { BlockStreamfieldTruncatedData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
+import { BlockStreamfieldData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
 import PageEduNewsDetail from './PageEduNewsDetail.vue'
 
 export default {
@@ -56,7 +56,7 @@ export const BaseStory = {
       heroPosition: 'full_bleed',
       heroImage: HeroMediaData.image,
       heroImageInline: HeroMediaData.imageInline,
-      ...BlockStreamfieldTruncatedData
+      ...BlockStreamfieldData
     }
   }
 }
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
index b55cbaac..357888a2 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
@@ -17,6 +17,7 @@ import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsE
 import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 
 interface PageEduNewsDetailObject extends PageResponseObject {
   readTime: string
@@ -147,7 +148,7 @@ const dateTimeArray = computed(() => {
         {{ data.summary }}
       </p>
     </LayoutHelper>
-
+    <NavJumpMenu :blocks="data.body" />
     <!-- streamfield blocks -->
     <BlockStreamfield
       itemprop="articleBody"
diff --git a/packages/vue/src/utils/getHeadingId.ts b/packages/vue/src/utils/getHeadingId.ts
new file mode 100644
index 00000000..d9a6f8bb
--- /dev/null
+++ b/packages/vue/src/utils/getHeadingId.ts
@@ -0,0 +1,5 @@
+import { camelCase } from 'lodash'
+
+export const getHeadingId = (heading: string, index?: number) => {
+  return camelCase(heading + (index ? index : ''))
+}

From 2b9d1f831bfdc627c74145580feefd9178189b84 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 6 Aug 2024 13:04:11 -0700
Subject: [PATCH 3/6] adding eventBus

---
 apps/vue-storybook/package.json               |  1 +
 .../src/scss/components/_BlockKeyPoints.scss  |  2 +-
 packages/vue/package.json                     |  1 +
 .../src/components/BaseAudio/BaseAudio.vue    |  7 +--
 .../vue/src/components/BaseLink/BaseLink.vue  |  2 +
 .../NavDesktop/NavDesktopDropdown.vue         |  6 +-
 .../NavJumpMenu/NavJumpMenu.stories.js        | 10 +---
 .../components/NavJumpMenu/NavJumpMenu.vue    | 56 +++++++++++++++----
 .../NavJumpMenu/NavJumpMenuContent.vue        |  7 ++-
 .../src/components/NavMobile/NavMobile.vue    |  6 +-
 .../NavMobile/NavMobileDropdown.vue           |  6 +-
 .../NavMobile/NavMobileSecondaryDropdown.vue  |  1 -
 .../components/NavSecondary/NavSecondary.vue  | 34 ++---------
 .../NavSecondary/NavSecondaryDropdown.vue     |  8 +--
 .../PageEduNewsDetail/PageEduNewsDetail.vue   |  5 +-
 packages/vue/src/utils/eventBus.ts            |  3 +
 pnpm-lock.yaml                                |  6 ++
 17 files changed, 86 insertions(+), 75 deletions(-)
 create mode 100644 packages/vue/src/utils/eventBus.ts

diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index ac978843..4db6b08a 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -41,6 +41,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "click-outside-vue3": "^4.0.1",
     "dayjs": "^1.11.11",
+    "mitt": "^3.0.1",
     "swiper": "^11.1.3",
     "vue": "^3.2.47",
     "vue3-compare-image": "^1.2.5"
diff --git a/packages/common/src/scss/components/_BlockKeyPoints.scss b/packages/common/src/scss/components/_BlockKeyPoints.scss
index 3e8e8c0f..c41d0f7b 100644
--- a/packages/common/src/scss/components/_BlockKeyPoints.scss
+++ b/packages/common/src/scss/components/_BlockKeyPoints.scss
@@ -1,7 +1,7 @@
 .BlockKeyPoints {
   ul li {
     &::before {
-      @apply bg-jpl-red;
+      @apply bg-primary;
       @apply inline-block;
       @apply relative;
       @apply mr-4;
diff --git a/packages/vue/package.json b/packages/vue/package.json
index bf2ed757..17482fb5 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -32,6 +32,7 @@
     "dayjs": "^1.11.11",
     "fast-qs": "^2.0.3",
     "lodash": "^4.17.21",
+    "mitt": "^3.0.1",
     "sass": "^1.77.4",
     "swiper": "^11.1.3",
     "tailwindcss": "^3.4.3",
diff --git a/packages/vue/src/components/BaseAudio/BaseAudio.vue b/packages/vue/src/components/BaseAudio/BaseAudio.vue
index 82f15bf6..c661c313 100644
--- a/packages/vue/src/components/BaseAudio/BaseAudio.vue
+++ b/packages/vue/src/components/BaseAudio/BaseAudio.vue
@@ -119,6 +119,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { eventBus } from './../../utils/eventBus'
 import IconPlay from './../Icons/IconPlay.vue'
 import IconPause from './../Icons/IconPause.vue'
 import IconVolume from './../Icons/IconVolume.vue'
@@ -326,10 +327,8 @@ export default defineComponent({
         this.audio.addEventListener('play', this._handlePlayPause)
         this.audio.addEventListener('ended', this._handleEnded)
       }
-      // TODO: VUE3: find solution for emitting event from slot
-      // TODO: find a cleaner way to do this w/o using mounted or root level events
-      // scoped slots? https://github.com/vuejs/vue/issues/4332
-      // this.$root?.$on('play', this.pauseOthers)
+      // TODO: VUE3: pass uuID to pauseOthers() method
+      // eventBus.on('play', () => this.pauseOthers())
     },
     getAudio() {
       return this.$el.querySelectorAll('audio')[0]
diff --git a/packages/vue/src/components/BaseLink/BaseLink.vue b/packages/vue/src/components/BaseLink/BaseLink.vue
index 67892854..74c2b37e 100644
--- a/packages/vue/src/components/BaseLink/BaseLink.vue
+++ b/packages/vue/src/components/BaseLink/BaseLink.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { eventBus } from './../../utils/eventBus'
 import MixinAnimationCaret from './../MixinAnimationCaret/MixinAnimationCaret.vue'
 
 interface Variants {
@@ -145,6 +146,7 @@ export default defineComponent({
     clickEvent() {
       this.$root?.$emit('linkClicked')
       this.$emit('specificLinkClicked')
+      eventBus.emit('linkClicked')
     }
   }
 })
diff --git a/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue b/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue
index 4c6516a5..76bda750 100644
--- a/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue
+++ b/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue
@@ -37,6 +37,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { eventBus } from './../../utils/eventBus'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from './../../store/header'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
@@ -80,10 +81,7 @@ export default defineComponent({
     }
   },
   mounted() {
-    // TODO: VUE3: find solution for emitting event from slot
-    // TODO: find a cleaner way to do this w/o using mounted or root level events
-    // scoped slots? https://github.com/vuejs/vue/issues/4332
-    // this.$root?.$on('linkClicked', this.closeDropdown)
+    eventBus.on('linkClicked', () => this.closeDropdown())
   },
   methods: {
     toggleDropdown() {
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.stories.js b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.stories.js
index c3b947bc..98c836cf 100644
--- a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.stories.js
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.stories.js
@@ -32,10 +32,7 @@ const JumpLinksData = [
 export const BaseStory = {
   name: 'Jump Menu',
   args: {
-    title: {
-      title: 'Page Title',
-      path: '#'
-    },
+    title: 'Page Title',
     jumpLinks: JumpLinksData,
     invert: true
   }
@@ -43,10 +40,7 @@ export const BaseStory = {
 
 export const Light = {
   args: {
-    title: {
-      title: 'Page Title',
-      path: '#'
-    },
+    title: 'Page Title',
     jumpLinks: JumpLinksData,
     invert: false
   }
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
index 18310e6b..9c7ed6b1 100644
--- a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
@@ -2,13 +2,41 @@
   <NavSecondary
     v-if="enabled"
     :invert="invert"
-    :jump-links="theBreadcrumbs"
     :include-overview="false"
-  />
+  >
+    <template v-for="(item, index) in theBreadcrumbs">
+      <template v-if="item.children && item.children.length > 0">
+        <NavSecondaryDropdown
+          :key="index"
+          :item="item"
+          :index="index"
+          :is-last="theBreadcrumbs && index === theBreadcrumbs.length - 1"
+          :invert="invert"
+        >
+          <NavJumpMenuContent
+            :key="index"
+            :item="item"
+            @jump-menu-link-clicked="closeDropdown()"
+          />
+        </NavSecondaryDropdown>
+      </template>
+      <template v-else>
+        <NavSecondaryLink
+          :key="index"
+          :item="item"
+          :index="index"
+          :invert="invert"
+        />
+      </template>
+    </template>
+  </NavSecondary>
 </template>
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue'
 import NavSecondary from './../NavSecondary/NavSecondary.vue'
+import NavSecondaryDropdown from './../NavSecondary/NavSecondaryDropdown.vue'
+import NavSecondaryLink from './../NavSecondary/NavSecondaryLink.vue'
+import NavJumpMenuContent from './../NavJumpMenu/NavJumpMenuContent.vue'
 import type { BlockData, BreadcrumbPathObject } from './../../interfaces'
 import { getHeadingId } from '../../utils/getHeadingId'
 
@@ -20,12 +48,15 @@ export default defineComponent({
    */
   name: 'NavJumpMenu',
   components: {
-    NavSecondary
+    NavSecondary,
+    NavSecondaryDropdown,
+    NavSecondaryLink,
+    NavJumpMenuContent
   },
   props: {
     // jump links create a jump link menu
     title: {
-      type: Object as PropType<Partial<BreadcrumbPathObject>>,
+      type: String,
       required: false,
       default: undefined
     },
@@ -61,22 +92,22 @@ export default defineComponent({
       default: false
     }
   },
+  emits: ['closeDropdown'],
   computed: {
     // formats content in a way that NavSecondary will recognize it
     theBreadcrumbs(): BreadcrumbPathObject[] | undefined {
       let breadcrumb = undefined
       const rootItem = this.title
         ? {
-            ...this.title,
-            children: []
+            title: this.title,
+            path: '#top'
           }
         : {
-            title: 'nothing',
-            path: '#',
-            children: []
+            title: 'Back to top',
+            path: '#top'
           }
       const jumpMenu: BreadcrumbPathObject = {
-        title: 'Jump to',
+        title: 'Jump to…',
         path: '#',
         children: this.theJumpLinks as BreadcrumbPathObject[]
       }
@@ -106,6 +137,11 @@ export default defineComponent({
       }
       return []
     }
+  },
+  methods: {
+    closeDropdown() {
+      this.$emit('closeDropdown')
+    }
   }
 })
 // path: string
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue
index 859bb2b5..277db626 100644
--- a/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue
@@ -39,7 +39,11 @@ export default defineComponent({
       required: true
     }
   },
+  emits: ['jumpMenuLinkClicked'],
   methods: {
+    linkClicked() {
+      this.$emit('jumpMenuLinkClicked')
+    },
     linkClass(item?: NavItemObject, isLast?: Boolean) {
       // default
       let computedClass = 'py-2 lg:py-4'
@@ -49,9 +53,6 @@ export default defineComponent({
       } else if (item.children && item.children.length > 0) {
         // if has children
         computedClass = 'pt-2 pb-1 lg:pt-4 lg:pb-2'
-      } else if (isLast) {
-        // if the very last
-        computedClass = 'py-2 lg:pt-4 lg:pb-6'
       }
       return computedClass
     }
diff --git a/packages/vue/src/components/NavMobile/NavMobile.vue b/packages/vue/src/components/NavMobile/NavMobile.vue
index 22c70b16..a270d594 100644
--- a/packages/vue/src/components/NavMobile/NavMobile.vue
+++ b/packages/vue/src/components/NavMobile/NavMobile.vue
@@ -115,6 +115,7 @@
 // @ts-nocheck
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
+import { eventBus } from './../../utils/eventBus'
 import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
 import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
 import { useHeaderStore } from './../../store/header'
@@ -216,10 +217,7 @@ export default defineComponent({
     }
   },
   mounted() {
-    // // TODO: VUE3: find solution for emitting event from slot
-    // // TODO: find a cleaner way to do this w/o using mounted or root level events
-    // // scoped slots? https://github.com/vuejs/vue/issues/4332
-    // this.$root?.$on('linkClicked', this.closeMenu)
+    eventBus.on('linkClicked', () => this.closeMenu())
   },
   methods: {
     toggleMenu() {
diff --git a/packages/vue/src/components/NavMobile/NavMobileDropdown.vue b/packages/vue/src/components/NavMobile/NavMobileDropdown.vue
index 4b217b51..e59313ee 100644
--- a/packages/vue/src/components/NavMobile/NavMobileDropdown.vue
+++ b/packages/vue/src/components/NavMobile/NavMobileDropdown.vue
@@ -60,6 +60,7 @@
 // @ts-nocheck
 import { defineComponent } from 'vue'
 import type { LinkObject } from '../../utils/mixins'
+import { eventBus } from './../../utils/eventBus'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavMobileLink from './../NavMobile/NavMobileLink.vue'
 import NavMobileSecondaryDropdown from './../NavMobile/NavMobileSecondaryDropdown.vue'
@@ -104,10 +105,7 @@ export default defineComponent({
     }
     this.theDropdown = this.$refs.NavDropdownMobile as HTMLElement
     if (!this.expandMultiple) {
-      // TODO: VUE3: find solution for emitting event from slot
-      // TODO: find a cleaner way to do this w/o using mounted or root level events
-      // scoped slots? https://github.com/vuejs/vue/issues/4332
-      // this.$root?.$on('openMobileDropdown', this.closeIfOtherOpened)
+      eventBus.on('openMobileDropdown', () => this.closeIfOtherOpened())
     }
   },
   methods: {
diff --git a/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue b/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue
index 969d1b3d..e86f6915 100644
--- a/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue
+++ b/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue
@@ -79,7 +79,6 @@ export default defineComponent({
   },
   methods: {
     toggleDropdown() {
-      console.log('dropdown toggled')
       if (this.dropdownVisible) {
         this.closeDropdown()
       } else {
diff --git a/packages/vue/src/components/NavSecondary/NavSecondary.vue b/packages/vue/src/components/NavSecondary/NavSecondary.vue
index 8a1f367c..90c208b9 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondary.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondary.vue
@@ -22,14 +22,7 @@
                 :index="index"
                 :is-last="theBreadcrumb && index === theBreadcrumb.length - 1"
                 :invert="invert"
-              >
-                <template v-if="isJumpMenu">
-                  <NavJumpMenuContent
-                    :key="index"
-                    :item="item"
-                  />
-                </template>
-              </NavSecondaryDropdown>
+              />
             </template>
             <template v-else>
               <NavSecondaryLink
@@ -47,12 +40,11 @@
   </nav>
 </template>
 <script lang="ts">
-import { defineComponent, type PropType } from 'vue'
+import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from './../../store/header'
 import NavSecondaryDropdown from './NavSecondaryDropdown.vue'
 import NavSecondaryLink from './NavSecondaryLink.vue'
-import NavJumpMenuContent from './../NavJumpMenu/NavJumpMenuContent.vue'
 import { mixinHighlightPrimary, mixinUpdateSecondary } from './../../utils/mixins'
 import type { BreadcrumbPathObject } from './../../interfaces'
 
@@ -65,7 +57,6 @@ export default defineComponent({
   name: 'NavSecondary',
   components: {
     NavSecondaryDropdown,
-    NavJumpMenuContent,
     NavSecondaryLink
   },
   props: {
@@ -75,12 +66,6 @@ export default defineComponent({
       required: false,
       default: undefined
     },
-    // jump links create a jump link menu
-    jumpLinks: {
-      type: Object as PropType<BreadcrumbPathObject[]>,
-      required: false,
-      default: undefined
-    },
     hasIntro: {
       type: Boolean,
       required: false,
@@ -99,13 +84,8 @@ export default defineComponent({
   },
   computed: {
     ...mapStores(useHeaderStore),
-    isJumpMenu(): boolean {
-      return this.jumpLinks ? true : false
-    },
     theBreadcrumb(): BreadcrumbPathObject[] | undefined {
-      if (this.isJumpMenu) {
-        return this.jumpLinks
-      } else if (this.breadcrumb) {
+      if (this.breadcrumb) {
         // we also want to update the store to override secondary nav
         mixinUpdateSecondary(JSON.parse(this.breadcrumb))
         return JSON.parse(this.breadcrumb)
@@ -115,18 +95,14 @@ export default defineComponent({
       return undefined
     },
     enabled(): Boolean {
-      if (
-        (this.theBreadcrumb && this.theBreadcrumb.length > 1) ||
-        this.jumpLinks ||
-        this.$slots.default
-      ) {
+      if ((this.theBreadcrumb && this.theBreadcrumb.length > 1) || this.$slots.default) {
         return true
       }
       return false
     }
   },
   mounted() {
-    if (this.enabled && !this.isJumpMenu) {
+    if (this.enabled) {
       // if there is a secondary nav displayed, then don't highlight the primary active item
       mixinHighlightPrimary(false)
     }
diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue b/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
index f5a7bf24..6e73e390 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
@@ -40,6 +40,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { eventBus } from './../../utils/eventBus'
 import IconCaret from './../Icons/IconCaret.vue'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavSecondaryDropdownContent from './../NavSecondary/NavSecondaryDropdownContent.vue'
@@ -89,15 +90,10 @@ export default defineComponent({
     }
   },
   mounted() {
-    // TODO: VUE3: find solution for emitting event from slot
-    // https://stackoverflow.com/questions/50181858/this-root-emit-not-working-in-vue
-    // TODO: find a cleaner way to do this w/o using mounted or root level events
-    // scoped slots? https://github.com/vuejs/vue/issues/4332
-    // this.$root?.$on('linkClicked', this.closeDropdown)
+    eventBus.on('linkClicked', () => this.closeDropdown())
   },
   methods: {
     toggleDropdown() {
-      console.log('dropdown toggled')
       if (this.dropdownVisible) {
         this.closeDropdown()
       } else {
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
index 357888a2..f72a09b4 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
@@ -148,7 +148,10 @@ const dateTimeArray = computed(() => {
         {{ data.summary }}
       </p>
     </LayoutHelper>
-    <NavJumpMenu :blocks="data.body" />
+    <NavJumpMenu
+      :title="data.title"
+      :blocks="data.body"
+    />
     <!-- streamfield blocks -->
     <BlockStreamfield
       itemprop="articleBody"
diff --git a/packages/vue/src/utils/eventBus.ts b/packages/vue/src/utils/eventBus.ts
new file mode 100644
index 00000000..d87209a4
--- /dev/null
+++ b/packages/vue/src/utils/eventBus.ts
@@ -0,0 +1,3 @@
+import mitt from 'mitt'
+
+export const eventBus = mitt()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 27e96634..d018beb8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -159,6 +159,9 @@ importers:
       dayjs:
         specifier: ^1.11.11
         version: 1.11.11
+      mitt:
+        specifier: ^3.0.1
+        version: 3.0.1
       swiper:
         specifier: ^11.1.3
         version: 11.1.4
@@ -512,6 +515,9 @@ importers:
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
+      mitt:
+        specifier: ^3.0.1
+        version: 3.0.1
       sass:
         specifier: ^1.77.4
         version: 1.77.4

From 5fc553febc905f9d3912f805ffd9d349a95415b1 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 6 Aug 2024 15:24:46 -0700
Subject: [PATCH 4/6] adding show/hide effects to jump menu

---
 apps/vue-storybook/.storybook/preview.ts      |  22 ++-
 .../components/NavJumpMenu/NavJumpMenu.vue    | 186 ++++++++----------
 .../NavJumpMenu/NavJumpMenuContent.vue        |   8 +-
 .../components/NavSecondary/NavSecondary.vue  |   7 +-
 .../PageEduNewsDetail/PageEduNewsDetail.vue   |  37 +++-
 5 files changed, 141 insertions(+), 119 deletions(-)

diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts
index ebff4e08..263cf4ba 100644
--- a/apps/vue-storybook/.storybook/preview.ts
+++ b/apps/vue-storybook/.storybook/preview.ts
@@ -2,6 +2,7 @@
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
 import useMockComponents from './_mock-components.js'
 import { setup, type Preview } from '@storybook/vue3'
+import { createRouter, createWebHashHistory, type RouterOptions } from 'vue-router'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import vClickOutside from 'click-outside-vue3'
 import VueCompareImage from 'vue3-compare-image'
@@ -13,9 +14,28 @@ import customTheme from '@explorer-1/common-storybook/src/config/customTheme'
 import '@explorer-1/common-storybook/src/config/canvas.css'
 
 const pinia = createPinia()
-
+const router = createRouter({
+  routes: [],
+  history: createWebHashHistory(),
+  scrollBehavior(to, from, savedPosition) {
+    if (to.hash) {
+      return {
+        el: to.hash,
+        behavior: 'smooth'
+      }
+    }
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return {
+        top: 0
+      }
+    }
+  }
+} as RouterOptions)
 setup((app, _context) => {
   app.use(pinia)
+  app.use(router)
   app.use(vClickOutside)
   app.use(VueCompareImage)
   app.component('Swiper', Swiper)
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
index 9c7ed6b1..c827f945 100644
--- a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
@@ -1,8 +1,10 @@
 <template>
   <NavSecondary
     v-if="enabled"
+    ref="NavJumpMenuRef"
+    class="NavJumpMenu -hide-until-threshold"
     :invert="invert"
-    :include-overview="false"
+    hide-until-threshold
   >
     <template v-for="(item, index) in theBreadcrumbs">
       <template v-if="item.children && item.children.length > 0">
@@ -16,7 +18,6 @@
           <NavJumpMenuContent
             :key="index"
             :item="item"
-            @jump-menu-link-clicked="closeDropdown()"
           />
         </NavSecondaryDropdown>
       </template>
@@ -31,8 +32,8 @@
     </template>
   </NavSecondary>
 </template>
-<script lang="ts">
-import { defineComponent, type PropType } from 'vue'
+<script setup lang="ts">
+import { computed, defineExpose, ref } from 'vue'
 import NavSecondary from './../NavSecondary/NavSecondary.vue'
 import NavSecondaryDropdown from './../NavSecondary/NavSecondaryDropdown.vue'
 import NavSecondaryLink from './../NavSecondary/NavSecondaryLink.vue'
@@ -40,110 +41,85 @@ import NavJumpMenuContent from './../NavJumpMenu/NavJumpMenuContent.vue'
 import type { BlockData, BreadcrumbPathObject } from './../../interfaces'
 import { getHeadingId } from '../../utils/getHeadingId'
 
-export default defineComponent({
-  /** The complexity of this component is due to the need for it to be populated from multiple data sources
-   ** SecondaryNav will first check to see if there is a navigation override from the data fetched for this specific page (data.breadcrumb and store.header.secondaryNav)
-   ** If there is no breadcrumb override, then it will fallback to using the breadcrumbs derived form the active global nav item (store.header.globalChildren)
-   ** store.header.secondaryNav reverts to null on route changes, so the breadcrumb override is re-evaluted on every page
-   */
-  name: 'NavJumpMenu',
-  components: {
-    NavSecondary,
-    NavSecondaryDropdown,
-    NavSecondaryLink,
-    NavJumpMenuContent
-  },
-  props: {
-    // jump links create a jump link menu
-    title: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    // manually define jumpLinks
-    jumpLinks: {
-      type: Object as PropType<BreadcrumbPathObject[]>,
-      required: false,
-      default: undefined
-    },
-    // or provide a streamfield
-    blocks: {
-      type: Object as PropType<BlockData[]>,
-      required: false,
-      default: undefined
-    },
-    headingLevel: {
-      type: String,
-      required: false,
-      default: 'h2'
-    },
-    enabled: {
-      type: Boolean,
-      default: true
-    },
-    invert: {
-      type: Boolean,
-      default: true
-    },
-    // if the JumpMenu should initially be visible or hidden.
-    // if hidden, it will appear once the user has scrolled past the first Jump menu item
-    hidden: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['closeDropdown'],
-  computed: {
-    // formats content in a way that NavSecondary will recognize it
-    theBreadcrumbs(): BreadcrumbPathObject[] | undefined {
-      let breadcrumb = undefined
-      const rootItem = this.title
-        ? {
-            title: this.title,
-            path: '#top'
-          }
-        : {
-            title: 'Back to top',
-            path: '#top'
-          }
-      const jumpMenu: BreadcrumbPathObject = {
-        title: 'Jump to…',
-        path: '#',
-        children: this.theJumpLinks as BreadcrumbPathObject[]
+interface NavJumpMenuProps {
+  title?: string
+  jumpLinks?: BreadcrumbPathObject[]
+  blocks?: BlockData[]
+  headingLevel?: string
+  invert?: boolean
+  enabled?: boolean
+}
+
+const props = withDefaults(defineProps<NavJumpMenuProps>(), {
+  title: undefined,
+  jumpLinks: undefined,
+  blocks: undefined,
+  headingLevel: 'h2',
+  enabled: true,
+  invert: true,
+  hidden: false
+})
+
+const NavJumpMenuRef = ref()
+
+const theJumpLinks = computed(() => {
+  if (props.jumpLinks) {
+    return props.jumpLinks
+  } else if (props.blocks) {
+    const indexedBlocks = props.blocks.map((b, index) => {
+      return {
+        ...b,
+        index: index
       }
-      if (this.theJumpLinks) {
-        breadcrumb = [rootItem, jumpMenu]
+    })
+    const filteredBlocks = indexedBlocks.filter((b) => {
+      return b.blockType === 'HeadingBlock' && b.level === props.headingLevel
+    })
+    // map to the correct data shape
+    const links: BreadcrumbPathObject[] = filteredBlocks.map((l) => {
+      return {
+        // @ts-expect-error using parameter that was added to BlockData
+        path: '#' + getHeadingId(l.heading, l.index),
+        title: l.heading
+      } as BreadcrumbPathObject
+    })
+    return links
+  }
+  return []
+})
+
+const theBreadcrumbs = computed(() => {
+  let breadcrumb = undefined
+  const rootItem = props.title
+    ? {
+        title: props.title,
+        path: '#top'
       }
-      return breadcrumb as BreadcrumbPathObject[] | undefined
-    },
-    theJumpLinks(): BreadcrumbPathObject[] {
-      if (this.jumpLinks) {
-        return this.jumpLinks
-      } else if (this.blocks) {
-        const filteredBlocks = this.blocks.filter((b, index) => {
-          // @ts-expect-error adding a parameter to BlockData
-          b.index = index
-          return b.blockType === 'HeadingBlock' && b.level === this.headingLevel
-        })
-        // map to the correct data shape
-        const links: BreadcrumbPathObject[] = filteredBlocks.map((l) => {
-          return {
-            // @ts-expect-error using parameter that was added to BlockData
-            path: '#' + getHeadingId(l.heading, l.index),
-            title: l.heading
-          } as BreadcrumbPathObject
-        })
-        return links
+    : {
+        title: 'Back to top',
+        path: '#top'
       }
-      return []
-    }
-  },
-  methods: {
-    closeDropdown() {
-      this.$emit('closeDropdown')
-    }
+  const jumpMenu: BreadcrumbPathObject = {
+    title: 'Jump to…',
+    path: '#',
+    children: theJumpLinks.value as BreadcrumbPathObject[]
+  }
+  if (theJumpLinks.value) {
+    breadcrumb = [rootItem, jumpMenu]
   }
+  return breadcrumb as BreadcrumbPathObject[] | undefined
+})
+defineExpose({
+  NavJumpMenuRef
 })
-// path: string
-// title: string
 </script>
+<style lang="scss">
+.NavJumpMenu {
+  &.-hide-until-threshold {
+    @apply opacity-0 transition-all;
+    &.-is-sticky {
+      @apply opacity-100;
+    }
+  }
+}
+</style>
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue
index 277db626..c4f16834 100644
--- a/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenuContent.vue
@@ -8,7 +8,7 @@
       <BaseLink
         :href="child.path"
         variant="none"
-        :link-class="linkClass(child, index === item.children.length - 1)"
+        :link-class="linkClass(child)"
       >
         <span>
           {{ child.title }}
@@ -39,12 +39,8 @@ export default defineComponent({
       required: true
     }
   },
-  emits: ['jumpMenuLinkClicked'],
   methods: {
-    linkClicked() {
-      this.$emit('jumpMenuLinkClicked')
-    },
-    linkClass(item?: NavItemObject, isLast?: Boolean) {
+    linkClass(item?: NavItemObject) {
       // default
       let computedClass = 'py-2 lg:py-4'
       if (!item) {
diff --git a/packages/vue/src/components/NavSecondary/NavSecondary.vue b/packages/vue/src/components/NavSecondary/NavSecondary.vue
index 90c208b9..da62c633 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondary.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondary.vue
@@ -4,7 +4,10 @@
     ref="NavSecondary"
     aria-label="Secondary"
     class="NavSecondary"
-    :class="{ 'has-intro': hasIntro, '!bg-transparent': invert }"
+    :class="{
+      'has-intro': hasIntro,
+      '!bg-transparent': invert
+    }"
   >
     <div
       class="max-w-screen-3xl mx-auto"
@@ -40,7 +43,7 @@
   </nav>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, defineExpose } from 'vue'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from './../../store/header'
 import NavSecondaryDropdown from './NavSecondaryDropdown.vue'
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
index f72a09b4..92b44f2b 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, defineExpose, onMounted } from 'vue'
 import isEmpty from 'lodash/isEmpty.js'
 import type { StreamfieldBlockData } from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import type {
@@ -45,6 +45,8 @@ interface PageEduNewsDetailProps {
 // define props
 const props = defineProps<PageEduNewsDetailProps>()
 
+const PageEduNewsDetailJumpMenu = ref()
+
 const heroEmpty = computed(() => {
   return isEmpty(props.data?.heroImage)
 })
@@ -68,6 +70,29 @@ const computedClass = computed(() => {
 const dateTimeArray = computed(() => {
   return props.data.publicationDate.split(' ')
 })
+
+defineExpose({
+  PageEduNewsDetailJumpMenu
+})
+
+onMounted(() => {
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          // add 'animate-delay' class to the target
+          entry.target.classList.add('animate-delay')
+        }
+      })
+    },
+    {
+      threshold: 0.5
+    }
+  )
+  if (PageEduNewsDetailJumpMenu.value) {
+    observer.observe(PageEduNewsDetailJumpMenu.value)
+  }
+})
 </script>
 <template>
   <div
@@ -94,6 +119,12 @@ const dateTimeArray = computed(() => {
       :constrain="data.heroConstrain"
     />
 
+    <NavJumpMenu
+      ref="PageEduNewsDetailJumpMenu"
+      :title="data.title"
+      :blocks="data.body"
+    />
+
     <!-- news headline -->
     <LayoutHelper
       indent="col-2"
@@ -148,10 +179,6 @@ const dateTimeArray = computed(() => {
         {{ data.summary }}
       </p>
     </LayoutHelper>
-    <NavJumpMenu
-      :title="data.title"
-      :blocks="data.body"
-    />
     <!-- streamfield blocks -->
     <BlockStreamfield
       itemprop="articleBody"

From 11dd2261a38a86d0aac24c7ff48a95e00d455a06 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 6 Aug 2024 17:55:21 -0700
Subject: [PATCH 5/6] finishing mobile jump menu

---
 .../components/NavJumpMenu/NavJumpMenu.vue    | 30 ++++++++++++----
 .../NavMobile/NavMobileDropdown.vue           |  6 ++++
 .../NavMobile/NavMobileSecondaryDropdown.vue  |  4 +++
 .../components/NavSecondary/NavSecondary.vue  |  8 +++--
 packages/vue/src/store/header.ts              |  7 +++-
 .../PageEduNewsDetail.stories.js              |  6 ++--
 .../PageEduNewsDetail/PageEduNewsDetail.vue   | 35 +++++--------------
 packages/vue/src/utils/mixins.ts              |  6 +++-
 8 files changed, 63 insertions(+), 39 deletions(-)

diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
index c827f945..abb51dfc 100644
--- a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
@@ -1,10 +1,10 @@
 <template>
   <NavSecondary
     v-if="enabled"
+    id="JumpMenuTop"
     ref="NavJumpMenuRef"
     class="NavJumpMenu -hide-until-threshold"
     :invert="invert"
-    hide-until-threshold
   >
     <template v-for="(item, index) in theBreadcrumbs">
       <template v-if="item.children && item.children.length > 0">
@@ -33,7 +33,9 @@
   </NavSecondary>
 </template>
 <script setup lang="ts">
-import { computed, defineExpose, ref } from 'vue'
+import { computed, defineExpose, ref, onMounted, watch } from 'vue'
+import { mixinUpdateSecondary } from './../../utils/mixins'
+import { useRoute } from 'vue-router'
 import NavSecondary from './../NavSecondary/NavSecondary.vue'
 import NavSecondaryDropdown from './../NavSecondary/NavSecondaryDropdown.vue'
 import NavSecondaryLink from './../NavSecondary/NavSecondaryLink.vue'
@@ -93,11 +95,11 @@ const theBreadcrumbs = computed(() => {
   const rootItem = props.title
     ? {
         title: props.title,
-        path: '#top'
+        path: '#JumpMenuTop'
       }
     : {
         title: 'Back to top',
-        path: '#top'
+        path: '#JumpMenuTop'
       }
   const jumpMenu: BreadcrumbPathObject = {
     title: 'Jump to…',
@@ -112,13 +114,27 @@ const theBreadcrumbs = computed(() => {
 defineExpose({
   NavJumpMenuRef
 })
+onMounted(() => {
+  mixinUpdateSecondary(theBreadcrumbs.value, true)
+})
+const route = useRoute()
+
+// repopulate the store with the jump links since the store is cleared on route changes
+watch(
+  route,
+  () => {
+    mixinUpdateSecondary(theBreadcrumbs.value, true)
+  }
+  // { flush: 'pre', immediate: true, deep: true }
+)
 </script>
 <style lang="scss">
 .NavJumpMenu {
   &.-hide-until-threshold {
-    @apply opacity-0 transition-all;
-    &.-is-sticky {
-      @apply opacity-100;
+    @apply opacity-0 h-0 transition-none overflow-visible;
+    &.-is-sticky,
+    &.-is-sticky-offset {
+      @apply opacity-100 transition-opacity;
     }
   }
 }
diff --git a/packages/vue/src/components/NavMobile/NavMobileDropdown.vue b/packages/vue/src/components/NavMobile/NavMobileDropdown.vue
index e59313ee..330d60cc 100644
--- a/packages/vue/src/components/NavMobile/NavMobileDropdown.vue
+++ b/packages/vue/src/components/NavMobile/NavMobileDropdown.vue
@@ -42,6 +42,7 @@
             </template>
             <template v-else>
               <NavMobileLink
+                v-if="!headerStore.secondaryNavIsJumpMenu && index !== 0"
                 :key="index"
                 :title="index === 0 ? 'Home' : undefined"
                 :data="item"
@@ -59,6 +60,8 @@
 <script lang="ts">
 // @ts-nocheck
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useHeaderStore } from '../../store/header'
 import type { LinkObject } from '../../utils/mixins'
 import { eventBus } from './../../utils/eventBus'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
@@ -99,6 +102,9 @@ export default defineComponent({
       theDropdown: null
     }
   },
+  computed: {
+    ...mapStores(useHeaderStore)
+  },
   mounted() {
     if (this.startOpen) {
       this.dropdownVisible = true
diff --git a/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue b/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue
index e86f6915..5faca869 100644
--- a/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue
+++ b/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue
@@ -18,6 +18,7 @@
         <NavSecondaryDropdownContent
           class="relative w-full text-lg"
           :item="item"
+          :include-overview="!headerStore.secondaryNavIsJumpMenu"
         />
       </slot>
     </template>
@@ -27,6 +28,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { mixinIsActivePath } from '../../utils/mixins'
+import { mapStores } from 'pinia'
+import { useHeaderStore } from '../../store/header'
 import IconCaret from './../Icons/IconCaret.vue'
 import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavSecondaryDropdownContent from './../NavSecondary/NavSecondaryDropdownContent.vue'
@@ -58,6 +61,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useHeaderStore),
     startOpen(): Boolean {
       if (this.item) {
         return mixinIsActivePath(this.item.path)
diff --git a/packages/vue/src/components/NavSecondary/NavSecondary.vue b/packages/vue/src/components/NavSecondary/NavSecondary.vue
index da62c633..e6d4b6d5 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondary.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondary.vue
@@ -43,9 +43,10 @@
   </nav>
 </template>
 <script lang="ts">
-import { defineComponent, defineExpose } from 'vue'
+import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from './../../store/header'
+import { useThemeStore } from './../../store/theme'
 import NavSecondaryDropdown from './NavSecondaryDropdown.vue'
 import NavSecondaryLink from './NavSecondaryLink.vue'
 import { mixinHighlightPrimary, mixinUpdateSecondary } from './../../utils/mixins'
@@ -87,6 +88,7 @@ export default defineComponent({
   },
   computed: {
     ...mapStores(useHeaderStore),
+    ...mapStores(useThemeStore),
     theBreadcrumb(): BreadcrumbPathObject[] | undefined {
       if (this.breadcrumb) {
         // we also want to update the store to override secondary nav
@@ -134,7 +136,9 @@ export default defineComponent({
         ([e]) => {
           e.target.classList.toggle('-is-sticky', e.intersectionRatio < 1)
         },
-        { threshold: [1] }
+        {
+          threshold: [1]
+        }
       )
       const observerOffset = new IntersectionObserver(
         ([e]) => {
diff --git a/packages/vue/src/store/header.ts b/packages/vue/src/store/header.ts
index 1af027f1..f9710a47 100644
--- a/packages/vue/src/store/header.ts
+++ b/packages/vue/src/store/header.ts
@@ -11,6 +11,7 @@ export interface State {
   highlightPrimary: boolean
   globalChildren?: any | null
   secondaryNav?: any | null
+  secondaryNavIsJumpMenu: boolean
 }
 
 export const useHeaderStore = defineStore('header', {
@@ -19,7 +20,8 @@ export const useHeaderStore = defineStore('header', {
       headerTransparent: false,
       highlightPrimary: true,
       globalChildren: null,
-      secondaryNav: null
+      secondaryNav: null,
+      secondaryNavIsJumpMenu: false
     }
   },
   actions: {
@@ -35,6 +37,9 @@ export const useHeaderStore = defineStore('header', {
     },
     updateSecondary(value: any) {
       this.secondaryNav = value
+    },
+    updateSecondaryNavIsJumpMenu(value: boolean) {
+      this.secondaryNavIsJumpMenu = value
     }
   }
 })
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
index 2f3d6bf5..2cc74371 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
@@ -65,7 +65,8 @@ export const InlineHero = {
   args: {
     data: {
       ...BaseStory.args.data,
-      heroPosition: 'inline'
+      heroPosition: 'inline',
+      showJumpMenu: true
     }
   }
 }
@@ -74,7 +75,8 @@ export const NoHero = {
   args: {
     data: {
       ...BaseStory.args.data,
-      hero: []
+      hero: [],
+      showJumpMenu: true
     }
   }
 }
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
index 92b44f2b..5d69bccc 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, defineExpose, onMounted } from 'vue'
+import { computed, ref, defineExpose } from 'vue'
 import isEmpty from 'lodash/isEmpty.js'
 import type { StreamfieldBlockData } from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import type {
@@ -36,6 +36,7 @@ interface PageEduNewsDetailObject extends PageResponseObject {
   topper: string
   relatedLinks: RelatedLinkObject[]
   body: StreamfieldBlockData[]
+  showJumpMenu: boolean
 }
 
 interface PageEduNewsDetailProps {
@@ -74,25 +75,6 @@ const dateTimeArray = computed(() => {
 defineExpose({
   PageEduNewsDetailJumpMenu
 })
-
-onMounted(() => {
-  const observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          // add 'animate-delay' class to the target
-          entry.target.classList.add('animate-delay')
-        }
-      })
-    },
-    {
-      threshold: 0.5
-    }
-  )
-  if (PageEduNewsDetailJumpMenu.value) {
-    observer.observe(PageEduNewsDetailJumpMenu.value)
-  }
-})
 </script>
 <template>
   <div
@@ -102,6 +84,13 @@ onMounted(() => {
     itemscope
     itemtype="http://schema.org/Article"
   >
+    <NavJumpMenu
+      ref="PageEduNewsDetailJumpMenu"
+      :title="data.title"
+      :blocks="data.body"
+      :enabled="true"
+    />
+
     <!-- schema.org -->
     <meta
       v-if="data.thumbnailImage && data.thumbnailImage.original"
@@ -119,12 +108,6 @@ onMounted(() => {
       :constrain="data.heroConstrain"
     />
 
-    <NavJumpMenu
-      ref="PageEduNewsDetailJumpMenu"
-      :title="data.title"
-      :blocks="data.body"
-    />
-
     <!-- news headline -->
     <LayoutHelper
       indent="col-2"
diff --git a/packages/vue/src/utils/mixins.ts b/packages/vue/src/utils/mixins.ts
index de08a565..6310baf3 100644
--- a/packages/vue/src/utils/mixins.ts
+++ b/packages/vue/src/utils/mixins.ts
@@ -123,9 +123,13 @@ export const mixinUpdateGlobalChildren = (value: [BreadcrumbPathObject] | null)
 /* -- mixinUpdateSecondary --
       This mixin is used by the navigation to share secondary nav override items between components
     */
-export const mixinUpdateSecondary = (value: [BreadcrumbPathObject] | null) => {
+export const mixinUpdateSecondary = (
+  value: BreadcrumbPathObject[] | undefined,
+  isJumpMenu: boolean = false
+) => {
   const headerStore = useHeaderStore()
   headerStore.updateSecondary(value)
+  headerStore.updateSecondaryNavIsJumpMenu(isJumpMenu)
 }
 /* -- mixinHighlightPrimary --
       This mixin is used to specify if active primary navigation items should be highlighted/underlined

From 81756b3aef1aa081aec2d18bf2e959e25609b794 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Tue, 6 Aug 2024 18:12:34 -0700
Subject: [PATCH 6/6] fixing vue-build errors

---
 packages/vue/src/components/BaseAudio/BaseAudio.vue           | 2 +-
 packages/vue/src/components/NavSecondary/NavSecondaryLink.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vue/src/components/BaseAudio/BaseAudio.vue b/packages/vue/src/components/BaseAudio/BaseAudio.vue
index c661c313..0b280001 100644
--- a/packages/vue/src/components/BaseAudio/BaseAudio.vue
+++ b/packages/vue/src/components/BaseAudio/BaseAudio.vue
@@ -119,7 +119,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { eventBus } from './../../utils/eventBus'
+// import { eventBus } from './../../utils/eventBus'
 import IconPlay from './../Icons/IconPlay.vue'
 import IconPause from './../Icons/IconPause.vue'
 import IconVolume from './../Icons/IconVolume.vue'
diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue b/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue
index 7ce97ca7..c57641f2 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondaryLink.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseLink
-    :href="isExternal(item.path) ? item.path : null"
-    :to="!isExternal(item.path) ? item.path : null"
+    :href="isExternal(item.path) ? item.path : undefined"
+    :to="!isExternal(item.path) ? item.path : undefined"
     link-class="block px-3 py-2"
     variant="none"
     class="NavSecondaryLink border-t-2 border-transparent"