added var for the top menu breakpoint and brought over the MenuBar co…

…mpoennt scss to over write it in the global.scss
nypublicradio · Jun 5, 2024 · 75bb96c · 75bb96c
1 parent b24f735
commit 75bb96c
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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;
       }