From 4a43b5c91ed0a1dd434bfc29e2e513c9e0890d36 Mon Sep 17 00:00:00 2001
From: Kareem Lawrence <kareemabdullawrence@gmail.com>
Date: Wed, 5 Jun 2024 13:40:38 -0400
Subject: [PATCH 1/4] Updated menu and promo to include Naming Contest

---
 components/ListenersCta.vue |  6 +++-
 utilities/menuItems.js      | 66 ++++++++++++++++++++++---------------
 2 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/components/ListenersCta.vue b/components/ListenersCta.vue
index 67ff31d..327d559 100644
--- a/components/ListenersCta.vue
+++ b/components/ListenersCta.vue
@@ -7,6 +7,10 @@ import ArrowRight from '~/components/icons/ArrowRight.vue'
   <div class="listeners-cta p-5">
     <h2>Listeners</h2>
     <div class="text-right">
+      <v-flexible-link to="https://woobox.com/wc2qxd/">
+        Naming Contest
+        <arrow-right />
+      </v-flexible-link>
       <v-flexible-link to="/radiolab-read-credit">
         Read The Credits
         <arrow-right />
@@ -80,4 +84,4 @@ import ArrowRight from '~/components/icons/ArrowRight.vue'
     }
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/utilities/menuItems.js b/utilities/menuItems.js
index a10087f..132da90 100644
--- a/utilities/menuItems.js
+++ b/utilities/menuItems.js
@@ -40,18 +40,6 @@ export default [{
                 event_label: 'Podcasts: Series',
             })
         }
-    },
-    {
-        label: 'Radiolab for Kids',
-        to: '/radiolab-kids',
-        command: () => {
-            const { $analytics } = useNuxtApp()
-            $analytics.sendEvent('click_tracking', {
-                event_category: 'Click Tracking',
-                component: 'Navigation',
-                event_label: 'Podcasts: Radiolab for Kids',
-            })
-        }
     }
     ]
 },
@@ -107,6 +95,19 @@ export default [{
     }
     ]
 },
+{
+    label: 'Radiolab for Kids',
+    to: '/radiolab-kids',
+    class: 'alone',
+    command: () => {
+        const { $analytics } = useNuxtApp()
+        $analytics.sendEvent('click_tracking', {
+            event_category: 'Click Tracking',
+            component: 'Navigation',
+            event_label: 'Podcasts: Radiolab for Kids',
+        })
+    }
+},
 {
     label: 'For Listeners',
     items: [{
@@ -144,22 +145,35 @@ export default [{
                 event_label: 'For Listeners: Newsletter',
             })
         }
-    },
-    {
-        label: 'Swag Lab',
-        url: 'https://shop.radiolab.org',
-        target: '_blank',
-        command: () => {
-            const { $analytics } = useNuxtApp()
-            $analytics.sendEvent('click_tracking', {
-                event_category: 'Click Tracking',
-                component: 'Navigation',
-                event_label: 'For Listeners: Swag Lab',
-            })
+     //,
+    //     {
+    //         label: 'Swag Lab',
+    //         url: 'https://shop.radiolab.org',
+    //         target: '_blank',
+    //         command: () => {
+    //             const { $analytics } = useNuxtApp()
+    //             $analytics.sendEvent('click_tracking', {
+    //                 event_category: 'Click Tracking',
+    //                 component: 'Navigation',
+    //                 event_label: 'For Listeners: Swag Lab',
+    //             })
+    //         }
         }
-    }
     ]
 },
+{
+    label: 'Naming Contest',
+    url: 'https://woobox.com/wc2qxd/',
+    class: 'alone',
+    command: () => {
+        const { $analytics } = useNuxtApp()
+        $analytics.sendEvent('click_tracking', {
+            event_category: 'Click Tracking',
+            component: 'Navigation',
+            event_label: 'Naming Contest',
+        })
+    }
+},
 {
     label: 'How to listen',
     to: '/how-to-listen',
@@ -277,4 +291,4 @@ export default [{
         })
     }
 },
-]
+]
\ No newline at end of file

From 602965f321401c21ee8873369aa581df701fcb6d Mon Sep 17 00:00:00 2001
From: bonomite <thomasbono.com@gmail.com>
Date: Wed, 5 Jun 2024 14:12:34 -0400
Subject: [PATCH 2/4] bono css updates

