From f69a87861ed1e32c6108c38be8e70f9559994b83 Mon Sep 17 00:00:00 2001
From: Hannah Roth <hannah.roth@energysage.com>
Date: Tue, 3 Dec 2024 17:28:42 -0500
Subject: [PATCH 01/11] feat: redesign desktop nav search bar

---
 es-vue-base/src/lib-components/EsNavBar.vue   | 48 ++++++++++---------
 .../src/lib-components/EsSearchBar.vue        | 13 +----
 2 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 4d8b710c9..4775e11ab 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -100,6 +100,7 @@
                         </es-nav-bar-link>
                         <!-- top level menus -->
                         <es-nav-bar-top-level-menu
+                            class="top-level-menus"
                             v-for="topLevelMenu in globalContent.topLevelMenus"
                             :key="topLevelMenu.name"
                             :home-name="globalContent.home.name"
@@ -116,6 +117,24 @@
                                 <slot name="logo" />
                             </template>
                         </es-nav-bar-top-level-menu>
+                        <!-- desktop search bar -->
+                        <b-container
+                            class="nav-search-bar-desktop nav-item top-header mx-0"
+                            style="display: none">
+                            <div class="row w-100">
+                                <es-search-bar id="searchBarDesktop" class="mb-0">
+                                    <template #close>
+                                        <es-button
+                                            class="position-absolute nav-button mb-100 nav-search-close-desktop"
+                                            aria-label="Close search bar"
+                                            style="right: 0"
+                                            variant="link">
+                                            <icon-x />
+                                        </es-button>
+                                    </template>
+                                </es-search-bar>
+                            </div>
+                        </b-container>
                         <!-- desktop search icon -->
                         <div
                             id="navBarSearchIcon"
@@ -139,24 +158,6 @@
                             class="d-none d-lg-block pt-100"
                             :logged-out="accountContent.loggedOut" />
                     </b-container>
-                    <!-- desktop search bar -->
-                    <b-container
-                        class="nav-search-bar-desktop"
-                        style="display: none">
-                        <div class="row w-100">
-                            <es-search-bar id="searchBarDesktop">
-                                <template #close>
-                                    <es-button
-                                        class="position-absolute nav-button mb-100 nav-search-close-desktop"
-                                        aria-label="Close search bar"
-                                        style="right: 0"
-                                        variant="link">
-                                        <icon-x />
-                                    </es-button>
-                                </template>
-                            </es-search-bar>
-                        </div>
-                    </b-container>
                     <!-- mobile+desktop product menus -->
                     <b-container
                         class="flex-lg-nowrap justify-content-lg-end product-menu">
