@explorer-1/vue 0.2.77 → 0.2.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.77",
+  "version": "0.2.79",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.1.20"
+    "@explorer-1/common": "1.1.21"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/EduSubjectIcon/EduSubjectIcon.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import IconEduArt from '../Icons/IconEduArt.vue'
+import IconEduEngineering from '../Icons/IconEduEngineering.vue'
+import IconEduEnglishLanguageArts from '../Icons/IconEduEnglishLanguageArts.vue'
+import IconEduMathematics from '../Icons/IconEduMathematics.vue'
+import IconEduScience from '../Icons/IconEduScience.vue'
+import IconEduTechnology from '../Icons/IconEduTechnology.vue'
+
+interface EduSubjectIconProps {
+  subject: string
+}
+
+// define props
+const props = withDefaults(defineProps<EduSubjectIconProps>(), {
+  subject: 'science'
+})
+
+const normalizedSubject = computed(() => {
+  return subject.toLowerCase()
+})
+const theIcon = computed(() => {
+  let component = undefined
+  switch (normalizedSubject.value) {
+    case 'art':
+      component = IconEduArt
+      break
+    case 'english':
+    case 'english language arts':
+      component = IconEduEnglishLanguageArts
+      break
+    case 'engineering':
+      component = IconEduEngineering
+      break
+    case 'math':
+    case 'mathematics':
+      component = IconEduMathematics
+      break
+    case 'science':
+      component = IconEduScience
+      break
+    case 'technology':
+      component = IconEduTechnology
+      break
+  }
+  return component
+})
+const { subject } = reactive(props)
+</script>
+<template>
+  <component :is="theIcon"></component>
+</template>

package/src/components/Icons/IconEduArt.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="IconEduArt"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M19.9975 11.9999C19.9975 10.7282 19.7003 9.5256 19.1716 8.45779L20.6337 6.99566C21.4881 8.46664 21.9773 10.1761 21.9773 11.9999V15.0191H19.9975H15.6206C14.6482 15.0191 13.86 15.8074 13.86 16.7797C13.86 17.2457 14.0467 17.6947 14.3761 18.0242L15.3096 18.9576L12.2903 21.9769H12.0004C6.48972 21.9769 2.02344 17.5106 2.02344 11.9999C2.02344 6.48924 6.48972 2.02295 12.0004 2.02295C14.3645 2.02295 16.5364 2.84495 18.2459 4.21878L16.8347 5.62994C15.4918 4.60895 13.8166 4.00276 12.0004 4.00276C7.58544 4.00276 4.00325 7.58495 4.00325 11.9999C4.00325 16.2451 7.30806 19.7146 11.488 19.9803L12.5521 18.9162C12.1188 18.2938 11.8802 17.548 11.8802 16.7797C11.8802 14.7153 13.5562 13.0393 15.6206 13.0393H19.9975V11.9999ZM16.7333 9.58754C16.7711 9.72788 16.7935 9.87683 16.7959 10.0299C16.8119 11.0104 16.0306 11.7917 15.0501 11.7758L13.2754 11.747L13.2466 9.97227C13.2306 8.99176 14.0119 8.21048 14.9924 8.2264C15.1455 8.22888 15.2922 8.25122 15.4348 8.28902L16.7333 9.58754ZM17.5197 8.97896L17.5197 8.97888L17.5195 8.979L16.068 7.5275L21.0105 2.585L21.0106 2.58508L21.0107 2.58496L22.4622 4.03646L17.5197 8.97896ZM11.7222 5.64579C11.5321 5.86332 11.4361 6.14746 11.4555 6.43572C11.4749 6.72398 11.6079 6.99273 11.8255 7.18287C12.043 7.373 12.3271 7.46894 12.6154 7.44957C12.9037 7.4302 13.1724 7.29711 13.3625 7.07959C13.5527 6.86206 13.6486 6.57792 13.6292 6.28966C13.6099 6.0014 13.4768 5.73264 13.2593 5.54251C13.0417 5.35238 12.7576 5.25644 12.4693 5.27581C12.1811 5.29518 11.9123 5.42827 11.7222 5.64579ZM7.47194 7.605C7.38703 7.88114 7.41529 8.17971 7.55051 8.43502C7.68573 8.69033 7.91684 8.88147 8.19298 8.96638C8.46913 9.0513 8.7677 9.02304 9.02301 8.88782C9.27832 8.7526 9.46946 8.52149 9.55437 8.24534C9.63929 7.9692 9.61102 7.67063 9.4758 7.41532C9.34058 7.16001 9.10948 6.96887 8.83333 6.88396C8.55718 6.79904 8.25862 6.8273 8.00331 6.96252C7.748 7.09775 7.55686 7.32885 7.47194 7.605ZM5.38405 11.3071C5.29914 11.5833 5.3274 11.8819 5.46262 12.1372C5.59784 12.3925 5.82895 12.5836 6.10509 12.6685C6.38124 12.7534 6.67981 12.7252 6.93512 12.59C7.19043 12.4547 7.38157 12.2236 7.46648 11.9475C7.5514 11.6713 7.52313 11.3728 7.38791 11.1175C7.25269 10.8622 7.02159 10.671 6.74544 10.5861C6.46929 10.5012 6.17072 10.5295 5.91542 10.6647C5.66011 10.7999 5.46897 11.031 5.38405 11.3071ZM6.88059 16.1665C6.74537 15.9112 6.71711 15.6126 6.80202 15.3364C6.88694 15.0603 7.07807 14.8292 7.33338 14.694C7.58869 14.5588 7.88726 14.5305 8.16341 14.6154C8.43956 14.7003 8.67066 14.8915 8.80588 15.1468C8.9411 15.4021 8.96936 15.7006 8.88445 15.9768C8.79953 16.2529 8.6084 16.484 8.35309 16.6193C8.09778 16.7545 7.79921 16.7827 7.52306 16.6978C7.24692 16.6129 7.01581 16.4218 6.88059 16.1665Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconEduArt'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconEduArt';
+</style>