---
 components/ListenersCta.vue   | 12 ++++++-----
 components/RadiolabHeader.vue | 39 +++++++++++++++++------------------
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/components/ListenersCta.vue b/components/ListenersCta.vue
index 327d559..a96fdfa 100644
--- a/components/ListenersCta.vue
+++ b/components/ListenersCta.vue
@@ -1,6 +1,6 @@
 <script setup>
-import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'
-import ArrowRight from '~/components/icons/ArrowRight.vue'
+import VFlexibleLink from "@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue"
+import ArrowRight from "~/components/icons/ArrowRight.vue"
 </script>
 
 <template>
@@ -27,7 +27,6 @@ import ArrowRight from '~/components/icons/ArrowRight.vue'
 .listeners-cta {
   position: relative;
   background: var(--gold-500);
-  min-height: 433px;
   border-radius: 20px;
   height: 100%;
   display: flex;
@@ -42,7 +41,7 @@ import ArrowRight from '~/components/icons/ArrowRight.vue'
       var(--pink-500) 100%
     );
     border-radius: 0 0 70% 70%;
-    content: '';
+    content: "";
     height: 740px;
     position: absolute;
     top: -580px;
@@ -51,6 +50,9 @@ import ArrowRight from '~/components/icons/ArrowRight.vue'
     right: 0;
     margin: auto;
   }
