From 83e8262667763335f3e73ee9a98dedc0b6eae46c Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephiescastle@users.noreply.github.com>
Date: Thu, 18 Jul 2024 12:22:34 -0700
Subject: [PATCH] Feature: EDU header and footer (#497)

* adding edu main navigation desktop and mobile

* showing social icons in defaultTheme NavMobile only

* minor cleanup

* edu modifications to TheFooter

* removing unneeded stories

* adding edu social links to footer

* updating a header in the edu footer

* minor cleanup

* removing iniline test
---
 apps/vue-storybook/package.json               |   2 +-
 packages/common/tailwind.colors.ts            |  24 +-
 packages/vue/lib/main.ts                      |   4 +-
 .../NavDesktop/NavDesktopDropdown.vue         |  20 +-
 .../NavDesktop/NavDesktopDropdownContent.vue  |   2 +-
 .../NavDesktopEdu/NavDesktopEdu.stories.js    | 186 +++++++++++
 .../NavDesktopEdu/NavDesktopEdu.vue           | 315 ++++++++++++++++++
 .../NavDropdownToggle.vue}                    |   4 +-
 .../src/components/NavHeading/NavHeading.vue  |   4 +-
 .../NavLogoLinks/NavLogoLinks.stories.js      |   5 +-
 .../components/NavLogoLinks/NavLogoLinks.vue  |   1 -
 .../src/components/NavMobile/NavMobile.vue    |  55 ++-
 .../NavMobile/NavMobileDropdown.vue           |   8 +-
 .../NavMobile/NavMobileEdu.stories.js         | 174 ++++++++++
 .../NavMobile/NavMobileSecondaryDropdown.vue  |  10 +-
 .../NavSecondary/NavSecondaryDropdown.vue     |  10 +-
 .../src/components/NavSocial/NavSocial.vue    | 112 ++++---
 .../src/components/TheFooter/TheFooter.vue    |  46 ++-
 .../docs/overviews/global_headers.docs.mdx    |   8 +
 .../edu/PageEduNewsDetail.stories.js          |   5 +
 .../src/templates/edu/PageEduNewsDetail.vue   |   2 +-
 21 files changed, 881 insertions(+), 116 deletions(-)
 create mode 100644 packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.stories.js
 create mode 100644 packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue
 rename packages/vue/src/components/{MixinDropdownToggle/MixinDropdownToggle.vue => NavDropdownToggle/NavDropdownToggle.vue} (92%)
 create mode 100644 packages/vue/src/components/NavMobile/NavMobileEdu.stories.js

diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index 8b750405..041140e7 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -17,7 +17,7 @@
     "prepare": "pnpm prepare:public && pnpm prepare:fontcss",
     "prepare:public": "cp -R ./node_modules/@explorer-1/common/src/public/explorer-1/ ./public/explorer-1",
     "prepare:fontcss": "cp ./node_modules/@explorer-1/common/src/scss/_fonts.scss ./public/css/font-face.css",
-    "storybook": "storybook dev -c .storybook -p 6006 --ci --force-build-preview",
+    "storybook": "storybook dev -c .storybook -p 6006 --ci",
     "build": "storybook build -c .storybook -o storybook_compiled NODE_ENV='production'",
     "percy": "percy storybook http://localhost:6006",
     "percy:dry-run": "percy storybook http://localhost:6006 --dry-run",
