fix: anchor links in mobile nav, long menus in Jump Nav (#626)

* fixing anchor links in mobile nav * adding overflow scroll for long jump menu lists
nasa-jpl · Sep 20, 2024 · 556fd23 · 556fd23
1 parent 13da08b
commit 556fd23
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/packages/vue/src/components/BlockHeading/BlockHeading.vue b/packages/vue/src/components/BlockHeading/BlockHeading.vue
@@ -57,7 +57,7 @@ export default defineComponent({
   &:target {
     @apply scroll-mt-14;
     @screen lg {
-      @apply scroll-mt-[8rem];
+      @apply scroll-mt-[7rem];
     }
   }
 }

diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.stories.js b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.stories.js
@@ -38,6 +38,23 @@ export const BaseStory = {
   }
 }
 
+export const ExtraLong = {
+  args: {
+    title: 'Page Title',
+    jumpLinks: [
+      ...JumpLinksData,
+      ...JumpLinksData,
+      ...JumpLinksData,
+      ...JumpLinksData,
+      ...JumpLinksData,
+      ...JumpLinksData,
+      ...JumpLinksData,
+      ...JumpLinksData
+    ],
+    invert: true
+  }
+}
+
 export const Light = {
   args: {
     title: 'Page Title',

diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
@@ -18,6 +18,7 @@
         >
           <NavJumpMenuContent
             :key="index"
+            class="max-h-[72vh] overflow-y-auto"
             :item="item"
             v-bind="$attrs"
           />

diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryDropdownContent.vue b/packages/vue/src/components/NavSecondary/NavSecondaryDropdownContent.vue
@@ -16,7 +16,8 @@
       :key="child_index"
     >
       <BaseLink
-        :to="child.path"
+        :to="child.path.startsWith('/') ? child.path : undefined"
+        :href="!child.path.startsWith('/') ? child.path : undefined"
         variant="none"
         :link-class="linkClass(child, child_index === item.children.length - 1)"
         exact
@@ -35,7 +36,8 @@
           class=""
         >
           <BaseLink
-            :to="grandchild.path"
+            :to="grandchild.path.startsWith('/') ? grandchild.path : undefined"
+            :href="!grandchild.path.startsWith('/') ? grandchild.path : undefined"
             variant="none"
             :link-class="
               nestedLinkClass(