+  .text-right {
+    padding-top: 130px;
+  }
 }
 .listeners-cta h2,
 .listeners-cta .flexible-link {
@@ -84,4 +86,4 @@ import ArrowRight from '~/components/icons/ArrowRight.vue'
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/RadiolabHeader.vue b/components/RadiolabHeader.vue
index a91d6b7..b926eb8 100644
--- a/components/RadiolabHeader.vue
+++ b/components/RadiolabHeader.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from "vue"
 //import { useMenuItems } from '../composables/states'
-import menuItemsImport from '../utilities/menuItems'
-import VFlexibleLink from '@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue'
+import menuItemsImport from "../utilities/menuItems"
+import VFlexibleLink from "@nypublicradio/nypr-design-system-vue3/v2/src/components/VFlexibleLink.vue"
 //import breakpoint from '@nypublicradio/nypr-design-system-vue3/src/assets/library/breakpoints.module.scss'
 // const { $analytics } = useNuxtApp()
 //const menuItems = useMenuItems()
@@ -16,20 +16,20 @@ let hamburger = null
 const onResize = () => {
   if (
     window.innerWidth >= 960 &&
-    pMenuRef.value?.$el.classList?.contains('p-menubar-mobile-active')
+    pMenuRef.value?.$el.classList?.contains("p-menubar-mobile-active")
   ) {
     hamburger.click()
   }
 }
 
 onMounted(async () => {
-  window.addEventListener('resize', onResize)
+  window.addEventListener("resize", onResize)
   isMenuVisible.value = true
   await nextTick()
-  hamburger = pMenuRef.value.$el.getElementsByClassName('p-menubar-button')[0]
+  hamburger = pMenuRef.value.$el.getElementsByClassName("p-menubar-button")[0]
 })
 onUnmounted(() => {
-  window.removeEventListener('resize', onResize)
+  window.removeEventListener("resize", onResize)
 })
 </script>
 
@@ -40,7 +40,7 @@ onUnmounted(() => {
         v-if="isMenuVisible"
         class="content flex lg:block align-items-center justify-content-between lg:px-2 pr-3"
       >
-        <Menubar :model="menuItems" ref="pMenuRef">
+        <Menubar :model="menuItems" ref="pMenuRef" breakpoint="1180px">
           <template #start>
             <nuxt-link
               to="/"
@@ -123,11 +123,11 @@ onUnmounted(() => {
 }
 
 .site-header {
-  @include media('>=md') {
+  @include media(">=md") {
     position: sticky;
     top: 0px;
   }
-  @include media('<md') {
+  @include media("<md") {
     position: sticky;
     top: 50px;
   }
@@ -152,7 +152,7 @@ onUnmounted(() => {
       border: none;
       padding: 1rem 0.5rem;
 
-      @include media('<xl') {
+      @include media("<xl") {
         padding: 1rem 0.5rem 1rem 0.5rem;
       }
 
@@ -168,7 +168,7 @@ onUnmounted(() => {
         display: flex;
       }
 
-      @include media('>lg') {
+      @include media(">lg") {
         justify-content: space-between;
       }
 
@@ -190,11 +190,11 @@ onUnmounted(() => {
 
         &.gap {
           @media (min-width: 1440px) {
-            margin-left: 290px !important;
+            margin-left: 160px !important;
           }
 
-          @include media('>lg') {
-            margin-left: calc(50vw - 430px);
+          @include media(">lg") {
+            margin-left: calc(50vw - 530px);
           }
         }
 
@@ -221,7 +221,7 @@ onUnmounted(() => {
           }
 
           &:after {
-            content: '';
+            content: "";
             height: 1px;
             background: var(--black100);
             position: absolute;
@@ -259,8 +259,7 @@ onUnmounted(() => {
           top: 0;
           opacity: 0;
           pointer-events: none;
-          transition: top var(--transition-duration),
-            opacity var(--transition-duration);
+          transition: top var(--transition-duration), opacity var(--transition-duration);
           -webkit-transition: top var(--transition-duration),
             opacity var(--transition-duration);
           display: flex;
@@ -272,7 +271,7 @@ onUnmounted(() => {
             -webkit-transition: background-color var(--transition-duration),
               border-color var(--transition-duration);
             background-color: var(--white);
-            content: '';
+            content: "";
             left: -100vw;
             top: 1px;
             position: absolute;
@@ -342,7 +341,7 @@ onUnmounted(() => {
 
         .pi-bars {
           &:before {
-            content: '\e90b';
+            content: "\e90b";
           }
         }
 

From b24f7351d44a8ddb9863aa6b386e9587de37ed49 Mon Sep 17 00:00:00 2001
From: bonomite <thomasbono.com@gmail.com>
Date: Wed, 5 Jun 2024 14:28:27 -0400
Subject: [PATCH 3/4] more css

---
 components/RadiolabHeader.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/RadiolabHeader.vue b/components/RadiolabHeader.vue
index b926eb8..1b627fb 100644
--- a/components/RadiolabHeader.vue
+++ b/components/RadiolabHeader.vue
@@ -40,7 +40,7 @@ onUnmounted(() => {
         v-if="isMenuVisible"
         class="content flex lg:block align-items-center justify-content-between lg:px-2 pr-3"
       >
-        <Menubar :model="menuItems" ref="pMenuRef" breakpoint="1180px">
+        <Menubar :model="menuItems" ref="pMenuRef">
           <template #start>
             <nuxt-link
               to="/"
@@ -51,9 +51,14 @@ onUnmounted(() => {
             </nuxt-link>
           </template>
         </Menubar>
-        <v-flexible-link raw to="/the-lab" aria-label="Become a member">
+        <v-flexible-link
+          raw
+          to="/the-lab"
+          aria-label="Become a member"
+          class="mobile-bm-button"
+        >
           <Button
-            class="flex lg:hidden p-button-rounded"
+            class="flex p-button-rounded"
             @click="
               $analytics.sendEvent('click_tracking', {
                 event_category: 'Click Tracking',
@@ -143,6 +148,11 @@ onUnmounted(() => {
     .content {
       width: 100%;
       padding: 0;
+      .mobile-bm-button {
+        @media (min-width: 961px) {
+          display: none;
+        }
+      }
     }
 
     .p-menubar:not(.p-menubar-mobile-active) {

From 75bb96c236474aa7b313329c3bf1186071ced613 Mon Sep 17 00:00:00 2001
From: bonomite <thomasbono.com@gmail.com>
Date: Wed, 5 Jun 2024 15:17:36 -0400
Subject: [PATCH 4/4] added var for the top menu breakpoint and brought over
 the MenuBar compoennt scss to over write it in the global.scss

---
 assets/scss/_variables.scss   |   1 +
 assets/scss/global.scss       | 109 +++++++++++++++++++++++++++++++++-
 components/RadiolabHeader.vue |  10 +++-
 3 files changed, 115 insertions(+), 5 deletions(-)

diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 31ec686..adb47f5 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -6,6 +6,7 @@ $leaderboardHeight: 90px;
 $leaderboardHeightMobile: 50px;
 $playerHeight: 100px;
 $toolsBreakPoint: 472px;
+$menuBreakpoint: 1180px;
 
 $head-color-height: 280px;
 $head-color-height-lg: 130px;
diff --git a/assets/scss/global.scss b/assets/scss/global.scss
index f621aed..d53b02d 100644
--- a/assets/scss/global.scss
+++ b/assets/scss/global.scss
@@ -127,8 +127,12 @@ section {
     }
     &:after {
       content: '';
-      transition: height calc(var(--transition-duration) * 2), top calc(var(--transition-duration) * 2);
-      -webkit-transition: height calc(var(--transition-duration) * 2), top calc(var(--transition-duration) * 2);
+      transition:
+        height calc(var(--transition-duration) * 2),
+        top calc(var(--transition-duration) * 2);
+      -webkit-transition:
+        height calc(var(--transition-duration) * 2),
+        top calc(var(--transition-duration) * 2);
 
       //default alpha gradient
       background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.46) 100%);
@@ -363,3 +367,104 @@ section {
 }
 
 @import 'cards';
+
+// had to bring this entire file in because of the menu breakpoint
+@media screen and (max-width: $menuBreakpoint) {
+  .p-menubar {
+    position: relative;
+
+    .p-menubar-button {
+      display: flex;
+      width: $actionIconWidth;
+      height: $actionIconHeight;
+      color: $horizontalMenuRootMenuitemIconColor;
+      border-radius: $actionIconBorderRadius;
+      transition: $actionIconTransition;
+
+      &:hover {
+        color: $horizontalMenuRootMenuitemIconHoverColor;
+        background: $horizontalMenuRootMenuitemHoverBg;
+      }
+
+      &:focus {
+        @include focused();
+      }
+    }
+
+    .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: $verticalMenuPadding;
+      background: $overlayMenuBg;
+      border: $overlayMenuBorder;
+      box-shadow: $overlayMenuShadow;
+      width: 100%;
+
+      .p-menu-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+      }
+
+      .p-submenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+      }
+
+      > .p-menuitem {
+        width: 100%;
+        position: static;
+
+        > .p-menuitem-link {
+          @include menuitem-link();
+
+          > .p-submenu-icon {
+            margin-left: auto;
+            transition: transform $transitionDuration;
+          }
+        }
+
+        &.p-menuitem-active {
+          > .p-menuitem-link {
+            > .p-submenu-icon {
+              transform: rotate(-180deg);
+            }
+          }
+        }
+      }
+
+      .p-submenu-list {
+        width: 100%;
+        position: static;
+        box-shadow: none;
+        border: 0 none;
+
+        .p-submenu-icon {
+          transition: transform $transitionDuration;
+          transform: rotate(90deg);
+        }
+
+        .p-menuitem-active {
+          > .p-menuitem-link {
+            > .p-submenu-icon {
+              transform: rotate(-90deg);
+            }
+          }
+        }
+      }
+
+      .p-menuitem {
+        width: 100%;
+        position: static;
+      }
+
+      @include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
+    }
+
+    &.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+}
diff --git a/components/RadiolabHeader.vue b/components/RadiolabHeader.vue
index 1b627fb..46b0026 100644
--- a/components/RadiolabHeader.vue
+++ b/components/RadiolabHeader.vue
@@ -38,7 +38,7 @@ onUnmounted(() => {
     <section>
       <div
         v-if="isMenuVisible"
-        class="content flex lg:block align-items-center justify-content-between lg:px-2 pr-3"
+        class="content align-items-center justify-content-between lg:px-2 pr-3"
       >
         <Menubar :model="menuItems" ref="pMenuRef">
           <template #start>
@@ -148,8 +148,12 @@ onUnmounted(() => {
     .content {
       width: 100%;
       padding: 0;
+      display: flex;
+      @media (min-width: $menuBreakpoint) {
+        display: block !important;
+      }
       .mobile-bm-button {
-        @media (min-width: 961px) {
+        @media (min-width: $menuBreakpoint) {
           display: none;
         }
       }
@@ -178,7 +182,7 @@ onUnmounted(() => {
         display: flex;
       }
 
-      @include media(">lg") {
+      @media (min-width: $menuBreakpoint) {
         justify-content: space-between;
       }