package/src/components/Icons/IconEduEngineering.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="IconEduEngineering"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.0039 2.14502H13.0039V6.08398H17.8887H19.8887V8.08398V19.855V21.855H17.8887H6.11719H4.11768H4.11719V6.08398L4.11768 6.08398L6.11719 6.08398H11.0039V2.14502ZM6.11719 8.08398L11.0039 8.08398H13.0039H17.8887V19.855H6.11719V8.08398ZM1 11H3V16.939H1V11ZM10.168 15.9048V17.9048H7.99072V15.9048H10.168ZM13.0918 17.9048V15.9048H10.9146V17.9048H13.0918ZM16.0977 15.9048V17.9048H13.9204V15.9048H16.0977ZM23 11H21V16.939H23V11ZM9.08047 15.0452C10.5164 15.0452 11.6805 13.8812 11.6805 12.4452C11.6805 11.0093 10.5164 9.84521 9.08047 9.84521C7.64453 9.84521 6.48047 11.0093 6.48047 12.4452C6.48047 13.8812 7.64453 15.0452 9.08047 15.0452ZM14.9242 15.0452C16.3602 15.0452 17.5242 13.8812 17.5242 12.4452C17.5242 11.0093 16.3602 9.84521 14.9242 9.84521C13.4883 9.84521 12.3242 11.0093 12.3242 12.4452C12.3242 13.8812 13.4883 15.0452 14.9242 15.0452ZM10.0805 12.4452C10.0805 12.9975 9.63275 13.4452 9.08047 13.4452C8.52818 13.4452 8.08047 12.9975 8.08047 12.4452C8.08047 11.8929 8.52818 11.4452 9.08047 11.4452C9.63275 11.4452 10.0805 11.8929 10.0805 12.4452ZM15.9242 12.4452C15.9242 12.9975 15.4765 13.4452 14.9242 13.4452C14.3719 13.4452 13.9242 12.9975 13.9242 12.4452C13.9242 11.8929 14.3719 11.4452 14.9242 11.4452C15.4765 11.4452 15.9242 11.8929 15.9242 12.4452Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconEduEngineering'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconEduEngineering';
+</style>

package/src/components/Icons/IconEduEnglishLanguageArts.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="IconEduEnglishLanguageArts"
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.5 4.51172C6.39543 4.51172 5.5 5.40715 5.5 6.51172V15.8368C5.96046 15.6159 6.4764 15.4922 7.02124 15.4922H18.4922V4.51172H7.5ZM3.5 18.8392H3.50423C3.50142 18.8969 3.5 18.955 3.5 19.0134C3.5 20.9582 5.07651 22.5347 7.02124 22.5347H20.5V20.5347H19.4316V17.4922H20.5V15.4922H20.4922V2.51172H7.5C5.29086 2.51172 3.5 4.30258 3.5 6.51172V18.8392ZM17.4316 17.4922H7.02124C6.18108 17.4922 5.5 18.1733 5.5 19.0134C5.5 19.8536 6.18108 20.5347 7.02124 20.5347H17.4316V17.4922ZM12.8675 10.9254L12.2411 9.52195L11.6146 10.9254H12.8675ZM13.5817 12.5254H10.9003L10.2188 14.0518L8.75781 13.3996L12.2413 5.59668L15.724 13.3998L14.263 14.0519L13.5817 12.5254Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconEduEnglishLanguageArts'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconEduEnglishLanguageArts';
+</style>

