From 26605f2146e95fa3354225c2401b6ad30d8e65ef Mon Sep 17 00:00:00 2001
From: ericdouglaspratt <eric.pratt@energysage.com>
Date: Thu, 26 Sep 2024 13:29:20 -0400
Subject: [PATCH 1/2] feat: in-progress first cut from innovation sprint

---
 .../es-navigation-product-menu-old.vue        | 117 ++++++
 .../components/es-navigation-product-menu.vue | 150 ++++++++
 es-ds-components/components/es-navigation.vue | 344 ++++++++++++++++++
 es-ds-docs/components/ds-organisms-list.vue   |   3 +
 es-ds-docs/layouts/navigation.vue             |  56 +++
 es-ds-docs/pages/organisms/navigation.vue     |  25 ++
 6 files changed, 695 insertions(+)
 create mode 100644 es-ds-components/components/es-navigation-product-menu-old.vue
 create mode 100644 es-ds-components/components/es-navigation-product-menu.vue
 create mode 100644 es-ds-components/components/es-navigation.vue
 create mode 100644 es-ds-docs/layouts/navigation.vue
 create mode 100644 es-ds-docs/pages/organisms/navigation.vue

diff --git a/es-ds-components/components/es-navigation-product-menu-old.vue b/es-ds-components/components/es-navigation-product-menu-old.vue
new file mode 100644
index 000000000..3f2c39475
--- /dev/null
+++ b/es-ds-components/components/es-navigation-product-menu-old.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import PrimevueMenu from 'primevue/menu';
+import type { MenuItem } from 'primevue/menuitem';
+
+interface EsNavigationProductMenuItemInterface {
+    link: string;
+    name: string;
+}
+
+interface EsNavigationProductMenuInterface extends EsNavigationProductMenuItemInterface {
+    items: EsNavigationProductMenuItemInterface[];
+}
+
+const props = defineProps<{
+    product: EsNavigationProductMenuInterface;
+}>();
+
+const isMenuExpanded = ref(false);
+const menuRef = useTemplateRef('menu');
+
+const menuItems: MenuItem[] | undefined = props.product.items?.length
+    ? props.product.items.map((item) => ({
+          label: item.name,
+          url: item.link,
+      }))
+    : undefined;
+
+const handleButtonClick = (e: any) => {
+    if (menuRef.value) {
+        menuRef.value.show(e);
+        isMenuExpanded.value = true;
+    }
+};
+
+const onLinkMouseLeave = (e: any) => {
+    if (menuRef.value) {
+        //menuRef.value.toggle(e);
+    }
+};
+
+const onMenuBlur = () => {
+    isMenuExpanded.value = false;
+};
+
+const onMenuFocus = () => {
+    isMenuExpanded.value = true;
+};
+</script>
+
+<template>
+    <div class="es-navigation-product-menu align-items-center d-flex">
+        <nuxt-link
+            :aria-expanded="isMenuExpanded"
+            :aria-haspopup="!!menuItems"
+            role="menuitem"
+            class="es-navigation-product-menu-link d-block text-center"
+            :class="{ active: isMenuExpanded }"
+            :href="props.product.link">
+            <span class="es-navigation-product-menu-text d-inline-block position-relative pb-50">
+                {{ props.product.name }}
+            </span>
+        </nuxt-link>
+        <es-button
+            class="pl-50 pb-50 text-dark-blue"
+            inline
+            size="sm"
+            variant="link"
+            @click="handleButtonClick">
+            <icon-chevron-down />
+        </es-button>
+        <primevue-menu
+            v-if="menuItems"
+            ref="menu"
+            :model="menuItems"
+            popup
+            :pt="{
+                menu: 'es-navigation-product-menu-menu bg-white',
+            }"
+            @blur="onMenuBlur"
+            @focus="onMenuFocus" />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+.es-navigation-product-menu {
+    &:last-child {
+        .es-navigation-product-menu-link {
+            text-align: right !important;
+        }
+    }
+
+    &-link {
+        color: variables.$dark-blue;
+        font-weight: variables.$font-weight-semibold;
+
+        &:hover {
+            text-decoration: none;
+
+            .es-navigation-product-menu-text {
+                &::after {
+                    border-bottom: 2px solid variables.$warm-orange;
+                    bottom: 0;
+                    content: '';
+                    left: 0;
+                    position: absolute;
+                    right: 0;
+                }
+            }
+        }
+    }
+
+    &-menu {
+    }
+}
+</style>
diff --git a/es-ds-components/components/es-navigation-product-menu.vue b/es-ds-components/components/es-navigation-product-menu.vue
new file mode 100644
index 000000000..e68440927
--- /dev/null
+++ b/es-ds-components/components/es-navigation-product-menu.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import Menubar from 'primevue/menubar';
+
+interface EsNavigationProductMenuItemInterface {
+    link: string;
+    name: string;
+}
+
+interface EsNavigationProductMenuInterface extends EsNavigationProductMenuItemInterface {
+    items: EsNavigationProductMenuItemInterface[];
+}
+
+const props = defineProps<{
+    products: EsNavigationProductMenuInterface[];
+}>();
+</script>
+
+<template>
+    <menubar
+        :model="props.products"
+        :pt="{
+            root: 'es-navigation-product-menu',
+            menu: 'es-navigation-product-menu-list d-flex justify-content-end list-unstyled mb-0',
+            menuitem: 'es-navigation-product-menu-item position-relative',
+            action: ({ context }) => ({
+                class: [
+                    'es-navigation-product-menu-action d-block px-100 px-xl-200',
+                    {
+                        active: context.active,
+                    },
+                ],
+            }),
+            label: 'es-navigation-product-menu-label d-inline-block position-relative pb-50',
+            submenu: 'es-navigation-product-menu-submenu bg-white list-unstyled position-absolute',
+        }" />
+</template>
+
+<style lang="scss">
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+$navigation-height: 128px;
+
+@keyframes overlayShow {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes esNavigationProductMenuOpen {
+    0% {
+        opacity: 0;
+        transform: translateX(-50%) scaleY(60%);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(-50%) scaleY(100%);
+    }
+}
+
+.es-navigation-product-menu {
+    /* hide the random menu show/hide button that appears but doesn't do anything */
+    & > a[role='button'] {
+        display: none;
+    }
+
+    &-list {
+        outline: 0 none;
+    }
+
+    /* ensure this active state only applies to top-level menu items, not ones in the flyout */
+    &-list > &-item > div > &-action:hover,
+    &-list > &-item[data-p-focused='true'] > div > &-action {
+        color: variables.$dark-blue;
+        text-decoration: none;
+
+        .es-navigation-product-menu-label::after {
+            border-bottom: 2px solid variables.$warm-orange;
+            bottom: 0;
+            content: '';
+            left: 0;
+            position: absolute;
+            right: 0;
+        }
+    }
+
+    &-item {
+        &:last-child {
+            .es-navigation-product-menu-action {
+                padding-right: 0 !important;
+            }
+        }
+    }
+
+    &-action {
+        color: variables.$dark-blue;
+        cursor: pointer;
+        font-weight: variables.$font-weight-semibold;
+        /* prevent text from selecting when you double-click or double-tap to open/close */
+        user-select: none;
+
+        svg {
+            display: none;
+        }
+    }
+
+    &-submenu {
+        left: 50%;
+        top: 100%;
+        transform: translateX(-50%);
+        z-index: 1002;
+    }
+
+    &-item[aria-expanded='true'] > .es-navigation-product-menu-submenu {
+        /* border-top: 1px solid variables.$gray-300; */
+        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+        padding: variables.$spacer 0;
+
+        @media not (prefers-reduced-motion: reduce) {
+            animation: 0.1s ease-out forwards esNavigationProductMenuOpen;
+            animation-delay: 50ms;
+            opacity: 0;
+            transform: translateX(-50%) scaleY(60%);
+            transform-origin: center top;
+        }
+    }
+
+    &-submenu &-item {
+        min-width: 300px;
+    }
+
+    &-submenu &-action {
+        color: variables.$dark-blue;
+        font-size: variables.$font-size-sm;
+        padding: (variables.$spacer * 0.5) 0;
+    }
+
+    &-submenu > &-item > div > &-action:hover,
+    &-submenu > &-item[data-p-focused='true'] > div > &-action {
+        color: variables.$dark-blue;
+
+        .es-navigation-product-menu-label {
+            text-decoration: underline;
+        }
+    }
+}
+</style>
diff --git a/es-ds-components/components/es-navigation.vue b/es-ds-components/components/es-navigation.vue
new file mode 100644
index 000000000..f1e170992
--- /dev/null
+++ b/es-ds-components/components/es-navigation.vue
@@ -0,0 +1,344 @@
+<script setup>
+import MegaMenu from 'primevue/megamenu';
+
+const topBandItems = [
+    {
+        label: 'Tips & guides',
+        items: [
+            [
+                {
+                    label: 'Solar',
+                    items: [
+                        {
+                            label: 'Home solar guide',
+                            url: 'https://www.energysage.com/solar/',
+                        },
+                        {
+                            label: 'Community solar guide',
+                            url: 'https://www.energysage.com/community-solar/',
+                        },
+                        {
+                            label: 'Best solar panels',
+                            url: 'https://www.energysage.com/solar/best-solar-panels-complete-ranking/',
+                        },
+                        {
+                            label: 'How much do solar panels cost?',
+                            url: 'https://www.energysage.com/local-data/solar-panel-cost/',
+                        },
+                    ],
+                },
+                {
+                    label: 'Backup power',
+                    items: [
+                        {
+                            label: 'Backup power guide',
+                            url: 'https://www.energysage.com/energy-storage/',
+                        },
+                        {
+                            label: 'Best home batteries',
+                            url: 'https://www.energysage.com/energy-storage/best-home-batteries/',
+                        },
+                        {
+                            label: 'Home batteries vs. generators',
+                            url: 'https://www.energysage.com/energy-storage/battery-backup-power-vs-generators-which-is-right-for-you/',
+                        },
+                    ],
+                },
+            ],
+        ],
+    },
+    {
+        label: 'Solar calculator',
+        url: 'https://www.energysage.com/solar/calculator/',
+    },
+    {
+        label: 'About us',
+        items: [
+            [
+                {
+                    label: 'Our company',
+                    items: [
+                        {
+                            label: 'Mission & values',
+                            url: 'https://www.energysage.com/about-us/company/',
+                        },
+                        {
+                            label: 'How it works',
+                            url: 'https://www.energysage.com/shop/home-solar/',
+                        },
+                        {
+                            label: 'Our team',
+                            url: 'https://www.energysage.com/about-us/team/',
+                        },
+                        {
+                            label: 'Our Energy Advisors',
+                            url: 'https://www.energysage.com/energy-advisors/',
+                        },
+                        {
+                            label: 'Careers',
+                            url: 'https://www.energysage.com/about-us/careers/',
+                        },
+                    ],
+                },
+            ],
+        ],
+    },
+    {
+        label: 'Account',
+        items: [
+            [
+                {
+                    label: 'Account',
+                    items: [
+                        {
+                            label: 'Sign in',
+                            url: 'https://www.energysage.com/login/',
+                        },
+                        {
+                            label: 'Create an account',
+                            url: 'https://accounts.energysage.com/register/?next=https://www.energysage.com/register-thanks/',
+                        },
+                    ],
+                },
+            ],
+        ],
+    },
+];
+
+const globalNavContent = getEsNavBarGlobalContent();
+
+const productBandItems = globalNavContent.products.map((item) => ({
+    label: item.name,
+    // url: item.link,
+    items: item.topics
+        ? [
+              ...item.topics.map((topic) => ({
+                  label: topic.name,
+                  url: topic.link,
+                  items: [
+                      ...topic.subtopics.map((subtopic) => ({
+                          label: subtopic.name,
+                          url: subtopic.link,
+                      })),
+                  ],
+              })),
+          ]
+        : item.items
+          ? [
+                ...item.items.map((subItem) => ({
+                    class: subItem.emphasize ? 'font-weight-bold' : undefined,
+                    label: subItem.name,
+                    target: subItem.newTab ? '_blank' : undefined,
+                    url: subItem.link,
+                })),
+            ]
+          : undefined,
+}));
+
+console.log('product', productBandItems);
+</script>
+
+<template>
+    <div class="es-navigation">
+        <div class="es-navigation-bar position-relative">
+            <b-container>
+                <mega-menu
+                    :model="topBandItems"
+                    :pt="{
+                        root: 'es-navigation-mega-menu align-items-center d-flex position-relative',
+                        menu: 'es-navigation-mega-menu-list d-flex flex-grow-1 justify-content-between list-unstyled mb-0 ml-500',
+                        menuitem: 'es-navigation-mega-menu-item',
+                        action: ({ context }) => ({
+                            class: [
+                                'es-navigation-mega-menu-item-action d-block',
+                                {
+                                    active: context.active,
+                                },
+                            ],
+                        }),
+                        panel: 'es-navigation-mega-menu-panel position-absolute',
+                        column: 'es-navigation-mega-menu-column',
+                        submenu: 'es-navigation-mega-menu-submenu list-unstyled',
+                        submenuHeader: 'es-navigation-mega-menu-submenu-header eyebrow',
+                    }">
+                    <template #start>
+                        <slot name="logo" />
+                    </template>
+                </mega-menu>
+                <es-navigation-product-menu
+                    class="mt-150"
+                    :products="productBandItems" />
+            </b-container>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+@use 'sass:map';
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+
+$navigation-height: 112px;
+
+@keyframes overlayShow {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes panelOpen {
+    0% {
+        opacity: 0;
+        transform: scaleY(60%);
+    }
+    100% {
+        opacity: 1;
+        transform: scaleY(100%);
+    }
+}
+
+.es-navigation {
+    /* darkened overlay */
+    &:has(.es-navigation-mega-menu-item[aria-expanded='true']),
+    &:has(.es-navigation-product-menu-item[aria-expanded='true']) {
+        &::before {
+            animation: 0.1s ease-in-out forwards overlayShow;
+            background-color: rgba(0, 0, 0, 0.075);
+            bottom: 0;
+            content: '';
+            left: 0;
+            position: fixed;
+            right: 0;
+            top: 0;
+            z-index: 990;
+        }
+    }
+
+    &-bar {
+        background-color: variables.$white;
+        box-shadow: 0 4px 4px hsla(0, 0%, 87%, 0.25);
+        z-index: 1000;
+    }
+
+    &-mega-menu {
+        & > div[data-pc-section='start'] > svg {
+            height: 42px !important;
+            width: auto !important;
+        }
+
+        /* hide the random menu show/hide button that appears but doesn't do anything */
+        & > a[role='button'] {
+            display: none;
+        }
+
+        &-item {
+            &-action {
+                color: variables.$dark-blue;
+                font-size: variables.$font-size-sm;
+                padding: (variables.$spacer * 0.5) 0;
+                user-select: none;
+
+                &:hover {
+                    color: variables.$dark-blue;
+                }
+                &.active {
+                    background-color: variables.$blue-300;
+                    box-shadow: none;
+                }
+            }
+
+            &[data-p-focused='true'] {
+                & > div > .es-navigation-mega-menu-item-action:not(:hover) {
+                    /*background-color: variables.$blue-200 !important;
+                    box-shadow: 0px 5px 10px 0px variables.$soft-blue !important;*/
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        &-list {
+            outline: 0 none;
+
+            /* ensure this only applies to top-level menu items, not ones in the flyout */
+            & > .es-navigation-mega-menu-item {
+                & > div > .es-navigation-mega-menu-item-action {
+                    background-color: variables.$gray-50;
+                    border-radius: variables.$border-radius-sm;
+                    color: variables.$dark-blue;
+                    cursor: pointer;
+                    font-size: variables.$font-size-base;
+                    font-weight: variables.$font-weight-bolder;
+                    padding: variables.$spacer;
+                    transition: all 0.2s ease-in-out;
+
+                    &:hover {
+                        background-color: variables.$blue-50;
+                        color: variables.$dark-blue;
+                        text-decoration: none;
+                    }
+                    &.active {
+                        background-color: variables.$blue-200 !important;
+                        box-shadow: 0px 5px 10px 0px variables.$soft-blue !important;
+                    }
+                }
+
+                &[data-p-focused='true'] {
+                    & > div > .es-navigation-mega-menu-item-action {
+                        background-color: variables.$blue-300;
+                        box-shadow: none;
+                        text-decoration: none;
+                    }
+                }
+
+                &[aria-expanded='true'] > .es-navigation-mega-menu-panel {
+                    border-top: 1px solid variables.$gray-300;
+                    padding: variables.$spacer 0;
+
+                    @media not (prefers-reduced-motion: reduce) {
+                        animation: 0.1s ease-out forwards panelOpen;
+                        animation-delay: 50ms;
+                        opacity: 0;
+                        transform: scaleY(60%);
+                        transform-origin: center top;
+                    }
+
+                    /* white background of submenu */
+                    &::before {
+                        background-color: variables.$white;
+                        /* TODO: match the box shadow of the nav in a way that doesn't bleed above it */
+                        /*box-shadow: 0 11px 10px rgba(0, 0, 0, 0.1);*/
+                        bottom: 0;
+                        content: '';
+                        left: calc(((100vw - map.get(variables.$container-max-widths, 'xl')) * -1) / 2 - 15px);
+                        position: absolute;
+                        right: calc(((100vw - map.get(variables.$container-max-widths, 'xl')) * -1) / 2 - 15px);
+                        top: 0;
+                        z-index: -1;
+                    }
+                }
+            }
+        }
+
+        /* don't add padding here as this div is always visible even if menu is collapsed */
+        &-panel {
+            left: 0;
+            right: 0;
+            top: $navigation-height;
+            z-index: 1002;
+        }
+    }
+}
+
+@include breakpoints.media-breakpoint-up(lg) {
+    .es-navigation {
+        &-bar {
+            box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+            padding-top: variables.$spacer;
+            z-index: 1000;
+        }
+    }
+}
+</style>
diff --git a/es-ds-docs/components/ds-organisms-list.vue b/es-ds-docs/components/ds-organisms-list.vue
index f50688cfd..546885f2e 100644
--- a/es-ds-docs/components/ds-organisms-list.vue
+++ b/es-ds-docs/components/ds-organisms-list.vue
@@ -15,6 +15,9 @@
         <li>
             <ds-link to="/organisms/nav-bar"> Nav bar </ds-link>
         </li>
+        <li>
+            <ds-link to="/organisms/navigation"> Navigation </ds-link>
+        </li>
         <li>
             <ds-link to="/organisms/reviews-io-card-carousel"> Reviews.io card carousel </ds-link>
         </li>
diff --git a/es-ds-docs/layouts/navigation.vue b/es-ds-docs/layouts/navigation.vue
new file mode 100644
index 000000000..4d051a758
--- /dev/null
+++ b/es-ds-docs/layouts/navigation.vue
@@ -0,0 +1,56 @@
+<script setup>
+const route = useRoute();
+
+const breadcrumbs = computed(() => {
+    let pathSoFar = '';
+    const paths = route.path.split('/');
+
+    // Set removes dupes from path
+    return [...new Set(paths)].map((path) => {
+        pathSoFar += path ? `/${path}` : '';
+
+        let text = 'Home';
+        // Convert to CamelCase to be in line with component naming
+        if (path) {
+            text = path.replace(/-([a-z])/g, (g) => ` ${g[1]}`);
+            text = text[0].toUpperCase() + text.slice(1);
+        }
+        return {
+            text,
+            to: pathSoFar || '/',
+        };
+    });
+});
+</script>
+
+<template>
+    <div>
+        <es-navigation>
+            <template #logo>
+                <ds-es-logo />
+            </template>
+        </es-navigation>
+
+        <div class="d-flex justify-content-center">
+            <b-container class="pt-100 mx-0">
+                <b-row>
+                    <b-col
+                        class="d-none d-xl-block"
+                        xl="3">
+                        <div class="ds-side-nav flex-shrink-0">
+                            <ds-link-list />
+                        </div>
+                    </b-col>
+                    <b-col xl="9">
+                        <div class="mb-100">
+                            <es-breadcrumbs :items="breadcrumbs" />
+                        </div>
+                        <div class="mb-300">
+                            <slot />
+                        </div>
+                    </b-col>
+                </b-row>
+            </b-container>
+        </div>
+    </div>
+</template>
diff --git a/es-ds-docs/pages/organisms/navigation.vue b/es-ds-docs/pages/organisms/navigation.vue
new file mode 100644
index 000000000..9294e78f6
--- /dev/null
+++ b/es-ds-docs/pages/organisms/navigation.vue
@@ -0,0 +1,25 @@
+<script setup>
+definePageMeta({
+    layout: 'navigation',
+});
+</script>
+
+<template>
+    <h1>Navigation</h1>
+    <p>
+        Extended from
+        <nuxt-link
+            href="https://v3.primevue.org/megamenu/"
+            target="_blank">
+            PrimeVue Megamenu
+        </nuxt-link>
+    </p>
+    <p>The nav bar is a specialized component intended for use outside the normal content container. See above.</p>
+
+    <p
+        v-for="index in 10"
+        :key="index"
+        class="my-800">
+        Sample content to increase page length; for testing the sticky nav bar.
+    </p>
+</template>

From aa04297ecafa01faa82f801824ac9b110114f795 Mon Sep 17 00:00:00 2001
From: ericdouglaspratt <eric.pratt@energysage.com>
Date: Fri, 4 Oct 2024 14:50:02 -0400
Subject: [PATCH 2/2] fix: rename b-container to es-container

---
 es-ds-components/components/es-navigation.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/es-ds-components/components/es-navigation.vue b/es-ds-components/components/es-navigation.vue
index f1e170992..8de3b074c 100644
--- a/es-ds-components/components/es-navigation.vue
+++ b/es-ds-components/components/es-navigation.vue
@@ -141,7 +141,7 @@ console.log('product', productBandItems);
 <template>
     <div class="es-navigation">
         <div class="es-navigation-bar position-relative">
-            <b-container>
+            <es-container>
                 <mega-menu
                     :model="topBandItems"
                     :pt="{
@@ -168,7 +168,7 @@ console.log('product', productBandItems);
                 <es-navigation-product-menu
                     class="mt-150"
                     :products="productBandItems" />
-            </b-container>
+            </es-container>
         </div>
     </div>
 </template>