diff --git a/packages/common/tailwind.colors.ts b/packages/common/tailwind.colors.ts
index 412a8df7..99fa2209 100644
--- a/packages/common/tailwind.colors.ts
+++ b/packages/common/tailwind.colors.ts
@@ -140,16 +140,19 @@ export const socialColors = {
 // custom css vars
 export const themeVariantColors = {
   primary: 'var(--color-primary)',
+  'primary-lighter': 'var(--color-primary-lighter)',
   'primary-light': 'var(--color-primary-light)',
   'primary-dark': 'var(--color-primary-dark)',
   'primary-darker': 'var(--color-primary-darker)',
   'primary-hover': 'var(--color-primary-dark)',
   secondary: 'var(--color-secondary)',
+  'secondary-lighter': 'var(--color-secondary-lighter)',
   'secondary-light': 'var(--color-secondary-light)',
   'secondary-dark': 'var(--color-secondary-dark)',
   'secondary-darker': 'var(--color-secondary-darker)',
   'secondary-hover': 'var(--color-secondary-dark)',
   action: 'var(--color-action)',
+  'action-lighter': 'var(--color-action-lighter)',
   'action-light': 'var(--color-action-light)',
   'action-dark': 'var(--color-action-dark)',
   'action-darker': 'var(--color-action-darker)',
@@ -160,44 +163,53 @@ export const themeVariantColors = {
 export const ThemeWww = {
   default: {
     '--color-primary': foundationColors['jpl-red'],
+    '--color-primary-lighter': foundationColors['jpl-red-lighter'],
     '--color-primary-light': foundationColors['jpl-red-light'],
     '--color-primary-dark': foundationColors['jpl-red-dark'],
     '--color-primary-darker': foundationColors['jpl-red-darker'],
     '--color-secondary': 'var(--color-primary)',
+    '--color-secondary-lighter': 'var(--color-primary-lighter)',
     '--color-secondary-light': 'var(--color-primary-light)',
     '--color-secondary-dark': 'var(--color-primary-dark)',
     '--color-secondary-darker': 'var(--color-primary-darker)',
     '--color-action': 'var(--color-primary)',
+    '--color-action-lighter': 'var(--color-primary-lighter)',
     '--color-action-light': 'var(--color-primary-light)',
     '--color-action-dark': 'var(--color-primary-dark)',
     '--color-action-darker': 'var(--color-primary-darker)'
   },
   dark: {
     '--color-primary': foundationColors['jpl-red-light'],
+    '--color-primary-lighter': foundationColors['jpl-red-lighter'],
     '--color-primary-light': foundationColors['jpl-red-light'],
     '--color-primary-dark': foundationColors['jpl-red'],
     '--color-primary-darker': foundationColors['jpl-red-dark'],
     '--color-secondary': 'var(--color-primary)',
+    '--color-secondary-lighter': 'var(--color-primary-lighter)',
     '--color-secondary-light': 'var(--color-primary-light)',
     '--color-secondary-dark': 'var(--color-primary-dark)',
     '--color-secondary-darker': 'var(--color-primary-darker)',
     '--color-action': 'var(--color-primary)',
+    '--color-action-lighter': 'var(--color-primary-lighter)',
     '--color-action-light': 'var(--color-primary-light)',
     '--color-action-dark': 'var(--color-primary-dark)',
     '--color-action-darker': 'var(--color-primary-darker)'
   },
   gray: {
     '--color-primary': foundationColors['jpl-red-dark'],
+    '--color-primary-lighter': foundationColors['jpl-red-light'],
     '--color-primary-light': foundationColors['jpl-red'],
     '--color-primary-dark': foundationColors['jpl-red-darker'],
     '--color-primary-darker': foundationColors['jpl-red-darker'],
-    '--color-secondary': 'var(--color-primary)',
-    '--color-secondary-light': 'var(--color-primary-light)',
-    '--color-secondary-dark': 'var(--color-primary-dark)',
+    '--color-secondary': 'var(--color-secondary-dark)',
+    '--color-secondary-lighter': 'var(--color-primary-light)',
+    '--color-secondary-light': 'var(--color-primary)',
+    '--color-secondary-dark': 'var(--color-primary-darker)',
     '--color-secondary-darker': 'var(--color-primary-darker)',
-    '--color-action': 'var(--color-primary)',
-    '--color-action-light': 'var(--color-primary-light)',
-    '--color-action-dark': 'var(--color-primary-dark)',
+    '--color-action': 'var(--color-action-dark)',
+    '--color-action-lighter': 'var(--color-action-light)',
+    '--color-action-light': 'var(--color-action)',
+    '--color-action-dark': 'var(--color-primary-darker)',
     '--color-action-darker': 'var(--color-primary-darker)'
   }
 }
diff --git a/packages/vue/lib/main.ts b/packages/vue/lib/main.ts
index bbf3d7a7..fbde193d 100644
--- a/packages/vue/lib/main.ts
+++ b/packages/vue/lib/main.ts
@@ -161,7 +161,7 @@ import MissionDetailStats from './../src/components/MissionDetailStats/MissionDe
 import MissionDetailStreamfield from './../src/components/MissionDetailStreamfield/MissionDetailStreamfield.vue'
 import MixinAnimationCaret from './../src/components/MixinAnimationCaret/MixinAnimationCaret.vue'
 import MixinCarousel from './../src/components/MixinCarousel/MixinCarousel.vue'
-import MixinDropdownToggle from './../src/components/MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavDropdownToggle from './../src/components/NavDropdownToggle/NavDropdownToggle.vue'
 import MixinFancybox from './../src/components/MixinFancybox/MixinFancybox.vue'
 import MixinVideoBg from './../src/components/MixinVideoBg/MixinVideoBg.vue'
 import NavDesktop from './../src/components/NavDesktop/NavDesktop.vue'
@@ -363,7 +363,7 @@ export {
   MissionDetailStreamfield,
   MixinAnimationCaret,
   MixinCarousel,
-  MixinDropdownToggle,
+  NavDropdownToggle,
   MixinFancybox,
   MixinVideoBg,
   NavDesktop,
diff --git a/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue b/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue
index 5849d68d..4c6516a5 100644
--- a/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue
+++ b/packages/vue/src/components/NavDesktop/NavDesktopDropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="NavDesktopDropdown">
-    <MixinDropdownToggle
+    <NavDropdownToggle
       v-click-outside="closeDropdown"
       :aria-expanded="dropdownVisible ? true : false"
       class="group relative z-20 px-4 font-medium border-t-2 border-transparent"
@@ -16,7 +16,7 @@
       >
         <slot name="dropdownLabel">Dropdown</slot>
       </span>
-    </MixinDropdownToggle>
+    </NavDropdownToggle>
 
     <transition name="navfade">
       <div
@@ -39,12 +39,12 @@
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { useHeaderStore } from './../../store/header'
-import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 
 export default defineComponent({
   name: 'NavDesktopDropdown',
   components: {
-    MixinDropdownToggle
+    NavDropdownToggle
   },
   props: {
     parentScrolled: {
@@ -125,27 +125,27 @@ export default defineComponent({
 
     &.-open {
       > span {
-        @apply border-jpl-red;
+        @apply border-primary edu:border-white;
 
         .-transparent & {
           @apply border-white;
         }
 
         .-transparent.-scrolled & {
-          @apply border-jpl-red;
+          @apply border-primary edu:border-white;
         }
       }
     }
     &:hover {
       > span {
-        @apply border-jpl-red;
+        @apply border-primary edu:border-white;
 
         .-transparent & {
           @apply border-white;
         }
 
         .-transparent.-scrolled & {
-          @apply border-jpl-red;
+          @apply border-primary edu:border-white;
         }
       }
     }
@@ -154,14 +154,14 @@ export default defineComponent({
   &.-active {
     > button {
       > span {
-        @apply border-jpl-red font-bold;
+        @apply border-primary edu:border-white font-bold;
 
         .-transparent & {
           @apply border-white;
         }
 
         .-transparent.-scrolled & {
-          @apply border-jpl-red;
+          @apply border-primary edu:border-white;
         }
 
         &.hasSecondary {
diff --git a/packages/vue/src/components/NavDesktop/NavDesktopDropdownContent.vue b/packages/vue/src/components/NavDesktop/NavDesktopDropdownContent.vue
index ab8aefae..f2e6303a 100644
--- a/packages/vue/src/components/NavDesktop/NavDesktopDropdownContent.vue
+++ b/packages/vue/src/components/NavDesktop/NavDesktopDropdownContent.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="NavDesktopDropdownContent bg-jpl-blue-darker bg-opacity-98 3xl:px-0 px-4 py-10 text-white"
+    class="NavDesktopDropdownContent bg-jpl-blue-darker bg-opacity-98 edu:bg-gradient-to-r edu:bg-transparent edu:from-black/[.98] edu:to-jpl-violet/[.98] edu:to-90% 3xl:px-0 px-4 py-10 text-white"
   >
     <div
       v-if="data.menuColumns"
diff --git a/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.stories.js b/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.stories.js
new file mode 100644
index 00000000..2224b1a2
--- /dev/null
+++ b/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.stories.js
@@ -0,0 +1,186 @@
+import { MenuHighlightColumnData } from './../NavHighlight/NavHighlight.stories'
+import { MenuLinkColumnWithHeaderData } from './../NavLinkList/NavLinkList.stories'
+import NavDesktop from './NavDesktopEdu.vue'
+import NavDesktopTopHat from './../NavDesktop/NavDesktopTopHat.vue'
+import NavDesktopDropdown from './../NavDesktop/NavDesktopDropdown.vue'
+import NavDesktopDropdownContent from './../NavDesktop/NavDesktopDropdownContent.vue'
+import NavDesktopDropdownMore from './../NavDesktop/NavDesktopDropdownMore.vue'
+
+export default {
+  title: 'Navigation/Headers/EDU/NavDesktopEdu',
+  component: NavDesktop,
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'canvas'
+  }
+}
+
+export const NavDesktopTopHatData = {
+  topHat: [
+    {
+      linkPage: {
+        title: 'Home',
+        url: '/'
+      },
+      title: 'JPL',
+      path: null
+    },
+    {
+      linkPage: null,
+      title: 'Career',
+      path: 'https://jpl.jobs/'
+    },
+    {
+      linkPage: null,
+      title: 'Science and Technology',
+      path: 'https://scienceandtechnology.jpl.nasa.gov/'
+    }
+  ]
+}
+
+// combined dropdown data
+export const NavDesktopDropdownContentData = {
+  blockType: 'MenuPanel',
+  titleLink: {
+    linkPage: {
+      title: 'About',
+      url: '/about/'
+    },
+    title: null
+  },
+  menuColumns: [
+    MenuHighlightColumnData,
+    {
+      blockType: 'MenuDescriptionColumn',
+      description: 'Lorem ipsum dolor sit amet.',
+      title: 'About'
+    },
+    {
+      ...MenuLinkColumnWithHeaderData,
+      heading: null,
+      headingPage: null
+    },
+    {
+      ...MenuLinkColumnWithHeaderData,
+      heading: null,
+      headingPage: null
+    }
+  ]
+}
+// combined dropdown data for "more" menu
+export const NavDesktopDropdownMoreData = {
+  blockType: 'MenuMorePanel',
+  titleText: 'More',
+  strapline:
+    'JPL is a unique research facility that carries out robotic space and Earth science missions.',
+  menuColumns: [
+    {
+      blockType: 'MenuDescriptionColumn',
+      description: 'Lorem ipsum dolor sit amet.',
+      title: 'About'
+    },
+    {
+      ...MenuLinkColumnWithHeaderData,
+      heading: 'More from JPL',
+      headingPage: null
+    },
+    {
+      ...MenuLinkColumnWithHeaderData,
+      heading: 'Explore Topics',
+      headingPage: null
+    },
+    {
+      blockType: 'MenuMoreHighlightsColumn',
+      heading: 'Discover',
+      headingPage: null,
+      highlights: [MenuHighlightColumnData, MenuHighlightColumnData]
+    }
+  ]
+}
+
+// combined header data // desktop and mobile
+
+export const NavDesktopData = {
+  breadcrumb:
+    '{"/": [{"path": "http://www.jpl.nasa.gov/", "title": "Asteroid watch"}, {"path": "http://www.jpl.nasa.gov/", "title": "Asteroid fast facts"}, {"path": "http://www.jpl.nasa.gov/", "title": "Meteor shower viewing guide"}, {"path": "http://www.jpl.nasa.gov/", "title": "Yeoman\'s top 10"}, {"path": "http://www.jpl.nasa.gov/", "title": "Glossary of space rocks"}, {"path": "/robotics-at-jpl/", "title": "Robotics"}, {"path": "http://www.jpl.nasa.gov/", "title": "Apps"}, {"path": "/jpl-life/", "title": "JPL Life"}, {"path": "/stars-and-galaxies/", "title": "Stars and Galaxies"}, {"path": "/exoplanets/", "title": "Exoplanets"}, {"path": "/solar-system/", "title": "Solar System"}, {"path": "/asteroids/", "title": "Asteroids"}, {"path": "/comets/", "title": "Comets"}, {"path": "/technology/", "title": "Technology"}, {"path": "/mars/", "title": "Mars"}, {"path": "/earth/", "title": "Earth"}, {"path": "/climate-change/", "title": "Climate Change"}, {"path": "/earthquakes/", "title": "Earthquakes"}, {"path": "/weather/", "title": "Weather"}, {"path": "/robotics/", "title": "Robotics"}], "/missions/": [{"path": "/missions/", "title": "Current"}, {"path": "/missions/", "title": "Past"}, {"path": "/missions/", "title": "Future"}, {"path": "/missions/", "title": "Proposed"}, {"path": "/missions/", "title": "All"}], "/news/": [{"path": "/news/", "title": "All news"}, {"path": "/news/", "title": "Press kits"}, {"path": "/news/", "title": "Fact sheets"}, {"path": "/news/", "title": "Media Information"}, {"path": "/news/", "title": "JPL newsletter"}]}',
+  ...NavDesktopTopHatData,
+  primaryNavigation: [
+    NavDesktopDropdownContentData,
+    {
+      ...NavDesktopDropdownContentData,
+      titleLink: {
+        linkPage: {
+          title: 'Missions',
+          url: '/missions/'
+        },
+        title: null
+      },
+      menuColumns: [
+        MenuHighlightColumnData,
+        {
+          blockType: 'MenuDescriptionColumn',
+          description: 'Lorem ipsum dolor sit amet.',
+          title: 'Missions'
+        },
+        {
+          ...MenuLinkColumnWithHeaderData,
+          heading: null,
+          headingPage: null
+        },
+        {
+          ...MenuLinkColumnWithHeaderData,
+          heading: null,
+          headingPage: null
+        }
+      ]
+    },
+    {
+      ...NavDesktopDropdownContentData,
+      titleLink: {
+        linkPage: {
+          title: 'News',
+          url: '/news/'
+        },
+        title: null
+      }
+    },
+    {
+      ...NavDesktopDropdownContentData,
+      titleLink: {
+        linkPage: {
+          title: 'Galleries',
+          url: '/galleries/'
+        },
+        title: null
+      }
+    },
+    {
+      ...NavDesktopDropdownContentData,
+      titleLink: {
+        linkPage: {
+          title: 'Engage',
+          url: '/engage/'
+        },
+        title: null
+      }
+    }
+  ]
+}
+
+export const BaseStory = {
+  name: 'NavDesktop',
+  args: {
+    data: NavDesktopData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0,
+    invertOverride: false
+  },
+  render: (args) => ({
+    components: { NavDesktop },
+    setup() {
+      return { args }
+    },
+    template: `<NavDesktop v-bind="args" />`
+  })
+}
diff --git a/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue b/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue
new file mode 100644
index 00000000..2f6c6083
--- /dev/null
+++ b/packages/vue/src/components/NavDesktopEdu/NavDesktopEdu.vue
@@ -0,0 +1,315 @@
+<template>
+  <div
+    class="NavDesktopEdu ThemeEdu z-50 w-full duration-150 ease-in"
+    :class="{
+      'sticky top-0': scrolledUp,
+      relative: !scrolledUp,
+      'transition-colors': scrollTop === 0, // smooth bg transition if going from opaque to transparent at top of page
+      'transition-transform': scrollTop > 0 && scrolledCurrentPage, // If not at the top of the page, just transition the transform to prevents content from peeking through on header reveal.
+      'transform -translate-y-full': !scrolledUp && !headerVisible,
+      '-scrolled transform translate-y-0': scrolledUp && headerVisible && scrollTop > 0,
+      '-transparent': invert,
+      '-hasSecondary': !headerStore?.highlightPrimary
+    }"
+  >
+    <!-- navbar -->
+    <div class="header-bg z-10 max-w-screen-3xl absolute inset-0 mx-auto"></div>
+    <div class="bg-primary z-0 absolute right-0 w-1/2 top-0 bottom-0"></div>
+    <div class="px-4">
+      <div class="h-18 container flex items-center justify-between mx-auto">
+        <!-- branding -->
+        <NavLogoLinks class="w-[17rem] z-20 flex flex-shrink-0 my-2 -ml-1">
+          <img
+            :src="LogoWhite"
+            alt="JPL Logo"
+            width="324"
+            height="72"
+          />
+        </NavLogoLinks>
+        <!-- site title -->
+        <div class="ml-3 pl-5 border-l border-white border-opacity-30 z-20">
+          <span class="text-white font-bold text-3xl">Education</span>
+        </div>
+        <!-- main nav with dropdowns -->
+        <nav
+          v-if="data"
+          aria-label="Main"
+          class="main-navigation flex items-center justify-end w-full"
+        >
+          <div
+            v-show="!searchVisible"
+            class="flex flex-wrap items-center justify-end"
+          >
+            <template v-for="(item, index) in data.primaryNavigation">
+              <NavDesktopDropdown
+                v-if="item.blockType === 'MenuPanel' && item.titleLink"
+                :key="index"
+                :class="{ '-active': checkActive(item.titleLink) }"
+                :parent-scrolled="scrollTop"
+              >
+                <template #dropdownLabel>
+                  {{ getLinkText(item.titleLink) }}
+                </template>
+                <NavDesktopDropdownContent :data="item" />
+              </NavDesktopDropdown>
+            </template>
+          </div>
+          <!-- search -->
+          <div
+            class="relative z-20 flex items-center w-auto"
+            :class="{ 'w-2/3': searchVisible }"
+          >
+            <button
+              v-if="!searchVisible"
+              aria-label="Open Search"
+              class="p-4 -mr-4 text-lg cursor-pointer"
+              @click="toggleSearch()"
+            >
+              <IconSearch />
+            </button>
+            <div
+              v-else
+              class="flex items-center w-full -transparent"
+            >
+              <NavSearchForm
+                class="w-full"
+                @clear-search="closeSearch()"
+                @submit-form="closeSearch()"
+              />
+              <button
+                aria-label="Close Search"
+                class="p-4 -mr-4 cursor-pointer"
+                @click="closeSearch()"
+              >
+                <IconClose class="text-sm" />
+              </button>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useHeaderStore } from './../../store/header'
+import NavDesktopDropdown from './../NavDesktop/NavDesktopDropdown.vue'
+import NavDesktopDropdownContent from './../NavDesktop/NavDesktopDropdownContent.vue'
+import NavLogoLinks from './../NavLogoLinks/NavLogoLinks.vue'
+import NavSearchForm from './../NavSearchForm/NavSearchForm.vue'
+import IconSearch from './../Icons/IconSearch.vue'
+import IconClose from './../Icons/IconClose.vue'
+import type { LinkObject, BreadcrumbObject } from './../../utils/mixins'
+import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
+import type { BreadcrumbPathObject } from '../../interfaces'
+import {
+  mixinIsActivePath,
+  mixinGetLinkText,
+  mixinUpdateGlobalChildren,
+  mixinUpdateSecondary
+} from './../../utils/mixins'
+
+export default defineComponent({
+  name: 'NavDesktop',
+  components: {
+    NavDesktopDropdown,
+    NavDesktopDropdownContent,
+    NavLogoLinks,
+    NavSearchForm,
+    IconSearch,
+    IconClose
+  },
+  props: {
+    data: {
+      type: Object || null,
+      required: false,
+      default: null
+    },
+    // this will override the initial display state (used in storybook)
+    invertOverride: {
+      type: Boolean,
+      required: false
+    },
+    headerVisible: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrolled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrolledUp: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrollTop: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      searchVisible: false,
+      // scrolledCurrentPage is used to track if a user has scrolled on the current page.
+      // This is used in transition logic to avoid distracting animations on route changes
+      // without this check, the nav would swoop in/out on a route change if it was visible before the route change occured (e.g. partially scrolled up on a page)
+      scrolledCurrentPage: false,
+      LogoWhite: LogoWhite
+    }
+  },
+  computed: {
+    ...mapStores(useHeaderStore),
+    // get the breadcrumb JSON string and convert to object. used to determine active class.
+    breadcrumb(): BreadcrumbObject | null {
+      if (this.data) {
+        return JSON.parse(this.data.breadcrumb)
+      }
+      return null
+    },
+    // dynamic classes for header transparency and onScroll effects
+    invert(): boolean {
+      const highContrast =
+        typeof window !== 'undefined' // client-side only
+          ? window.matchMedia('(forced-colors: active)').matches
+          : false
+      // storybook-safe
+      const headerTransparent = this.headerStore ? this.headerStore?.headerTransparent : false
+      return !highContrast && (headerTransparent || this.invertOverride)
+    }
+  },
+
+  watch: {
+    scrollTop(newVal) {
+      if (newVal > 0) {
+        this.scrolledCurrentPage = true
+      } else {
+        this.scrolledCurrentPage = false
+      }
+    },
+    $route() {
+      // close the search on route change
+      if (this.searchVisible) {
+        this.closeSearch()
+      }
+      // update header transparency
+      if (this.headerStore) {
+        this.headerStore.makeTransparent(false)
+        // to reset if active primary nav item should be highlighted
+        // content pages can override this a la carte
+        this.headerStore.updateHighlightPrimary(true)
+        // clear secondary nav each time
+        mixinUpdateSecondary(null)
+      }
+      // reset scrolledCurrentPage on route change
+      this.scrolledCurrentPage = false
+    }
+  },
+  methods: {
+    // safe way to retrieve url key from nav items. used with breadcrumb to determine active class.
+    getUrlKey(item: LinkObject): string | null {
+      if (item.linkPage) {
+        return item.linkPage.url
+      }
+      return null
+    },
+    // to determine active class on menu links and 'more' menu links
+    checkActive(item: LinkObject) {
+      const urlKey = this.getUrlKey(item)
+      if (urlKey && this.breadcrumb && this.breadcrumb.menu_links) {
+        // key into the breadcrumbs for each section
+        const objArray = this.breadcrumb.menu_links[urlKey]
+        // check if any of the paths contained in the array are active
+        const isActive = objArray.some((el: BreadcrumbPathObject) => mixinIsActivePath(el.path))
+        if (isActive) {
+          mixinUpdateGlobalChildren(this.breadcrumb.menu_links[urlKey])
+        }
+        return isActive
+      }
+      return false
+    },
+    checkActiveMore() {
+      if (this.breadcrumb && this.breadcrumb.more) {
+        // get the more menu array
+        const arr = this.breadcrumb.more
+        // check if array contains current path
+        const isActive = arr.some((el: BreadcrumbPathObject) => mixinIsActivePath(el.path))
+        if (isActive) {
+          // clear the secondary nav store when visiting a breadcrumb page
+          // ensures blank secondary nav unless explicitly set via content page "Promote" settings
+          mixinUpdateGlobalChildren(null)
+        }
+        return isActive
+      }
+      return false
+    },
+    toggleSearch() {
+      this.searchVisible ? this.closeSearch() : this.openSearch()
+    },
+    closeSearch() {
+      if (this.searchVisible) {
+        this.searchVisible = false
+        this.$emit('closeSearch')
+      }
+    },
+    openSearch() {
+      if (!this.searchVisible) {
+        this.searchVisible = true
+        this.$emit('openSearch')
+      }
+    },
+    getLinkText(item: LinkObject) {
+      return mixinGetLinkText(item)
+    }
+  }
+})
+</script>
+<style lang="scss">
+.NavDesktopEdu {
+  @apply border-b border-transparent;
+
+  > .header-bg {
+    @apply bg-gradient-to-r from-black to-primary bg-transparent to-90%;
+  }
+
+  .main-navigation {
+    > * {
+      @apply text-white;
+
+      .NavDesktopDropdown > button {
+        // mimics .text-contrast class
+        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
+      }
+    }
+  }
+
+  &.-scrolled {
+    @apply border-b border-gray-mid border-opacity-50 bg-white;
+
+    &.-transparent {
+      > .header-bg {
+        @apply opacity-0 bg-white;
+      }
+
+      .main-navigation {
+        > * {
+          @apply text-gray-dark;
+
+          .NavDesktopDropdown > button {
+            text-shadow: none;
+          }
+        }
+      }
+    }
+
+    &.-hasSecondary {
+      @apply border-0 border-transparent;
+    }
+  }
+}
+</style>
diff --git a/packages/vue/src/components/MixinDropdownToggle/MixinDropdownToggle.vue b/packages/vue/src/components/NavDropdownToggle/NavDropdownToggle.vue
similarity index 92%
rename from packages/vue/src/components/MixinDropdownToggle/MixinDropdownToggle.vue
rename to packages/vue/src/components/NavDropdownToggle/NavDropdownToggle.vue
index d3c07677..479feadd 100644
--- a/packages/vue/src/components/MixinDropdownToggle/MixinDropdownToggle.vue
+++ b/packages/vue/src/components/NavDropdownToggle/NavDropdownToggle.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="MixinDropdownToggle group cursor-pointer"
+    class="NavDropdownToggle group cursor-pointer"
     :class="{ '-active': isActivePath }"
     :aria-expanded="ariaExpanded"
     @click="clickEvent()"
@@ -22,7 +22,7 @@ export default defineComponent({
    * - NavMobileDropdown
    */
 
-  name: 'MixinDropdownToggle',
+  name: 'NavDropdownToggle',
   props: {
     path: {
       type: String,
diff --git a/packages/vue/src/components/NavHeading/NavHeading.vue b/packages/vue/src/components/NavHeading/NavHeading.vue
index bc685a9d..fb04a9e8 100644
--- a/packages/vue/src/components/NavHeading/NavHeading.vue
+++ b/packages/vue/src/components/NavHeading/NavHeading.vue
@@ -6,7 +6,7 @@
     <template v-if="data.headingPage && data.heading">
       <BaseLink
         variant="none"
-        class="text-subtitle text-jpl-blue-lighter inline-block mb-4"
+        class="text-subtitle text-jpl-blue-lighter edu:text-primary-lighter inline-block mb-4"
         link-class="p-2"
         :to="data.headingPage.url"
       >
@@ -14,7 +14,7 @@
       </BaseLink>
     </template>
     <template v-else-if="data.heading">
-      <div class="text-subtitle text-jpl-blue-lighter inline-block mb-4">
+      <div class="text-subtitle text-jpl-blue-lighter edu:text-primary-lighter inline-block mb-4">
         <span class="p-2">{{ data.heading }}</span>
       </div>
     </template>
diff --git a/packages/vue/src/components/NavLogoLinks/NavLogoLinks.stories.js b/packages/vue/src/components/NavLogoLinks/NavLogoLinks.stories.js
index 0b87f639..9105f7d5 100644
--- a/packages/vue/src/components/NavLogoLinks/NavLogoLinks.stories.js
+++ b/packages/vue/src/components/NavLogoLinks/NavLogoLinks.stories.js
@@ -9,14 +9,11 @@ export default {
 
 // TODO: VUE3 -- fix logo image in story
 export const BaseStory = {
-  args: {
-    src: LogoColor
-  },
   render: (args) => ({
     components: { NavLogoLinks },
     setup() {
       return { args }
     },
-    template: `<div class="flex"><NavLogoLinks><img :src="src" alt="Logo Image" /></NavLogoLinks></div>`
+    template: `<div class="flex"><NavLogoLinks><img src="/images/svg/logo-tribrand-color.svg" alt="Logo Image" /></NavLogoLinks></div>`
   })
 }
diff --git a/packages/vue/src/components/NavLogoLinks/NavLogoLinks.vue b/packages/vue/src/components/NavLogoLinks/NavLogoLinks.vue
index 857abac2..8244a9fe 100644
--- a/packages/vue/src/components/NavLogoLinks/NavLogoLinks.vue
+++ b/packages/vue/src/components/NavLogoLinks/NavLogoLinks.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- branding -->
   <div class="NavLogoLinks relative">
     <div class="absolute inset-0 flex items-start">
       <BaseLink
diff --git a/packages/vue/src/components/NavMobile/NavMobile.vue b/packages/vue/src/components/NavMobile/NavMobile.vue
index 5848d7f4..22c70b16 100644
--- a/packages/vue/src/components/NavMobile/NavMobile.vue
+++ b/packages/vue/src/components/NavMobile/NavMobile.vue
@@ -2,22 +2,39 @@
   <transition name="headerMobileReveal">
     <div
       v-show="headerVisible"
-      class="NavMobile border-gray-light-mid z-50 w-full transition-all duration-150 ease-in bg-white border-b"
+      class="NavMobile border-gray-light-mid z-50 w-full transition-all duration-150 ease-in bg-white border-b edu:bg-gray-light edu:border-none"
       :class="headerClasses"
     >
       <!-- navbar -->
       <div class="relative w-full">
-        <div class="h-18 flex items-center justify-between px-5">
+        <div
+          class="h-18 flex w-full justify-between items-center px-5 edu:bg-gradient-to-r edu:from-black edu:to-primary edu:to-90% edu:bg-black"
+        >
           <!-- branding -->
-          <NavLogoLinks class="lg:p-0 w-72 z-20 p-2 pl-0 -ml-3">
-            <img
-              :src="LogoColor"
-              alt="JPL Logo"
-              width="324"
-              height="72"
-            />
-          </NavLogoLinks>
-
+          <div class="flex items-center">
+            <NavLogoLinks class="lg:p-0 w-72 z-20 p-2 pl-0 -ml-3 edu:w-[12rem]">
+              <img
+                v-if="themeStore.theme === 'ThemeEdu'"
+                :src="LogoWhite"
+                alt="JPL Logo"
+                width="324"
+                height="72"
+              />
+              <img
+                v-else
+                :src="LogoColor"
+                alt="JPL Logo"
+                width="324"
+                height="72"
+              />
+            </NavLogoLinks>
+            <div
+              v-if="themeStore.theme === 'ThemeEdu'"
+              class="-ml-1 pl-2 border-l border-white border-opacity-30 z-20"
+            >
+              <span class="text-white font-bold text-xl pl-px">Education</span>
+            </div>
+          </div>
           <button
             v-if="data"
             class="text-gray-dark p-4 -mr-4 cursor-pointer"
@@ -26,11 +43,11 @@
           >
             <IconMenu
               v-if="!menuVisible"
-              class="text-6xl"
+              class="text-6xl edu:text-white"
             />
             <IconClose
               v-else
-              class="text-3xl"
+              class="text-3xl edu:text-white"
             />
           </button>
         </div>
@@ -84,7 +101,10 @@
                 :data="item"
               />
             </nav>
-            <NavSocial class="mt-8" />
+            <NavSocial
+              v-if="themeStore.theme === 'defaultTheme'"
+              class="mt-8"
+            />
           </div>
         </div>
       </div>
@@ -96,7 +116,9 @@
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 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'
+import { useThemeStore } from './../../store/theme'
 import IconMenu from './../Icons/IconMenu.vue'
 import IconClose from './../Icons/IconClose.vue'
 import NavLogoLinks from './../NavLogoLinks/NavLogoLinks.vue'
@@ -146,15 +168,18 @@ export default defineComponent({
       default: null
     }
   },
+  emits: ['closeMobileMenu', 'openMobileMenu'],
   data() {
     return {
       menuVisible: false,
       searchQuery: null,
-      LogoColor: LogoColor
+      LogoColor,
+      LogoWhite
     }
   },
   computed: {
     ...mapStores(useHeaderStore),
+    ...mapStores(useThemeStore),
     // get the breadcrumb JSON string and convert to object. used to determine active class.
     breadcrumb(): BreadcrumbObject | null {
       if (this.data) {
diff --git a/packages/vue/src/components/NavMobile/NavMobileDropdown.vue b/packages/vue/src/components/NavMobile/NavMobileDropdown.vue
index 40fc0b63..4b217b51 100644
--- a/packages/vue/src/components/NavMobile/NavMobileDropdown.vue
+++ b/packages/vue/src/components/NavMobile/NavMobileDropdown.vue
@@ -3,7 +3,7 @@
     ref="NavDropdownMobile"
     class="NavDropdownMobile"
   >
-    <MixinDropdownToggle
+    <NavDropdownToggle
       :aria-expanded="dropdownVisible ? true : false"
       class="group relative block w-full px-4 py-2 text-xl font-medium text-left"
       :class="{
@@ -18,7 +18,7 @@
       >
         {{ (data.length && data[0].title) || getLinkText(data.titleLink) }}
       </span>
-    </MixinDropdownToggle>
+    </NavDropdownToggle>
 
     <div v-if="dropdownVisible">
       <div class="mt-1 mb-3">
@@ -60,14 +60,14 @@
 // @ts-nocheck
 import { defineComponent } from 'vue'
 import type { LinkObject } from '../../utils/mixins'
-import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavMobileLink from './../NavMobile/NavMobileLink.vue'
 import NavMobileSecondaryDropdown from './../NavMobile/NavMobileSecondaryDropdown.vue'
 import { mixinGetLinkText } from '../../utils/mixins'
 export default defineComponent({
   name: 'NavMobileDropdown',
   components: {
-    MixinDropdownToggle,
+    NavDropdownToggle,
     NavMobileLink,
     NavMobileSecondaryDropdown
   },
diff --git a/packages/vue/src/components/NavMobile/NavMobileEdu.stories.js b/packages/vue/src/components/NavMobile/NavMobileEdu.stories.js
new file mode 100644
index 00000000..fe05eb8c
--- /dev/null
+++ b/packages/vue/src/components/NavMobile/NavMobileEdu.stories.js
@@ -0,0 +1,174 @@
+import { TheFooterData } from './../TheFooter/TheFooter.stories'
+import NavMobile from './NavMobile.vue'
+
+export default {
+  title: 'Navigation/Headers/EDU/NavMobile',
+  component: NavMobile,
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'canvas',
+    viewport: {
+      defaultViewport: 'mobile2'
+    },
+    docs: {
+      description: {
+        component: 'Doesn\'t look like EDU? Be sure to select "EDU Theme" in the toolbar dropdown.'
+      }
+    }
+  }
+}
+
+// data
+export const NavMobileData = {
+  mobileBreadcrumb:
+    '{"/": [{"path": "http://www.jpl.nasa.gov/", "title": "Asteroid watch"}, {"path": "http://www.jpl.nasa.gov/", "title": "Asteroid fast facts"}, {"path": "http://www.jpl.nasa.gov/", "title": "Meteor shower viewing guide"}, {"path": "http://www.jpl.nasa.gov/", "title": "Yeoman\'s top 10"}, {"path": "http://www.jpl.nasa.gov/", "title": "Glossary of space rocks"}, {"path": "/robotics-at-jpl/", "title": "Robotics"}, {"path": "http://www.jpl.nasa.gov/", "title": "Apps"}, {"path": "/jpl-life/", "title": "JPL Life"}, {"path": "/stars-and-galaxies/", "title": "Stars and Galaxies"}, {"path": "/exoplanets/", "title": "Exoplanets"}, {"path": "/solar-system/", "title": "Solar System"}, {"path": "/asteroids/", "title": "Asteroids"}, {"path": "/comets/", "title": "Comets"}, {"path": "/technology/", "title": "Technology"}, {"path": "/mars/", "title": "Mars"}, {"path": "/earth/", "title": "Earth"}, {"path": "/climate-change/", "title": "Climate Change"}, {"path": "/earthquakes/", "title": "Earthquakes"}, {"path": "/weather/", "title": "Weather"}, {"path": "/robotics/", "title": "Robotics"}], "/missions/": [{"path": "/missions/", "title": "Current"}, {"path": "/missions/", "title": "Past"}, {"path": "/missions/", "title": "Future"}, {"path": "/missions/", "title": "Proposed"}, {"path": "/missions/", "title": "All"}], "/news/": [{"path": "/news/", "title": "All news"}, {"path": "/news/", "title": "Press kits"}, {"path": "/news/", "title": "Fact sheets"}, {"path": "/news/", "title": "Media Information"}, {"path": "/news/", "title": "JPL newsletter"}]}',
+  footerNavigation: TheFooterData.footerNavigation,
+  footerMoreFromJpl: TheFooterData.footerMoreFromJpl
+}
+
+const NavMobileSecondaryNavData = [
+  { path: '/custom', title: 'Secondary Nav' },
+  {
+    path: '/custom/placeholder-1',
+    title: 'First subpage'
+  },
+  {
+    path: '/custom/placeholder-2',
+    title: 'Second subpage'
+  },
+  {
+    path: '/custom/placeholder-3',
+    title: 'Third subpage'
+  },
+  {
+    path: '/custom/placeholder-4',
+    title: 'Fourth subpage'
+  }
+]
+
+const NavMobileTertiaryNavData = [
+  { path: '/go/test-site', title: 'Test Go Site', children: [] },
+  {
+    path: '/go/test-site/has-children',
+    title: 'Has Children',
+    children: [
+      {
+        path: '/go/test-site/has-children/level-3-no-children',
+        title: 'Lvl 3 No Children',
+        children: []
+      },
+      {
+        path: '/go/test-site/has-children/level-3-has-children',
+        title: 'Lvl 3 Has Children',
+        children: [
+          {
+            path: '/go/test-site/has-children/level-3-has-children/level-4-no-children-1',
+            title: 'Lvl 4 No Children 1',
+            children: []
+          },
+          {
+            path: '/go/test-site/has-children/level-3-has-children/level-4-no-children-2',
+            title: 'Lvl 4 No Children 2',
+            children: []
+          }
+        ]
+      },
+      {
+        path: '/go/test-site/has-children/level-3-no-children',
+        title: 'Lvl 3 No Children',
+        children: []
+      }
+    ]
+  },
+  { path: '/go/test-site/no-children-1', title: 'No Children 1', children: [] },
+  { path: '/go/test-site/no-children-2', title: 'No Children 2', children: [] },
+  {
+    path: '/go/test-site/has-children',
+    title: 'Has Children',
+    children: [
+      {
+        path: '/go/test-site/has-children/level-3-no-children',
+        title: 'Lvl 3 No Children',
+        children: []
+      },
+      {
+        path: '/go/test-site/has-children/level-3-has-children',
+        title: 'Lvl 3 Has Children',
+        children: [
+          {
+            path: '/go/test-site/has-children/level-3-has-children/level-4-no-children-1',
+            title: 'Lvl 4 No Children 1',
+            children: []
+          },
+          {
+            path: '/go/test-site/has-children/level-3-has-children/level-4-no-children-2',
+            title: 'Lvl 4 No Children 2',
+            children: []
+          }
+        ]
+      },
+      {
+        path: '/go/test-site/has-children/level-3-no-children',
+        title: 'Lvl 3 No Children',
+        children: []
+      }
+    ]
+  }
+]
+
+export const BaseStory = {
+  name: 'NavMobile',
+  args: {
+    data: NavMobileData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0
+  },
+  render: (args) => ({
+    components: { NavMobile },
+    setup() {
+      return { args }
+    },
+    template: `<NavMobile
+      v-bind="args"
+    />`
+  })
+}
+
+export const WithSecondaryNav = {
+  args: {
+    data: NavMobileData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0,
+    staticSecondaryData: NavMobileSecondaryNavData
+  },
+  render: (args) => ({
+    components: { NavMobile },
+    setup() {
+      return { args }
+    },
+    template: `<NavMobile
+      v-bind="args"
+    />`
+  })
+}
+
+export const WithTertiaryNav = {
+  args: {
+    data: NavMobileData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0,
+    staticSecondaryData: NavMobileTertiaryNavData
+  },
+  render: (args) => ({
+    components: { NavMobile },
+    setup() {
+      return { args }
+    },
+    template: `<NavMobile
+      v-bind="args"
+    />`
+  })
+}
diff --git a/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue b/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue
index 959e6e77..969d1b3d 100644
--- a/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue
+++ b/packages/vue/src/components/NavMobile/NavMobileSecondaryDropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="NavMobileSecondaryDropdown relative">
-    <MixinDropdownToggle
+    <NavDropdownToggle
       :aria-expanded="dropdownVisible ? true : false"
       :path="item.path"
       class="w-full group cursor-pointer pl-12 flex items-center py-2 text-lg leading-tight"
@@ -12,7 +12,7 @@
     >
       <span>{{ index === 0 ? 'Home' : item.title }}</span>
       <IconCaret class="transform rotate-90 text-sm ml-2" />
-    </MixinDropdownToggle>
+    </NavDropdownToggle>
     <template v-if="dropdownVisible">
       <slot>
         <NavSecondaryDropdownContent
@@ -28,7 +28,7 @@
 import { defineComponent } from 'vue'
 import { mixinIsActivePath } from '../../utils/mixins'
 import IconCaret from './../Icons/IconCaret.vue'
-import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavSecondaryDropdownContent from './../NavSecondary/NavSecondaryDropdownContent.vue'
 
 export default defineComponent({
@@ -36,7 +36,7 @@ export default defineComponent({
 
   components: {
     IconCaret,
-    MixinDropdownToggle,
+    NavDropdownToggle,
     NavSecondaryDropdownContent
   },
   props: {
@@ -103,7 +103,7 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .NavMobileSecondaryDropdown {
-  .MixinDropdownToggle {
+  .NavDropdownToggle {
     span {
       @apply border-b border-transparent;
     }
diff --git a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue b/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
index 1de414f9..12c26a71 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondaryDropdown.vue
@@ -6,7 +6,7 @@
       'mr-auto': index === 0
     }"
   >
-    <MixinDropdownToggle
+    <NavDropdownToggle
       :aria-expanded="dropdownVisible ? true : false"
       :path="item.path"
       class="font-medium border-t-2 border-transparent block px-3 py-2"
@@ -29,7 +29,7 @@
         <span>{{ item.title }}</span>
         <IconCaret class="transform rotate-90 text-sm ml-2 pl-2 -mt-px" />
       </span>
-    </MixinDropdownToggle>
+    </NavDropdownToggle>
     <transition name="navfade">
       <div
         v-if="dropdownVisible"
@@ -48,14 +48,14 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import IconCaret from './../Icons/IconCaret.vue'
-import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavSecondaryDropdownContent from './../NavSecondary/NavSecondaryDropdownContent.vue'
 
 export default defineComponent({
   name: 'NavSecondaryDropdown',
   components: {
     IconCaret,
-    MixinDropdownToggle,
+    NavDropdownToggle,
     NavSecondaryDropdownContent
   },
   props: {
@@ -126,7 +126,7 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .NavSecondaryDropdown {
-  .MixinDropdownToggle {
+  .NavDropdownToggle {
     &.-open {
       > span {
         @apply border-black text-gray-dark #{!important};
diff --git a/packages/vue/src/components/NavSocial/NavSocial.vue b/packages/vue/src/components/NavSocial/NavSocial.vue
index b3cfb5bf..1ecdc954 100644
--- a/packages/vue/src/components/NavSocial/NavSocial.vue
+++ b/packages/vue/src/components/NavSocial/NavSocial.vue
@@ -1,54 +1,26 @@
 <template>
   <div class="NavSocial relative flex flex-row items-start border-collapse">
     <BaseButton
+      v-for="(item, index) in socialLinks"
+      :key="index"
       :variant="dark ? 'dark' : 'social'"
       class="-facebook w-12 h-12 text-2xl"
-      href="http://www.facebook.com/NASAJPL"
-      aria-label="Follow JPL on Facebook"
+      :class="{
+        '-facebook': item.facebook,
+        '-twitter': item.twitter,
+        '-instagram': item.instagram,
+        '-youtube': item.youtube
+      }"
+      :href="item.url"
+      :aria-label="item.label"
       target="_blank"
       rel="noopener"
     >
       <template #icon>
-        <IconSocialFacebook />
-      </template>
-    </BaseButton>
-    <BaseButton
-      :variant="dark ? 'dark' : 'social'"
-      class="-twitter w-12 h-12 text-2xl"
-      :class="{ '-ml-px': !dark }"
-      href="https://x.com/NASAJPL"
-      aria-label="Follow JPL on X"
-      target="_blank"
-      rel="noopener"
-    >
-      <template #icon>
-        <IconSocialTwitter />
-      </template>
-    </BaseButton>
-    <BaseButton
-      :variant="dark ? 'dark' : 'social'"
-      class="-instagram w-12 h-12 text-2xl"
-      :class="{ '-ml-px': !dark }"
-      href="http://instagram.com/nasajpl"
-      aria-label="Follow JPL on Instagram"
-      target="_blank"
-      rel="noopener"
-    >
-      <template #icon>
-        <IconSocialInstagram />
-      </template>
-    </BaseButton>
-    <BaseButton
-      :variant="dark ? 'dark' : 'social'"
-      class="-youtube w-12 h-12 text-3xl"
-      :class="{ '-ml-px': !dark }"
-      href="http://www.youtube.com/user/JPLnews?sub_confirmation=1"
-      aria-label="Follow JPL on YouTube"
-      target="_blank"
-      rel="noopener"
-    >
-      <template #icon>
-        <IconSocialYoutube />
+        <IconSocialFacebook v-if="item.facebook" />
+        <IconSocialTwitter v-else-if="item.twitter" />
+        <IconSocialInstagram v-else-if="item.instagram" />
+        <IconSocialYoutube v-else-if="item.youtube" />
       </template>
     </BaseButton>
   </div>
@@ -61,6 +33,52 @@ import IconSocialTwitter from './../Icons/IconSocialTwitter.vue'
 import IconSocialInstagram from './../Icons/IconSocialInstagram.vue'
 import IconSocialYoutube from './../Icons/IconSocialYoutube.vue'
 
+const wwwSocialLinks = [
+  {
+    facebook: true,
+    url: 'http://www.facebook.com/NASAJPL',
+    label: 'Follow JPL on Facebook'
+  },
+  {
+    twitter: true,
+    url: 'https://x.com/NASAJPL',
+    label: 'Follow JPL on X'
+  },
+  {
+    instagram: true,
+    url: 'http://instagram.com/nasajpl',
+    label: 'Follow JPL on Instagram'
+  },
+  {
+    youtube: true,
+    url: 'http://www.youtube.com/user/JPLnews?sub_confirmation=1',
+    label: 'Follow JPL on YouTube'
+  }
+]
+
+const eduSocialLinks = [
+  {
+    facebook: true,
+    url: 'http://facebook.com/nasajpledu',
+    label: 'Follow JPL Education on Facebook'
+  },
+  {
+    twitter: true,
+    url: 'http://x.com/nasajpl_edu',
+    label: 'Follow JPL Education on X'
+  },
+  {
+    instagram: true,
+    url: 'http://instagram.com/nasajpl_edu',
+    label: 'Follow JPL Education on Instagram'
+  },
+  {
+    youtube: true,
+    url: 'https://www.youtube.com/@nasajpledu3401',
+    label: 'Follow JPL Education on YouTube'
+  }
+]
+
 export default defineComponent({
   name: 'NavSocial',
   components: {
@@ -75,6 +93,16 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    edu: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    socialLinks() {
+      return this.edu ? eduSocialLinks : wwwSocialLinks
     }
   }
 })
diff --git a/packages/vue/src/components/TheFooter/TheFooter.vue b/packages/vue/src/components/TheFooter/TheFooter.vue
index dbc0f02d..88a7530b 100644
--- a/packages/vue/src/components/TheFooter/TheFooter.vue
+++ b/packages/vue/src/components/TheFooter/TheFooter.vue
@@ -36,24 +36,30 @@
         </div>
         <TheFooterSignUp class="lg:mb-10 mb-8" />
         <!-- social media -->
-        <div class="text-subtitle text-blue edu:text-white lg:mb-5 mb-3">Follow Us</div>
+        <div class="text-subtitle text-blue edu:text-white lg:mb-5 mb-3">
+          <template v-if="themeStore.theme === 'ThemeEdu'"> Follow JPL Education </template>
+          <template v-else> Follow Us </template>
+        </div>
         <NavSocial
           class="lg:mb-14 mb-12"
           dark
+          :edu="themeStore.theme === 'ThemeEdu'"
         />
-        <!-- caltech aside -->
-        <BaseLink
-          variant="none"
-          href="https://caltech.edu"
-          aria-label="Caltech"
-          class="lg:mb-8 mb-5"
-          link-class="inline-block"
-        >
-          <LogoCaltech class="lg:text-base text-sm text-white" />
-        </BaseLink>
-        <p class="mb-12">
-          JPL is a federally funded research and development center managed for NASA by Caltech.
-        </p>
+        <template v-if="themeStore.theme === 'defaultTheme'">
+          <!-- caltech aside -->
+          <BaseLink
+            variant="none"
+            href="https://caltech.edu"
+            aria-label="Caltech"
+            class="lg:mb-8 mb-5"
+            link-class="inline-block"
+          >
+            <LogoCaltech class="lg:text-base text-sm text-white" />
+          </BaseLink>
+          <p class="mb-12">
+            JPL is a federally funded research and development center managed for NASA by Caltech.
+          </p>
+        </template>
       </div>
     </div>
     <!-- more from JPL buttons / links -->
@@ -94,7 +100,12 @@
     <div class="bg-opacity-15 lg:py-16 lg:mt-10 pt-10 pb-3 mt-8 bg-black">
       <div class="3xl:px-0 container px-4 mx-auto">
         <div v-if="data && data.relatedNasaSites">
-          <div class="text-subtitle text-blue edu:text-white mb-5">Related NASA Sites</div>
+          <div class="text-subtitle text-blue edu:text-white mb-5">
+            <template v-if="themeStore.theme === 'ThemeEdu'">
+              Related NASA Education Sites
+            </template>
+            <template v-else> Related NASA Sites </template>
+          </div>
           <div class="auto-col-4">
             <BaseLink
               v-for="(item, index) in data.relatedNasaSites"
@@ -168,6 +179,8 @@
 <script lang="ts">
 // @ts-nocheck
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from './../../store/theme'
 import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseButton from './../BaseButton/BaseButton.vue'
@@ -202,6 +215,9 @@ export default defineComponent({
     getRouterLink(link) {
       return mixinGetRouterLink(link)
     }
+  },
+  computed: {
+    ...mapStores(useThemeStore)
   }
 })
 </script>
diff --git a/packages/vue/src/docs/overviews/global_headers.docs.mdx b/packages/vue/src/docs/overviews/global_headers.docs.mdx
index 74dbc644..602c1fa0 100644
--- a/packages/vue/src/docs/overviews/global_headers.docs.mdx
+++ b/packages/vue/src/docs/overviews/global_headers.docs.mdx
@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/blocks'
 import { ComponentList } from './../utils/ComponentList'
 import * as NavDesktopStories from './../../components/NavDesktop/NavDesktop.stories'
+import * as NavDesktopEduStories from './../../components/NavDesktopEdu/NavDesktopEdu.stories'
 
 <Meta title="Navigation/Headers/Overview" />
 
@@ -16,6 +17,13 @@ Headers are to be placed at the very top of your website or application. Header
       path: '/story/navigation-headers-www-navdesktop--base-story',
       fullWidth: true,
       fullCanvas: true
+    },
+    {
+      heading: 'External Header (EDU)',
+      meta: NavDesktopEduStories,
+      path: '/story/navigation-headers-edu-navdesktopedu--base-story',
+      fullWidth: true,
+      fullCanvas: true
     }
   ]}
 />
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail.stories.js b/packages/vue/src/templates/edu/PageEduNewsDetail.stories.js
index 07489f41..7f2c2bd9 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail.stories.js
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail.stories.js
@@ -13,6 +13,11 @@ export default {
   parameters: {
     html: {
       root: '#storyDecorator'
+    },
+    docs: {
+      description: {
+        component: 'Doesn\'t look like EDU? Be sure to select "EDU Theme" in the toolbar dropdown.'
+      }
     }
   },
   excludeStories: /.*Data$/
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail.vue b/packages/vue/src/templates/edu/PageEduNewsDetail.vue
index 1a69cf24..c51f2db4 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail.vue
@@ -67,7 +67,7 @@ const dateTimeArray = computed(() => {
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight"
+    class="ThemeEdu ThemeVariantLight"
     :class="computedClass"
     itemscope
     itemtype="http://schema.org/Article"