package/src/components/Icons/IconEduMathematics.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="IconEduMathematics"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.998 4H6.02539V6.9873L16.998 6.9873V4ZM6.02539 20V8.9873L16.998 8.9873V20H6.02539ZM6.02539 2H4.02539V4V20V22H6.02539H16.998H18.998V20V4V2H16.998H6.02539ZM12.5117 16.998H7.03516V18.998H12.5117V16.998ZM15.0156 18.998C15.5679 18.998 16.0156 18.5503 16.0156 17.998C16.0156 17.4458 15.5679 16.998 15.0156 16.998C14.4633 16.998 14.0156 17.4458 14.0156 17.998C14.0156 18.5503 14.4633 18.998 15.0156 18.998ZM9.03516 14.9668C9.03516 15.5191 8.58744 15.9668 8.03516 15.9668C7.48287 15.9668 7.03516 15.5191 7.03516 14.9668C7.03516 14.4145 7.48287 13.9668 8.03516 13.9668C8.58744 13.9668 9.03516 14.4145 9.03516 14.9668ZM8.03516 12.9658C8.58744 12.9658 9.03516 12.5181 9.03516 11.9658C9.03516 11.4135 8.58744 10.9658 8.03516 10.9658C7.48287 10.9658 7.03516 11.4135 7.03516 11.9658C7.03516 12.5181 7.48287 12.9658 8.03516 12.9658ZM12.5117 14.9668C12.5117 15.5191 12.064 15.9668 11.5117 15.9668C10.9594 15.9668 10.5117 15.5191 10.5117 14.9668C10.5117 14.4145 10.9594 13.9668 11.5117 13.9668C12.064 13.9668 12.5117 14.4145 12.5117 14.9668ZM11.5117 12.9658C12.064 12.9658 12.5117 12.5181 12.5117 11.9658C12.5117 11.4135 12.064 10.9658 11.5117 10.9658C10.9594 10.9658 10.5117 11.4135 10.5117 11.9658C10.5117 12.5181 10.9594 12.9658 11.5117 12.9658ZM16.0156 14.9668C16.0156 15.5191 15.5679 15.9668 15.0156 15.9668C14.4633 15.9668 14.0156 15.5191 14.0156 14.9668C14.0156 14.4145 14.4633 13.9668 15.0156 13.9668C15.5679 13.9668 16.0156 14.4145 16.0156 14.9668ZM15.0156 12.9658C15.5679 12.9658 16.0156 12.5181 16.0156 11.9658C16.0156 11.4135 15.5679 10.9658 15.0156 10.9658C14.4633 10.9658 14.0156 11.4135 14.0156 11.9658C14.0156 12.5181 14.4633 12.9658 15.0156 12.9658Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconEduMathematics'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconEduMathematics';
+</style>

package/src/components/Icons/IconEduScience.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="IconEduScience"
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.71182 2.48779H19.3927V4.665H18.2382V11.0285L23.2444 18.2567L23.4331 18.5399V22.5583H5.67145V20.7463C5.51297 20.7682 5.34772 20.7796 5.17572 20.7796C3.96651 20.7796 3.04916 20.2699 2.46868 19.414C1.91891 18.6033 1.71959 17.5565 1.71959 16.5164L1.72071 8.20572H0.566406V6.02851H9.67005V8.20572H8.51553L8.5146 14.424L10.8662 11.0285V4.665H9.71182V2.48779ZM3.89784 11.9068L3.89679 16.5164C3.89679 16.5164 3.89679 16.5163 3.89679 16.5164C3.89682 17.2272 4.03925 17.777 4.26295 18.1225C4.45939 18.4259 4.731 18.6024 5.17572 18.6024C5.42935 18.6024 5.71436 18.4161 5.98367 17.8695C6.23969 17.3499 6.33509 16.7765 6.33718 16.605L6.33722 16.3815L6.33826 11.9068H3.89784ZM13.0434 4.665V11.7011L12.8546 11.9842L11.4365 14.0319H17.6716L16.2535 11.9842L16.0647 11.7011V4.665H13.0434ZM7.84865 19.2481V20.3811H21.2559V19.2124L19.1765 16.2091H9.92812L7.9344 19.0886C7.90723 19.1421 7.87868 19.1953 7.84865 19.2481ZM6.33844 9.72963V8.20572H3.89802V9.72963H6.33844Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconEduScience'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconEduScience';
+</style>

package/src/components/Icons/IconEduTechnology.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="IconEduTechnology"
+    width="24"
+    height="25"
+    viewBox="0 0 24 25"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.64604 2.54883H7.47264V4.84241H4.31897V7.99608H2.02539V10.1695H4.31897V11.4364H2.02539V13.6098H4.31897V14.8768H2.02539V17.0502H4.31897V20.2039H7.47264V22.4975H9.64604V20.2039H10.913V22.4975H13.0864V20.2039H14.3534V22.4975H16.5268V20.2039H19.6804V17.0502H21.974V14.8768H19.6804V13.6098H21.974V11.4364H19.6804V10.1695H21.974V7.99608H19.6804V4.84241H16.5268V2.54883H14.3534V4.84241H13.0864V2.54883H10.913V4.84241H9.64604V2.54883ZM9.96367 18.0305H6.49236V7.0158H9.93633L9.93633 10.7377H9.14742V10.785C8.95858 10.5817 8.68896 10.4546 8.38965 10.4546C7.81849 10.4546 7.35547 10.9176 7.35547 11.4888C7.35547 12.0599 7.81849 12.5229 8.38965 12.5229C8.75915 12.5229 9.08339 12.3292 9.26629 12.0377H11.2363L11.2363 7.0158H12.5762L12.5762 10.4923L14.6458 10.4923C14.8354 10.7266 15.1253 10.8765 15.4502 10.8765C16.0214 10.8765 16.4844 10.4134 16.4844 9.84229C16.4844 9.27112 16.0214 8.80811 15.4502 8.80811C15.1253 8.80811 14.8354 8.95794 14.6458 9.19229L13.8762 9.19229L13.8762 7.0158H17.507V18.0305H14.0656V13.9937H14.8545V13.9465C15.0434 14.1497 15.313 14.2769 15.6123 14.2769C16.1835 14.2769 16.6465 13.8138 16.6465 13.2427C16.6465 12.6715 16.1835 12.2085 15.6123 12.2085C15.2428 12.2085 14.9186 12.4023 14.7357 12.6938H12.7656L12.7656 18.0305H11.2637V14.2392H9.19407C9.00448 14.0048 8.71456 13.855 8.38965 13.855C7.81849 13.855 7.35547 14.318 7.35547 14.8892C7.35547 15.4603 7.81849 15.9233 8.38965 15.9233C8.71456 15.9233 9.00448 15.7735 9.19407 15.5392H9.96367L9.96367 18.0305Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconEduTechnology'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconEduTechnology';
+</style>