@@ -344,6 +345,8 @@ export default {
         const searchBarMobile = document.getElementById('searchBarMobile');
         const searchBarDesktop = document.getElementById('searchBarDesktop');
 
+        const topLevelMenus = document.querySelectorAll('.top-level-menus');
+
         // Function to show/hide search bar
         function toggle_search_bar_mobile(show_search_bar) {
             navSearchBarMobile.style.display = show_search_bar ? 'flex' : 'none';
@@ -358,14 +361,14 @@ export default {
 
         // Function to show/hide search bar
         function toggle_search_bar_desktop(show_search_bar) {
+            topLevelMenus.forEach((menu) => {
+                menu.style.display = show_search_bar ? 'none' : 'flex';
+            });
+            searchIconDesktop.style.display = show_search_bar ? 'none' : 'flex';
             navSearchBarDesktop.style.display = show_search_bar ? 'flex' : 'none';
-            productMenu.style.display = show_search_bar ? 'none' : 'flex';
 
             if (show_search_bar) {
-                searchIconDesktop.classList.add('search-open');
                 searchBarDesktop.focus();
-            } else {
-                searchIconDesktop.classList.remove('search-open');
             }
         }
         // Function to show/hide overlay
@@ -417,7 +420,6 @@ export default {
             .forEach((element) => {
                 element.addEventListener('mouseover', () => {
                     show_overlay(true);
-                    toggle_search_bar_desktop(false);
                 });
                 element.addEventListener('mouseout', () => {
                 // Hide overlay on mouseout on desktop not mobile
diff --git a/es-vue-base/src/lib-components/EsSearchBar.vue b/es-vue-base/src/lib-components/EsSearchBar.vue
index d341ed4e1..c293f5bd5 100644
--- a/es-vue-base/src/lib-components/EsSearchBar.vue
+++ b/es-vue-base/src/lib-components/EsSearchBar.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="align-items-center w-100 d-flex flex-column flex-lg-row justify-content-center position-relative">
-        <!--  d-flex flex-column -->
         <form
             action="/search/"
             class="d-flex align-items-center mx-auto justify-content-center order-2 order-lg-1 w-100"
@@ -14,7 +13,8 @@
                 name="query"
                 :placeholder="placeholder"
                 :value="searchText"
-                @keydown.enter="checkSearchText">
+                @keydown.enter.prevent="!searchText"
+                v-bind="$attrs">
                 <template #label>
                     Search bar
                 </template>
@@ -28,7 +28,6 @@
                 type="submit"
                 :value="buttonText">
                 {{ buttonText }}
-                <!-- <input enterkeyhint="search" /> -->
             </es-button>
         </form>
         <slot name="close" />
@@ -36,7 +35,6 @@
 </template>
 
 <script lang="js">
-// import axios from 'axios';
 import EsButton from './EsButton.vue';
 import EsFormInput from './EsFormInput.vue';
 
@@ -68,12 +66,5 @@ export default {
             searchText: '',
         };
     },
-    methods: {
-        checkSearchText(event) {
-            if (!this.searchText) {
-                event.preventDefault();
-            }
-        },
-    },
 };
 </script>

From f497b429059c48378cbeae74decad877de5e429d Mon Sep 17 00:00:00 2001
From: Hannah Roth <hannah.roth@energysage.com>
Date: Wed, 4 Dec 2024 10:16:20 -0500
Subject: [PATCH 02/11] feat: center search bar

---
 es-vue-base/src/lib-components/EsNavBar.vue    | 5 ++---
 es-vue-base/src/lib-components/EsSearchBar.vue | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 4775e11ab..12ae8b4c6 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -119,13 +119,13 @@
                         </es-nav-bar-top-level-menu>
                         <!-- desktop search bar -->
                         <b-container
-                            class="nav-search-bar-desktop nav-item top-header mx-0"
+                            class="nav-search-bar-desktop nav-item top-header mx-0 justify-content-center"
                             style="display: none">
                             <div class="row w-100">
                                 <es-search-bar id="searchBarDesktop" class="mb-0">
                                     <template #close>
                                         <es-button
-                                            class="position-absolute nav-button mb-100 nav-search-close-desktop"
+                                            class="order-2 nav-button mb-100 nav-search-close-desktop ml-50"
                                             aria-label="Close search bar"
                                             style="right: 0"
                                             variant="link">
@@ -338,7 +338,6 @@ export default {
         // Search bar elements for hiding/showing
         const searchIconMobile = document.querySelector('.search-icon-mobile');
         const searchIconDesktop = document.querySelector('.search-icon-desktop');
-        const productMenu = document.querySelector('.product-menu');
 
         const navSearchBarMobile = document.querySelector('.nav-search-bar-mobile');
         const navSearchBarDesktop = document.querySelector('.nav-search-bar-desktop');
diff --git a/es-vue-base/src/lib-components/EsSearchBar.vue b/es-vue-base/src/lib-components/EsSearchBar.vue
index c293f5bd5..204bc7fe6 100644
--- a/es-vue-base/src/lib-components/EsSearchBar.vue
+++ b/es-vue-base/src/lib-components/EsSearchBar.vue
@@ -8,7 +8,7 @@
                 :id="id"
                 v-model="searchText"
                 aria-label="Search bar"
-                class="w-50"
+                class="w-50 flex-grow-1"
                 label-sr-only
                 name="query"
                 :placeholder="placeholder"

From 32430fb9dfac81bf680cda03d798a481fde3d6bc Mon Sep 17 00:00:00 2001
From: Hannah Roth <hannah.roth@energysage.com>
Date: Wed, 4 Dec 2024 10:57:40 -0500
Subject: [PATCH 03/11] feat: remove search icon when desktop search bar open

---
 es-vue-base/src/lib-components/EsNavBar.vue    | 8 +++-----
 es-vue-base/src/lib-components/EsSearchBar.vue | 9 ++++++++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 12ae8b4c6..2abb84c92 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -138,16 +138,14 @@
                         <!-- desktop search icon -->
                         <div
                             id="navBarSearchIcon"
-                            class="nav-item d-none pt-100"
-                            :class="{
-                                'd-lg-block': showSearch,
-                            }">
+                            class="search-icon-desktop nav-item pt-100"
+                            :style="{ display: showSearch ? 'flex' : 'none' }">
                             <es-button
                                 variant="link"
                                 aria-label="Open search bar"
                                 class="nav-button nav-link search-toggle-desktop d-none d-lg-flex flex-nowrap py-100">
                                 <icon-search
-                                    class="align-self-center search-icon-desktop"
+                                    class="align-self-center"
                                     width="20px !important"
                                     height="20px !important" />
                             </es-button>
diff --git a/es-vue-base/src/lib-components/EsSearchBar.vue b/es-vue-base/src/lib-components/EsSearchBar.vue
index 204bc7fe6..834dac960 100644
--- a/es-vue-base/src/lib-components/EsSearchBar.vue
+++ b/es-vue-base/src/lib-components/EsSearchBar.vue
@@ -13,7 +13,7 @@
                 name="query"
                 :placeholder="placeholder"
                 :value="searchText"
-                @keydown.enter.prevent="!searchText"
+                @keydown.enter="checkSearchText"
                 v-bind="$attrs">
                 <template #label>
                     Search bar
@@ -66,5 +66,12 @@ export default {
             searchText: '',
         };
     },
+    methods: {
+        checkSearchText(event) {
+            if (!this.searchText) {
+                event.preventDefault();
+            }
+        },
+    },
 };
 </script>

From 1b5781e26ff024d85b02ae37770c86e23b393c6a Mon Sep 17 00:00:00 2001
From: Hannah Roth <hannah.roth@energysage.com>
Date: Wed, 4 Dec 2024 11:03:18 -0500
Subject: [PATCH 04/11] chore: remove unnecessary style

---
 es-vue-base/src/lib-components/EsNavBar.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 2abb84c92..358f02d18 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -127,7 +127,6 @@
                                         <es-button
                                             class="order-2 nav-button mb-100 nav-search-close-desktop ml-50"
                                             aria-label="Close search bar"
-                                            style="right: 0"
                                             variant="link">
                                             <icon-x />
                                         </es-button>

From 3254f7a48d6f38fa371f2b1b890deb49a28d3781 Mon Sep 17 00:00:00 2001
From: Hannah Roth <hannah.roth@energysage.com>
Date: Wed, 4 Dec 2024 11:06:50 -0500
Subject: [PATCH 05/11] feat: remove bottom padding

---
 es-vue-base/src/lib-components/EsNavBar.vue    | 4 ++--
 es-vue-base/src/lib-components/EsSearchBar.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 358f02d18..735f36366 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -122,10 +122,10 @@
                             class="nav-search-bar-desktop nav-item top-header mx-0 justify-content-center"
                             style="display: none">
                             <div class="row w-100">
-                                <es-search-bar id="searchBarDesktop" class="mb-0">
+                                <es-search-bar id="searchBarDesktop">
                                     <template #close>
                                         <es-button
-                                            class="order-2 nav-button mb-100 nav-search-close-desktop ml-50"
+                                            class="order-2 nav-button nav-search-close-desktop ml-50"
                                             aria-label="Close search bar"
                                             variant="link">
                                             <icon-x />
diff --git a/es-vue-base/src/lib-components/EsSearchBar.vue b/es-vue-base/src/lib-components/EsSearchBar.vue
index 834dac960..2bb4e2d3b 100644
--- a/es-vue-base/src/lib-components/EsSearchBar.vue
+++ b/es-vue-base/src/lib-components/EsSearchBar.vue
@@ -8,7 +8,7 @@
                 :id="id"
                 v-model="searchText"
                 aria-label="Search bar"
-                class="w-50 flex-grow-1"
+                class="w-50 flex-grow-1 mb-lg-0"
                 label-sr-only
                 name="query"
                 :placeholder="placeholder"
@@ -23,7 +23,7 @@
                 </template>
             </es-form-input>
             <es-button
-                class="ml-50 mb-100"
+                class="ml-50 mb-100 mb-lg-0"
                 :disabled="!searchText"
                 type="submit"
                 :value="buttonText">

From f0402d8ab6012c9855435385de63d59c20adb06a Mon Sep 17 00:00:00 2001
From: Hannah Roth <hannah.roth@energysage.com>
Date: Wed, 4 Dec 2024 11:23:41 -0500
Subject: [PATCH 06/11] feat: add border to nav links to prevent layout shift

---
 es-bs-base/scss/_nav.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/es-bs-base/scss/_nav.scss b/es-bs-base/scss/_nav.scss
index e85d7ee83..2b8a4e671 100644
--- a/es-bs-base/scss/_nav.scss
+++ b/es-bs-base/scss/_nav.scss
@@ -461,6 +461,7 @@ $nav-hover-delay: 300ms;
         color: variables.$blue-900;
         text-decoration: none;
         background: variables.$gray-50;
+        border: variables.$btn-border-width solid transparent;
         @include border-radius.border-radius(8px);
       }
 

From 682bfc1b381cce89add096735b2f12729fac5b2c Mon Sep 17 00:00:00 2001
From: Hannah Roth <hannah.roth@energysage.com>
Date: Wed, 4 Dec 2024 11:35:53 -0500
Subject: [PATCH 07/11] fix: resolve warnings

---
 es-vue-base/src/lib-components/EsNavBar.vue    | 4 ++--
 es-vue-base/src/lib-components/EsSearchBar.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 735f36366..4ca31c8c0 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -100,7 +100,6 @@
                         </es-nav-bar-link>
                         <!-- top level menus -->
                         <es-nav-bar-top-level-menu
-                            class="top-level-menus"
                             v-for="topLevelMenu in globalContent.topLevelMenus"
                             :key="topLevelMenu.name"
                             :home-name="globalContent.home.name"
@@ -112,7 +111,8 @@
                             :main-menu-text="globalContent.mainMenuText"
                             :name="topLevelMenu.name"
                             :sub-heading="topLevelMenu.subHeading"
-                            :topics="topLevelMenu.topics">
+                            :topics="topLevelMenu.topics"
+                            class="top-level-menus">
                             <template #logo>
                                 <slot name="logo" />
                             </template>
diff --git a/es-vue-base/src/lib-components/EsSearchBar.vue b/es-vue-base/src/lib-components/EsSearchBar.vue
index 2bb4e2d3b..309659f9b 100644
--- a/es-vue-base/src/lib-components/EsSearchBar.vue
+++ b/es-vue-base/src/lib-components/EsSearchBar.vue
@@ -13,8 +13,8 @@
                 name="query"
                 :placeholder="placeholder"
                 :value="searchText"
-                @keydown.enter="checkSearchText"
-                v-bind="$attrs">
+                v-bind="$attrs"
+                @keydown.enter="checkSearchText">
                 <template #label>
                     Search bar
                 </template>

From 7a84b9709ae77579ac98cdc2f164cb5f6da10f44 Mon Sep 17 00:00:00 2001
From: Hannah Roth <hannah.roth@energysage.com>
Date: Wed, 4 Dec 2024 11:45:51 -0500
Subject: [PATCH 08/11] feat: update docs

---
 .../pages/molecules/es-search-bar.vue         | 61 +++++++++++--------
 1 file changed, 34 insertions(+), 27 deletions(-)

diff --git a/es-design-system/pages/molecules/es-search-bar.vue b/es-design-system/pages/molecules/es-search-bar.vue
index 9c8048076..36f3101ad 100644
--- a/es-design-system/pages/molecules/es-search-bar.vue
+++ b/es-design-system/pages/molecules/es-search-bar.vue
@@ -6,40 +6,47 @@
         <h2>
             Basic example
         </h2>
-        <es-search-bar
-            id="searchBar1"
-            class="my-500" />
+        <b-row class="mb-100 justify-content-center">
+            <b-col lg="10">
+                <es-search-bar
+                    id="searchBar1"
+                    class="my-500" />
+            </b-col>
+        </b-row>
         <h2>
             Example with open/close functionality
         </h2>
-        <es-search-bar
-            v-if="showSearchBar"
-            id="searchBar2"
-            class="my-500">
-            <template #close>
+        <b-row class="mb-100 justify-content-center">
+            <b-col lg="10">
+                <es-search-bar
+                    v-if="showSearchBar"
+                    id="searchBar2"
+                    class="my-500">
+                    <template #close>
+                        <es-button
+                            class="nav-button order-2 ml-50"
+                            aria-label="Close search bar"
+                            variant="link"
+                            @click="toggleSearchBar()">
+                            <icon-x
+                                width="30px"
+                                height="30px" />
+                        </es-button>
+                    </template>
+                </es-search-bar>
                 <es-button
-                    class="position-absolute nav-button mb-3"
-                    aria-label="Close search bar"
-                    style="right: 0"
+                    v-else
                     variant="link"
+                    aria-label="Open search bar"
+                    class="nav-button nav-link icon-toggle d-flex flex-nowrap my-500 mx-auto"
                     @click="toggleSearchBar()">
-                    <icon-x
-                        width="30px"
-                        height="30px" />
+                    <icon-search
+                        class="align-self-center search-icon"
+                        width="20px"
+                        height="20px" />
                 </es-button>
-            </template>
-        </es-search-bar>
-        <es-button
-            v-else
-            variant="link"
-            aria-label="Open search bar"
-            class="nav-button nav-link icon-toggle d-flex flex-nowrap my-500 mx-auto"
-            @click="toggleSearchBar()">
-            <icon-search
-                class="align-self-center search-icon"
-                width="20px"
-                height="20px" />
-        </es-button>
+            </b-col>
+        </b-row>
 
         <div class="my-500">
             <h2>

From 0e053932b71a62ef35e9485b569a4455622a53fc Mon Sep 17 00:00:00 2001
From: Hannah Roth <hannah.roth@energysage.com>
Date: Wed, 4 Dec 2024 11:51:48 -0500
Subject: [PATCH 09/11] chore: add eslint-disable

---
 es-vue-base/src/lib-components/EsNavBar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 4ca31c8c0..4fdb7f215 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -358,6 +358,7 @@ export default {
         // Function to show/hide search bar
         function toggle_search_bar_desktop(show_search_bar) {
             topLevelMenus.forEach((menu) => {
+                // eslint-disable-next-line no-param-reassign
                 menu.style.display = show_search_bar ? 'none' : 'flex';
             });
             searchIconDesktop.style.display = show_search_bar ? 'none' : 'flex';

From 8dde8a5aea9f1e75b84bb9a31f648bcb7883396f Mon Sep 17 00:00:00 2001
From: Hannah Roth <hannah.roth@energysage.com>
Date: Wed, 4 Dec 2024 12:01:24 -0500
Subject: [PATCH 10/11] feat: hide search bar on overlay click

---
 es-vue-base/src/lib-components/EsNavBar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 4fdb7f215..13769f687 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -406,6 +406,7 @@ export default {
 
         // Collapse all open menus on overlay click
         overlay.addEventListener('click', () => {
+            toggle_search_bar_desktop(false);
             collapse_mobile_menus();
         });
 

From 41b0f709121e2c6294a2329d7fcee34c8b391a1b Mon Sep 17 00:00:00 2001
From: Hannah Roth <hannah.roth@energysage.com>
Date: Wed, 4 Dec 2024 15:27:57 -0500
Subject: [PATCH 11/11] fix: remove nested b-container

---
 es-vue-base/src/lib-components/EsNavBar.vue | 28 ++++++++++-----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 13769f687..f62081bd3 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -118,22 +118,20 @@
                             </template>
                         </es-nav-bar-top-level-menu>
                         <!-- desktop search bar -->
-                        <b-container
-                            class="nav-search-bar-desktop nav-item top-header mx-0 justify-content-center"
+                        <div
+                            class="w-100 nav-search-bar-desktop nav-item top-header mx-0 justify-content-center"
                             style="display: none">
-                            <div class="row w-100">
-                                <es-search-bar id="searchBarDesktop">
-                                    <template #close>
-                                        <es-button
-                                            class="order-2 nav-button nav-search-close-desktop ml-50"
-                                            aria-label="Close search bar"
-                                            variant="link">
-                                            <icon-x />
-                                        </es-button>
-                                    </template>
-                                </es-search-bar>
-                            </div>
-                        </b-container>
+                            <es-search-bar id="searchBarDesktop">
+                                <template #close>
+                                    <es-button
+                                        class="order-2 nav-button nav-search-close-desktop ml-50"
+                                        aria-label="Close search bar"
+                                        variant="link">
+                                        <icon-x />
+                                    </es-button>
+                                </template>
+                            </es-search-bar>
+                        </div>
                         <!-- desktop search icon -->
                         <div
                             id="navBarSearchIcon"