package/src/components/Icons/Icons.stories.ts

@@ -48,11 +48,16 @@ import IconSocialReddit from './IconSocialReddit.vue'
 import IconSocialTwitter from './IconSocialTwitter.vue'
 import IconSocialYoutube from './IconSocialYoutube.vue'
 import IconStop from './IconStop.vue'
-import IconSubject from './IconSubject.vue'
 import IconTime from './IconTime.vue'
 import IconUniversity from './IconUniversity.vue'
 import IconUser from './IconUser.vue'
 import IconVolume from './IconVolume.vue'
+import IconEduArt from './IconEduArt.vue'
+import IconEduEnglishLanguageArts from './IconEduEnglishLanguageArts.vue'
+import IconEduEngineering from './IconEduEngineering.vue'
+import IconEduMathematics from './IconEduMathematics.vue'
+import IconEduScience from './IconEduScience.vue'
+import IconEduTechnology from './IconEduTechnology.vue'
 
 export default {
   title: 'Foundations/Icons',
@@ -111,7 +116,9 @@ export default {
     IconTime,
     IconUniversity,
     IconUser,
-    IconVolume
+    IconVolume,
+    IconEduMathematics,
+    IconEduScience
   },
   parameters: {
     docs: {
@@ -441,15 +448,45 @@ export const Profile = {
     template: '<IconProfile />'
   })
 }
-export const Subject = {
-  render: () => ({
-    components: { IconSubject },
-    template: '<IconSubject />'
-  })
-}
 export const Volume = {
   render: () => ({
     components: { IconVolume },
     template: '<IconVolume />'
   })
 }
+export const EduArt = {
+  render: () => ({
+    components: { IconEduArt },
+    template: '<IconEduArt />'
+  })
+}
+export const EduEngineering = {
+  render: () => ({
+    components: { IconEduEngineering },
+    template: '<IconEduEngineering />'
+  })
+}
+export const EduEnglishLanguageArts = {
+  render: () => ({
+    components: { IconEduEnglishLanguageArts },
+    template: '<IconEduEnglishLanguageArts />'
+  })
+}
+export const EduMathematics = {
+  render: () => ({
+    components: { IconEduMathematics },
+    template: '<IconEduMathematics />'
+  })
+}
+export const EduScience = {
+  render: () => ({
+    components: { IconEduScience },
+    template: '<IconEduScience />'
+  })
+}
+export const EduTechnology = {
+  render: () => ({
+    components: { IconEduTechnology },
+    template: '<IconEduTechnology />'
+  })
+}

package/src/components/MetaPanelItems/MetaPanelItems.vue

@@ -7,7 +7,8 @@ import {
   EduResourcesGradeLevel,
   EduResourcesTime
 } from './../../interfaces'
-import IconSubject from './../Icons/IconSubject.vue'
+
+import EduSubjectIcon from './../EduSubjectIcon/EduSubjectIcon.vue'
 import IconProfile from './../Icons/IconProfile.vue'
 import IconTime from './../Icons/IconTime.vue'
 
@@ -96,7 +97,10 @@ const themeVariant = computed(() => {
         class="MetaPanelItem-icon"
         :class="iconColor"
       >
-        <IconSubject class="text-[2em] md:text-[2.4em]" />
+        <EduSubjectIcon
+          :subject="primarySubject?.subject"
+          class="text-[1.3em] md:text-[1.6em]"
+        />
       </div>
       <div>
         <div

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { EduResourceCardObject } from './../../interfaces.ts'
-import IconSubject from './../Icons/IconSubject.vue'
+import EduSubjectIcon from './../EduSubjectIcon/EduSubjectIcon.vue'
 import IconProfile from './../Icons/IconProfile.vue'
 import IconTime from './../Icons/IconTime.vue'
 import {} from './../../utils/mixins'
@@ -42,14 +42,18 @@ const time = computed(() => {
 <template>
   <div
     class="MetadataEduResource"
-    :class="{ '-compact text-sm xl:text-base': props.compact, 'text-body-lg': !props.compact }"
+    :class="{
+      '-compact text-sm xl:text-base': props.compact,
+      'text-body-lg': !props.compact
+    }"
   >
     <div
       v-if="primarySubject"
       class="MetadataEduResourceItem"
     >
-      <IconSubject
-        class="MetadataEduResourceIcon text-[1.25em]"
+      <EduSubjectIcon
+        :subject="primarySubject"
+        class="MetadataEduResourceIcon text-[.85em] -mt-px"
         :class="iconClass"
       />
       <span>

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -3,7 +3,8 @@
     v-if="enabled"
     id="NavJumpMenu"
     ref="NavJumpMenuRef"
-    class="NavJumpMenu -hide-until-threshold"
+    class="NavJumpMenu"
+    :class="{ '-ready': initialized }"
     :invert="invert"
     jump-menu
   >
@@ -36,7 +37,7 @@
   </NavSecondary>
 </template>
 <script setup lang="ts">
-import { computed, defineExpose, ref, onMounted, watch } from 'vue'
+import { computed, defineExpose, ref, onMounted, onUnmounted, watch } from 'vue'
 import { mixinUpdateSecondary } from './../../utils/mixins'
 import { useRoute } from 'vue-router'
 import NavSecondary from './../NavSecondary/NavSecondary.vue'
@@ -72,6 +73,8 @@ const props = withDefaults(defineProps<NavJumpMenuProps>(), {
   // stepClasses: 'text-primary'
 })
 
+const initialized = ref(false)
+
 const NavJumpMenuRef = ref()
 
 const theJumpLinks = computed(() => {
@@ -100,6 +103,10 @@ const theJumpLinks = computed(() => {
   return []
 })
 
+const initializeJumpMenu = () => {
+  initialized.value = true
+}
+
 const theBreadcrumbs = computed(() => {
   let breadcrumb = undefined
   const rootItem = props.title
@@ -127,6 +134,11 @@ defineExpose({
 })
 onMounted(() => {
   mixinUpdateSecondary(theBreadcrumbs.value, true)
+  // ensures jump menu isn't visible during route changes
+  setTimeout(initializeJumpMenu, 500)
+})
+onUnmounted(() => {
+  initialized.value = false
 })
 
 const route = useRoute()
@@ -142,12 +154,9 @@ watch(
 </script>
 <style lang="scss">
 .NavJumpMenu {
-  &.-hide-until-threshold {
-    @apply opacity-0 h-0 transition-none overflow-visible pointer-events-none;
-    &.-is-sticky,
-    &.-is-sticky-offset {
-      @apply opacity-100 transition-all pointer-events-auto;
-    }
+  @apply invisible transition-all overflow-visible -mb-[3.7rem] z-30 fixed #{!important};
+  &.-ready {
+    @apply visible #{!important};
   }
   .NavSecondaryLink.secondary-root {
     span {

package/src/components/NavSecondary/NavSecondary.vue

@@ -6,7 +6,8 @@
     class="NavSecondary"
     :class="{
       'has-intro': hasIntro,
-      '!bg-transparent': invert
+      '!bg-transparent border-none': invert,
+      '-scrolled-up': scrollDirection === 'up'
     }"
   >
     <div
@@ -14,7 +15,7 @@
       :class="{ 'bg-gradient-to-r from-black to-primary bg-transparent to-90% text-white': invert }"
     >
       <div
-        :class="`nav-secondary-container edu:border-0 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'}`"
+        :class="`nav-secondary-container edu:border-0 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">
@@ -90,12 +91,16 @@ export default defineComponent({
     stickyElement?: HTMLElement
     observer?: IntersectionObserver
     observerOffset?: IntersectionObserver
+    scrollDirection?: string
+    posY: number
   } {
     return {
       isSticky: false,
       stickyElement: undefined,
       observer: undefined,
-      observerOffset: undefined
+      observerOffset: undefined,
+      scrollDirection: undefined,
+      posY: 0
     }
   },
   computed: {
@@ -127,6 +132,7 @@ export default defineComponent({
       if (!this.jumpMenu) {
         mixinHighlightPrimary(false)
       }
+      window.addEventListener('scroll', this.handleScroll)
     }
 
     if (
@@ -140,6 +146,9 @@ export default defineComponent({
       this.checkSticky()
     }
   },
+  unmounted() {
+    window.removeEventListener('scroll', this.handleScroll)
+  },
   methods: {
     isExternal(path: string): boolean {
       if (path && path.startsWith('http')) {
@@ -147,20 +156,21 @@ export default defineComponent({
       }
       return false
     },
+    handleScroll() {
+      var scrollY = window.scrollY
+      if (scrollY > this.posY) {
+        this.scrollDirection = 'down'
+      } else {
+        this.scrollDirection = 'up'
+      }
+      this.posY = scrollY
+    },
     initIntersectionObservers() {
       this.stickyElement = this.$refs.NavSecondary as HTMLElement
       this.observer = new IntersectionObserver(
         ([e]) => {
           e.target.classList.toggle('-is-sticky', e.intersectionRatio === 0)
         },
-        {
-          threshold: [0]
-        }
-      )
-      this.observerOffset = new IntersectionObserver(
-        ([e]) => {
-          e.target.classList.toggle('-is-sticky-offset', e.intersectionRatio === 0)
-        },
         {
           threshold: [0],
           rootMargin: this.themeStore.isEdu ? '-73px 0px 0px 0px' : '-113px 0px 0px 0px'
@@ -170,7 +180,6 @@ export default defineComponent({
     checkSticky() {
       if (this.stickyElement) {
         if (this.observer) this.observer.observe(this.stickyElement)
-        if (this.observerOffset) this.observerOffset.observe(this.stickyElement)
       }
     }
   }
@@ -180,7 +189,6 @@ export default defineComponent({
 .NavSecondary {
   top: -1px; // for intersection observer to work
   @apply sticky z-40 w-full bg-white border-b border-gray-mid border-opacity-0 transition-border-opacity duration-150 edu:duration-300 ease-in;
-  @apply hidden;
   @screen lg {
     @apply block;
   }
@@ -191,8 +199,7 @@ export default defineComponent({
     }
   }
 
-  &.-is-sticky,
-  &.-is-sticky-offset {
+  &.-is-sticky {
     @apply border-gray-mid border-opacity-50;
   }
 
@@ -216,17 +223,16 @@ export default defineComponent({
   // change sticky point if global nav is showing
   .header-sticky-showing & {
     @apply top-18;
+    @screen lg {
+      @apply top-28;
+    }
 
-    &.-is-sticky-offset {
-      @apply border-gray-mid border-opacity-50 transition-all;
-
+    &.-scrolled-up {
+      @apply border-gray-mid border-opacity-50;
       .nav-secondary-container {
         @apply border-gray-mid border-opacity-50;
       }
     }
-    @screen lg {
-      @apply top-28;
-    }
   }
 }
 // since we depend on a body class, the edu: prefix won't work as usual and requires the below line

package/src/components/ShareButtonsEdu/ShareButtonsEdu.vue

@@ -89,7 +89,7 @@ const buttonClass = computed(() => {
 })
 </script>
 <template>
-  <div class="ShareButtonsEdu relative z-30 flex flex-row items-start border-collapse print:hidden">
+  <div class="ShareButtonsEdu relative z-20 flex flex-row items-start border-collapse print:hidden">
     <BaseButton
       variant="social"
       :class="buttonClass"

package/src/templates/edu/PageEduCollectionsDetail/PageEduCollectionsDetail.vue

@@ -54,6 +54,14 @@ const computedClass = computed((): string => {
     class="ThemeEdu ThemeVariantLight"
     :class="computedClass"
   >
+    <NavJumpMenu
+      v-if="data.showJumpMenu && !data.breadcrumb"
+      ref="PageEduCollectionsDetailJumpMenu"
+      :title="data.title"
+      :blocks="data.body"
+      dropdown-text="In this collection"
+    />
+
     <!-- hero large -->
     <HeroLarge
       v-if="!heroInline && data.heroImage"
@@ -72,14 +80,6 @@ const computedClass = computed((): string => {
       :has-intro="data.heroImage && !heroInline ? true : false"
     />
 
-    <NavJumpMenu
-      v-if="data.showJumpMenu && !data.breadcrumb"
-      ref="PageEduCollectionsDetailJumpMenu"
-      :title="data.title"
-      :blocks="data.body"
-      dropdown-text="In this collection"
-    />
-
     <LayoutHelper
       v-if="heroInline || !data.heroImage"
       indent="col-2"

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -98,6 +98,14 @@ export default defineComponent({
       itemprop="image"
       :content="data.thumbnailImage.original"
     />
+
+    <NavJumpMenu
+      v-if="data.showJumpMenu"
+      :title="data.title"
+      :blocks="data.body"
+      dropdown-text="In this article"
+    />
+
     <!-- hero title -->
     <HeroLarge
       v-if="heroTitle && theHero"
@@ -149,15 +157,7 @@ export default defineComponent({
         :image="data.thumbnailImage?.original"
       />
     </LayoutHelper>
-
-    <NavJumpMenu
-      v-if="data.showJumpMenu"
-      :title="data.title"
-      :blocks="data.body"
-      dropdown-text="In this article"
-    />
     <!-- inline hero content -->
-
     <LayoutHelper
       v-if="!heroEmpty && heroInline"
       indent="col-2"

package/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue

@@ -69,6 +69,12 @@ const { data } = reactive(props)
     itemscope
     itemtype="http://schema.org/MediaGallery"
   >
+    <NavJumpMenu
+      v-if="data.showJumpMenu && jumpMenuHeadings?.length"
+      :title="data.title"
+      :jump-links="jumpMenuHeadings"
+    />
+
     <!-- Detail Headline -->
     <LayoutHelper
       indent="col-2"
@@ -97,12 +103,6 @@ const { data } = reactive(props)
       />
     </LayoutHelper>
 
-    <NavJumpMenu
-      v-if="data.showJumpMenu && jumpMenuHeadings?.length"
-      :title="data.title"
-      :jump-links="jumpMenuHeadings"
-    />
-
     <div
       v-for="(item, index) in data.galleryItems"
       :id="headingIdGetter(item.blockId)"

package/src/templates/edu/PageEduLesson/PageEduLesson.vue

@@ -285,6 +285,13 @@ const computedClass = computed((): string => {
     class="ThemeVariantLight"
     :class="computedClass"
   >
+    <NavJumpMenu
+      ref="PageEduLessonJumpMenu"
+      :title="data.title"
+      :blocks="consolidatedBlocks"
+      dropdown-text="In this lesson"
+    />
+
     <!-- hero title -->
     <HeroLarge
       v-if="heroTitle && theHero"
@@ -365,13 +372,6 @@ const computedClass = computed((): string => {
       />
     </LayoutHelper>
 
-    <NavJumpMenu
-      ref="PageEduLessonJumpMenu"
-      :title="data.title"
-      :blocks="consolidatedBlocks"
-      dropdown-text="In this lesson"
-    />
-
     <template
       v-for="(value, _key) in consolidatedSections"
       :key="_key"

package/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import type {
   ImageObject,
   PageEduResourcesObject,
@@ -26,7 +27,7 @@ import AboutTheAuthor from './../../../components/AboutTheAuthor/AboutTheAuthor.
 
 import { HeadingLevel } from '../../../components/BaseHeading/BaseHeading.vue'
 import StudentProjectBadge from '@explorer-1/common/src/images/svg/student-project-badge.svg'
-
+const route = useRoute()
 interface EduStudentProjectSectionObject extends PageEduStudentProjectSectionProps {
   type?: string
 }
@@ -243,6 +244,18 @@ const computedClass = computed((): string => {
     class="ThemeVariantLight PageEduStudentProject"
     :class="computedClass"
   >
+    <NavJumpMenu
+      v-if="stepHeadings?.length"
+      :key="route.fullPath"
+      ref="PageEduStudentProjectJumpMenu"
+      :title="data.title"
+      :blocks="stepHeadings"
+      dropdown-text="Project Steps"
+      heading-level="h3"
+      :steps-numbering="true"
+      steps-classes="text-secondary"
+    />
+
     <!-- hero title -->
     <HeroLarge
       v-if="heroTitle && theHero"
@@ -371,17 +384,6 @@ const computedClass = computed((): string => {
       />
     </LayoutHelper>
 
-    <NavJumpMenu
-      v-if="stepHeadings?.length"
-      ref="PageEduStudentProjectJumpMenu"
-      :title="data.title"
-      :blocks="stepHeadings"
-      dropdown-text="Project Steps"
-      heading-level="h3"
-      :steps-numbering="true"
-      steps-classes="text-secondary"
-    />
-
     <template
       v-for="(value, _key) in consolidatedSections"
       :key="_key"

package/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.vue

@@ -92,6 +92,7 @@ const computedClass = computed((): string => {
       :blocks="data.body"
       dropdown-text="In this Teachable Moment"
     />
+
     <!-- hero title -->
     <HeroLarge
       v-if="heroTitle && theHero"

package/src/components/Icons/IconSubject.vue

@@ -1,38 +0,0 @@
-<template>
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    width="46"
-    height="41"
-    viewBox="0 0 46 41"
-    fill="none"
-    class="IconSubject"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g>
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M19.432 29.3991C20.5448 29.4683 21.6743 29.5115 22.8336 29.5115C23.9891 29.5115 25.1213 29.4766 26.2281 29.4074C25.1136 30.9099 23.9719 32.2618 22.8336 33.4488C21.6948 32.2585 20.5504 30.9038 19.432 29.3991ZM34.3335 28.2116C34.5576 29.0992 34.7452 29.9614 34.8692 30.7715C35.1713 32.7687 35.1664 34.5013 34.872 35.8239C34.2981 38.432 32.125 39.2427 30.047 38.6108C28.7499 38.2162 27.2452 37.3452 25.6686 36.0829C25.0289 35.5705 24.3754 34.9761 23.7207 34.3425C25.1241 32.8788 26.5225 31.1777 27.865 29.2813C30.1881 29.0649 32.3618 28.6986 34.3335 28.2116ZM32.2002 22.0292C32.9467 23.7496 33.546 25.4192 34.0076 27.0046C32.4077 27.3964 30.6585 27.7047 28.7997 27.9205C29.4134 26.9897 30.0182 26.0323 30.5976 25.0268C31.1803 24.0241 31.7044 23.0236 32.2002 22.0292ZM13.4654 22.0269C13.9612 23.0208 14.4891 24.0241 15.068 25.0268C15.6474 26.0323 16.2528 26.9897 16.8665 27.9177C15.0043 27.7014 13.2606 27.3876 11.6586 26.9952C12.1201 25.4126 12.7227 23.7447 13.4654 22.0269ZM10.4461 14.4201C11.0106 16.3664 11.7831 18.4233 12.7543 20.5361C11.7798 22.6573 11.01 24.7214 10.4461 26.6721C9.56678 26.4241 8.7284 26.1563 7.96362 25.8569C6.08212 25.122 4.58576 24.2482 3.5858 23.3318C1.61132 21.5278 1.99482 19.2479 3.5858 17.7604C4.57746 16.8351 6.08212 15.9707 7.96362 15.2353C8.72785 14.9392 9.56678 14.6708 10.4461 14.4201ZM28.8107 13.175C30.6701 13.3914 32.4077 13.7057 34.0042 14.0975C33.5433 15.6802 32.944 17.3464 32.2002 19.0641C31.7044 18.0691 31.1798 17.0697 30.5976 16.0664C30.0215 15.0659 29.4244 14.1003 28.8107 13.175ZM16.867 13.175C16.2533 14.103 15.6474 15.0604 15.0685 16.0659C14.4925 17.0664 13.9562 18.0631 13.4637 19.0553C12.72 17.3403 12.1234 15.6774 11.6619 14.0975C13.2645 13.7057 15.0082 13.3908 16.867 13.175ZM22.8336 12.8347C24.3233 12.8347 25.7787 12.8983 27.1794 13.014C27.984 14.1728 28.7681 15.3974 29.5141 16.6918C30.2584 17.9828 30.9324 19.2744 31.5317 20.5483C30.9319 21.8189 30.2578 23.1099 29.5141 24.4043C28.7681 25.6926 27.9867 26.92 27.1854 28.076C25.7815 28.1944 24.3289 28.2575 22.8336 28.2575C21.34 28.2575 19.888 28.1972 18.484 28.0821C17.6827 26.9227 16.9024 25.6953 16.1554 24.4043C15.4089 23.1132 14.7371 21.8216 14.1355 20.5511C14.7404 19.2766 15.4089 17.9856 16.1554 16.6912C16.9024 15.3968 17.6827 14.1689 18.484 13.0134C19.888 12.8983 21.34 12.8347 22.8336 12.8347ZM22.8364 7.64116C23.978 8.83205 25.1185 10.1895 26.2375 11.6941C25.1246 11.625 23.9952 11.5785 22.8342 11.5785C21.6748 11.5785 20.5454 11.625 19.4325 11.6941C20.5504 10.1895 21.6948 8.83149 22.8364 7.64116ZM34.8725 5.26935C35.1807 6.58918 35.1719 8.32404 34.8697 10.3212C34.7458 11.1314 34.5582 11.9963 34.3341 12.8839C32.3684 12.3997 30.1975 12.0361 27.8827 11.8203C26.5336 9.91502 25.1307 8.21779 23.724 6.75021C24.3781 6.11382 25.0295 5.52225 25.6692 5.01258C27.2463 3.75031 28.7593 2.90529 30.0475 2.4814C32.5206 1.66959 34.3651 3.08791 34.8725 5.26935ZM9.57508 4.98989C9.21538 6.53439 9.23807 8.41092 9.55793 10.5149C9.68686 11.3737 9.88332 12.2791 10.1163 13.2065C9.19712 13.4694 8.31558 13.7516 7.50819 14.0687C5.52541 14.8412 3.88518 15.7577 2.72971 16.8417C0.264935 19.1565 0.587559 22.2455 2.72971 24.2521C3.88795 25.3356 5.52541 26.252 7.50819 27.0279C10.3183 28.123 13.855 28.9072 17.7951 29.273C19.1409 31.1755 20.5415 32.8761 21.9482 34.3431C21.2908 34.9767 20.6361 35.571 19.9964 36.0835C18.4198 37.3457 16.9124 38.2018 15.618 38.6113C13.1306 39.3955 11.3415 38.0203 10.8219 35.9396C10.5114 34.6801 10.4876 33.0199 10.7505 31.1119L9.50535 30.9392C9.22866 32.9563 9.23143 34.7553 9.6033 36.2329C10.4101 39.4558 13.2462 40.6428 15.9899 39.8072C17.5062 39.349 19.1199 38.3916 20.7833 37.063C21.4607 36.5212 22.1469 35.8986 22.8336 35.2329C23.5215 35.8986 24.2077 36.5212 24.8856 37.063C26.5457 38.3916 28.1594 39.349 29.6757 39.8072C32.9124 40.7867 35.4287 38.9633 36.0938 36.1039C36.4546 34.5589 36.4308 32.6851 36.1115 30.5806C35.6567 27.5973 34.5637 24.142 32.9124 20.5483C33.8831 18.4299 34.6561 16.3691 35.2211 14.4201C36.0999 14.6708 36.9416 14.9392 37.7025 15.2358C39.5846 15.9707 41.0831 16.8445 42.0837 17.7609C44.0089 19.5251 43.715 21.7586 42.1667 23.2516C41.2326 24.1536 39.8093 25.0014 38.0251 25.7302L38.5005 26.8912C40.3853 26.1214 41.9359 25.2233 43.0344 24.1619C45.4206 21.8532 45.0315 18.8035 42.9359 16.8412C41.7776 15.7571 40.1435 14.8407 38.1602 14.0682C37.3506 13.7516 36.4712 13.4689 35.5493 13.206C35.7828 12.2785 35.9787 11.3732 36.1115 10.5143C36.4308 8.40981 36.4546 6.53384 36.0938 4.98934C35.3219 1.69781 32.4858 0.432772 29.6757 1.28554C28.1594 1.74651 26.5457 2.70054 24.8856 4.03199C22.5315 5.9146 20.0839 8.58911 17.7956 11.8198C15.478 12.0361 13.3054 12.3964 11.3332 12.8834C11.1113 11.9957 10.9242 11.1308 10.8003 10.3206C10.4948 8.32348 10.5003 6.59194 10.7942 5.2688C11.3592 2.72046 13.446 1.85608 15.5096 2.44931C16.7575 2.80735 18.2073 3.61639 19.7297 4.79898L20.4994 3.80731C18.8908 2.55666 17.3258 1.68895 15.8643 1.24459C12.777 0.30328 10.2264 2.19088 9.57508 4.98989Z"
-        fill="currentColor"
-        stroke="currentColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M22.8301 17.3904C24.5826 17.3904 25.9888 18.7976 25.9888 20.5496C25.9888 22.2989 24.5826 23.7056 22.8301 23.7056C21.0775 23.7056 19.673 22.2989 19.673 20.5496C19.6736 18.7976 21.0775 17.3904 22.8301 17.3904ZM22.8301 16.1309C20.3996 16.1309 18.4141 18.117 18.4141 20.5502C18.4141 22.9801 20.4002 24.9596 22.8301 24.9596C25.26 24.9596 27.2422 22.9795 27.2422 20.5502C27.2422 18.117 25.26 16.1309 22.8301 16.1309Z"
-        fill="currentColor"
-        stroke="currentColor"
-      />
-    </g>
-  </svg>
-</template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'IconSubject'
-})
-</script>
-<style lang="scss">
-@import '@explorer-1/common/src/scss/components/IconSubject';
-</style>