From 8e575f2775b04a34cc1733a61c2e70e4901801bf Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Tue, 12 Nov 2024 15:51:07 -0500
Subject: [PATCH 01/17] feat: add search button to mobile navbar

---
 es-vue-base/src/lib-components/EsNavBar.vue | 87 ++++++++++++---------
 1 file changed, 52 insertions(+), 35 deletions(-)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 11d916890..e82cacb59 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -3,10 +3,9 @@
         id="nav-main"
         class="nav-es-container">
         <div class="content-overlay" />
-        <nav
-            class="nav-es-global navbar navbar-expand navbar-light py-0 font-size-base">
+        <nav class="nav-es-global navbar navbar-expand navbar-light py-0 font-size-base">
             <!-- mobile hamburger menu button -->
-            <div class="d-flex d-lg-none col-2 px-0">
+            <div class="d-flex d-lg-none col-3 px-0">
                 <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
                 <label
                     for="data--main-menu"
@@ -19,7 +18,7 @@
             </div>
             <!-- mobile logo -->
             <es-nav-bar-link
-                class="d-flex d-lg-none col-8 align-self-center justify-content-center px-0"
+                class="d-flex d-lg-none col-6 align-self-center justify-content-center px-0"
                 :href="globalContent.home.link">
                 <div class="nav-es-logo-mobile align-items-center d-flex">
                     <slot name="logo" />
@@ -28,23 +27,38 @@
                     {{ globalContent.home.name }}
                 </span>
             </es-nav-bar-link>
-            <!-- mobile account menu trigger -->
-            <div class="d-flex d-lg-none justify-content-end col-2 px-0">
-                <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
-                <label
-                    class="mb-0 text-decoration-none"
-                    for="data--account-menu">
-                    <icon-person class="align-self-center account-icon" />
-                    <span class="sr-only">
-                        {{ accountContent.mobileAccountButtonAltText }}
-                    </span>
-                </label>
+            <div class="col-3 d-flex flex-nowrap d-lg-none justify-content-end px-0">
+                <!-- mobile search icon -->
+                <div
+                    id="navBarSearchIconMobile"
+                    class="d-block d-lg-none">
+                    <es-button
+                        variant="link"
+                        aria-label="Open search bar"
+                        class="nav-button nav-link search-toggle-mobile d-flex flex-nowrap d-lg-none py-0 px-50 mr-100">
+                        <icon-search class="align-self-center search-icon-mobile" />
+                    </es-button>
+                </div>
+
+                <!-- mobile account menu trigger -->
+                <div class="d-flex d-lg-none align-self-center">
+                    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                    <label
+                        class="mb-0 text-decoration-none"
+                        for="data--account-menu">
+                        <icon-person class="align-self-center account-icon" />
+                        <span class="sr-only">
+                            {{ accountContent.mobileAccountButtonAltText }}
+                        </span>
+                    </label>
+                </div>
             </div>
+
             <input
                 id="data--main-menu"
                 class="menu-checkbox main-menu-checkbox"
                 aria-labelledby="data--main-menu"
-                type="checkbox">
+                type="checkbox" />
             <!-- first-level menu on mobile, the whole nav on desktop-->
             <div
                 id="navbarNavDropdown"
@@ -102,16 +116,13 @@
                         </es-nav-bar-top-level-menu>
                         <div
                             id="navBarSearchIcon"
-                            class="nav-item d-none pt-100"
-                            :class="{
-                                'd-lg-block': showSearch,
-                            }">
+                            class="nav-item d-none d-lg-block pt-100">
                             <es-button
                                 variant="link"
                                 aria-label="Open search bar"
-                                class="nav-button nav-link icon-toggle d-none d-lg-flex flex-nowrap py-100">
+                                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"
+                                    class="align-self-center search-icon-desktop"
                                     width="20px !important"
                                     height="20px !important" />
                             </es-button>
@@ -122,7 +133,7 @@
                             class="d-none d-lg-block pt-100"
                             :logged-out="accountContent.loggedOut" />
                     </b-container>
-                    <!-- mobile+desktop product menus -->
+                    <!-- desktop search bar -->
                     <b-container
                         class="nav-search-bar"
                         style="display: none">
@@ -140,8 +151,8 @@
                             </es-search-bar>
                         </div>
                     </b-container>
-                    <b-container
-                        class="flex-lg-nowrap justify-content-lg-end product-menu">
+                    <!-- mobile+desktop product menus -->
+                    <b-container class="flex-lg-nowrap justify-content-lg-end product-menu">
                         <div class="row">
                             <es-nav-bar-product-menu
                                 v-for="product in globalContent.products"
@@ -170,7 +181,7 @@
                 id="data--account-menu"
                 class="menu-checkbox account-menu-checkbox"
                 aria-labelledby="data--account-menu"
-                type="checkbox">
+                type="checkbox" />
             <!-- mobile account menu -->
             <div class="menu top-level-menu align-items-start d-flex d-lg-none flex-grow-1">
                 <!-- menu header -->
@@ -280,10 +291,6 @@ export default {
             type: Object,
             required: true,
         },
-        showSearch: {
-            type: Boolean,
-            default: false,
-        },
     },
     mounted() {
         // CUSTOM GLOBAL-NAV SCRIPT STARTS
@@ -302,7 +309,8 @@ export default {
         // Search bar elements for hiding/showing
         const searchBar = document.querySelector('.nav-search-bar');
         const productMenu = document.querySelector('.product-menu');
-        const searchIcon = document.querySelector('.search-icon');
+        const searchIconMobile = document.querySelector('.search-icon-mobile');
+        const searchIconDesktop = document.querySelector('.search-icon-desktop');
         const searchForm = document.getElementById('searchBar');
 
         // Function to show/hide search bar
@@ -310,10 +318,12 @@ export default {
             searchBar.style.display = show_search_bar ? 'flex' : 'none';
             productMenu.style.display = show_search_bar ? 'none' : 'flex';
             if (show_search_bar) {
-                searchIcon.classList.add('search-open');
+                searchIconMobile.classList.add('search-open');
+                searchIconDesktop.classList.add('search-open');
                 searchForm.focus();
             } else {
-                searchIcon.classList.remove('search-open');
+                searchIconMobile.classList.remove('search-open');
+                searchIconDesktop.classList.remove('search-open');
             }
         }
 
@@ -371,8 +381,15 @@ export default {
                 });
             });
 
-        // Show overlay on click for desktop only
-        document.querySelector('.icon-toggle').addEventListener('click', () => {
+        // Show overlay on click for mobile
+        document.querySelector('.search-toggle-mobile').addEventListener('click', () => {
+            const show = searchBar.style.display === 'none';
+            toggle_search_bar(show);
+            show_overlay(show);
+        });
+
+        // Show overlay on click for desktop
+        document.querySelector('.search-toggle-desktop').addEventListener('click', () => {
             const show = searchBar.style.display === 'none';
             toggle_search_bar(show);
             show_overlay(show);

From a6bf90545b8a460f9cababd37fb4aed2ab980782 Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Tue, 12 Nov 2024 15:57:10 -0500
Subject: [PATCH 02/17] feat: don't cover mobile navbar with overlay

---
 es-bs-base/scss/_nav.scss | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/es-bs-base/scss/_nav.scss b/es-bs-base/scss/_nav.scss
index 4a0609c9e..5b32f446b 100644
--- a/es-bs-base/scss/_nav.scss
+++ b/es-bs-base/scss/_nav.scss
@@ -175,8 +175,14 @@ $nav-hover-delay: 300ms;
 .nav-es-container {
   .nav-es-global,
   .nav-es-sticky {
+    // pull navbar up to avoid overlay from getting covered by other DOM elements
+    z-index: 1000;
     // default should be size 14px according to figma
     font-size: variables.$font-size-75;
+
+    // shadow for additional visual separation between nav and more plain pages
+    filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.1));
+    box-shadow: none;
   }
 
   .nav-es-global {
@@ -274,7 +280,8 @@ $nav-hover-delay: 300ms;
     }
   }
 
-  .account-icon, .search-icon {
+  .account-icon,
+  .search-icon {
     fill: variables.$blue-900;
   }
 
@@ -284,16 +291,6 @@ $nav-hover-delay: 300ms;
 
   // On Desktop a hovers display the dropdowns
   @media only screen and (min-width: $desktop-min-width) {
-    .nav-es-global,
-    .nav-es-sticky {
-      // pull navbar up to avoid overlay from getting covered by other DOM elements
-      z-index: 1000;
-
-      // shadow for additional visual separation between nav and more plain pages
-      filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.1));
-      box-shadow: none;
-    }
-
     // sticky nav bar, initially positioned out of viewport
     .nav-es-sticky {
       top: 0;

From 158ac074f5cb25fec1c54817406ee0c3018718de Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Tue, 12 Nov 2024 21:41:56 -0500
Subject: [PATCH 03/17] feat: enable mobile search bar

---
 es-vue-base/src/lib-components/EsNavBar.vue | 32 +++++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index e82cacb59..8e0173fc5 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -53,7 +53,7 @@
                     </label>
                 </div>
             </div>
-
+            <!-- eslint-disable-next-line vue/html-self-closing -->
             <input
                 id="data--main-menu"
                 class="menu-checkbox main-menu-checkbox"
@@ -240,6 +240,24 @@
                 </ul>
             </div>
         </nav>
+        <!-- mobile search bar -->
+        <b-container
+            class="nav-search-bar-mobile d-lg-none pt-100"
+            style="display: none">
+            <div class="row w-100">
+                <es-search-bar>
+                    <template #close>
+                        <es-button
+                            class="position-absolute nav-button mb-3 nav-search-close-mobile d-lg-none"
+                            aria-label="Close search bar"
+                            style="right: 0"
+                            variant="link">
+                            <icon-x />
+                        </es-button>
+                    </template>
+                </es-search-bar>
+            </div>
+        </b-container>
         <!-- sticky nav bar -->
         <nav class="nav-es-sticky bg-white d-none d-lg-block position-fixed py-25">
             <b-container class="align-items-center d-flex justify-content-between">
@@ -308,6 +326,7 @@ export default {
 
         // Search bar elements for hiding/showing
         const searchBar = document.querySelector('.nav-search-bar');
+        const searchBarMobile = document.querySelector('.nav-search-bar-mobile');
         const productMenu = document.querySelector('.product-menu');
         const searchIconMobile = document.querySelector('.search-icon-mobile');
         const searchIconDesktop = document.querySelector('.search-icon-desktop');
@@ -316,6 +335,7 @@ export default {
         // Function to show/hide search bar
         function toggle_search_bar(show_search_bar) {
             searchBar.style.display = show_search_bar ? 'flex' : 'none';
+            searchBarMobile.style.display = show_search_bar ? 'flex' : 'none';
             productMenu.style.display = show_search_bar ? 'none' : 'flex';
             if (show_search_bar) {
                 searchIconMobile.classList.add('search-open');
@@ -331,7 +351,8 @@ export default {
         function show_overlay(overlay_visible) {
             if (overlay_visible) {
                 overlay.classList.add('show');
-            } else if (!overlay_visible && searchBar.style.display === 'none') {
+            } else if (!overlay_visible
+                && searchBar.style.display === 'none' && searchBarMobile.style.display === 'none') {
                 overlay.classList.remove('show');
             }
         }
@@ -383,7 +404,7 @@ export default {
 
         // Show overlay on click for mobile
         document.querySelector('.search-toggle-mobile').addEventListener('click', () => {
-            const show = searchBar.style.display === 'none';
+            const show = searchBarMobile.style.display === 'none';
             toggle_search_bar(show);
             show_overlay(show);
         });
@@ -400,6 +421,11 @@ export default {
             show_overlay(false);
         });
 
+        document.querySelector('.nav-search-close-mobile').addEventListener('click', () => {
+            toggle_search_bar(false);
+            show_overlay(false);
+        });
+
         // Toggle menu display on main menu open/close
         mainMenuCheckbox.addEventListener('change', (event) => {
             if (event.target.checked) {

From 959da476cd0c8f4125a7b33f83fa6bb23a373eb7 Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Tue, 12 Nov 2024 21:42:26 -0500
Subject: [PATCH 04/17] fix: adjust styles for mobile

---
 es-bs-base/scss/_nav.scss | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/es-bs-base/scss/_nav.scss b/es-bs-base/scss/_nav.scss
index 5b32f446b..c4e95161a 100644
--- a/es-bs-base/scss/_nav.scss
+++ b/es-bs-base/scss/_nav.scss
@@ -30,13 +30,16 @@
 }
 
 .nav-button {
-  &:hover {
-    background: variables.$blue-50 !important;
-  }
+  @include breakpoints.media-breakpoint-up(lg) {
+    &:hover {
+      /* stylelint-disable-next-line declaration-no-important */
+      background: variables.$blue-50 !important;
+    }
 
-  &:focus,
-  &.focus {
-    border-color: variables.$blue-500;
+    &:focus,
+    &.focus {
+      border-color: variables.$blue-500;
+    }
   }
 }
 
@@ -181,16 +184,26 @@ $nav-hover-delay: 300ms;
     font-size: variables.$font-size-75;
 
     // shadow for additional visual separation between nav and more plain pages
-    filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.1));
-    box-shadow: none;
+    @include breakpoints.media-breakpoint-up(lg) {
+      filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.1));
+      box-shadow: none;
+    }
   }
 
   .nav-es-global {
     // add a background so veil goes under the nav and nav stands out against page bg
     background-color: variables.$white;
 
-    // shadow for additional visual separation between nav and more plain pages
-    box-shadow: 0 4px 4px rgba(221, 221, 221, 0.25);
+    @include breakpoints.media-breakpoint-up(lg) {
+      // shadow for additional visual separation between nav and more plain pages
+      box-shadow: 0 4px 4px rgba(221, 221, 221, 0.25);
+    }
+  }
+
+  .nav-search-bar-mobile {
+    z-index: 1000;
+    font-size: variables.$font-size-75;
+    background-color: variables.$white;
   }
 
   // override es-ds default

From c3173e5536107dd95639a69b75386eeecb4edf07 Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Wed, 13 Nov 2024 11:27:20 -0500
Subject: [PATCH 05/17] fix: eslint updates

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

diff --git a/es-vue-base/src/lib-components/EsSearchBar.vue b/es-vue-base/src/lib-components/EsSearchBar.vue
index 37250c343..3537a50ba 100644
--- a/es-vue-base/src/lib-components/EsSearchBar.vue
+++ b/es-vue-base/src/lib-components/EsSearchBar.vue
@@ -6,17 +6,15 @@
             method="get">
             <es-form-input
                 id="searchBar"
+                v-model="searchText"
                 aria-label="Search bar"
                 class="w-50"
                 label-sr-only
                 name="query"
-                v-model="searchText"
                 :placeholder="placeholder"
                 :value="searchText"
                 @keydown.enter="checkSearchText">
-                <template #label>
-                    Search bar
-                </template>
+                <template #label> Search bar </template>
                 <template #prefixIcon>
                     <icon-search />
                 </template>

From 693327b482bc3d632eb88b3e2a9c897d185bcba2 Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Wed, 13 Nov 2024 16:30:28 -0500
Subject: [PATCH 06/17] fix: mobile search bar restyling

---
 es-bs-base/scss/_nav.scss                     | 14 ++++++++++
 es-vue-base/src/lib-components/EsNavBar.vue   | 27 +++++++++----------
 .../src/lib-components/EsSearchBar.vue        |  7 ++---
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/es-bs-base/scss/_nav.scss b/es-bs-base/scss/_nav.scss
index c4e95161a..e85d7ee83 100644
--- a/es-bs-base/scss/_nav.scss
+++ b/es-bs-base/scss/_nav.scss
@@ -204,6 +204,20 @@ $nav-hover-delay: 300ms;
     z-index: 1000;
     font-size: variables.$font-size-75;
     background-color: variables.$white;
+
+    .input-wrapper {
+      width: 100% !important;
+    }
+
+    .btn-primary {
+      display: none !important;
+    }
+
+    .nav-search-close-mobile {
+      @include breakpoints.media-breakpoint-up(lg) {
+        position: absolute;
+      }
+    }
   }
 
   // override es-ds default
diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 8e0173fc5..4efc9f3e3 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -141,7 +141,7 @@
                             <es-search-bar>
                                 <template #close>
                                     <es-button
-                                        class="position-absolute nav-button mb-3 nav-search-close"
+                                        class="position-absolute nav-button mb-100 nav-search-close"
                                         aria-label="Close search bar"
                                         style="right: 0"
                                         variant="link">
@@ -242,21 +242,18 @@
         </nav>
         <!-- mobile search bar -->
         <b-container
-            class="nav-search-bar-mobile d-lg-none pt-100"
+            class="nav-search-bar-mobile d-lg-none"
             style="display: none">
-            <div class="row w-100">
-                <es-search-bar>
-                    <template #close>
-                        <es-button
-                            class="position-absolute nav-button mb-3 nav-search-close-mobile d-lg-none"
-                            aria-label="Close search bar"
-                            style="right: 0"
-                            variant="link">
-                            <icon-x />
-                        </es-button>
-                    </template>
-                </es-search-bar>
-            </div>
+            <es-search-bar>
+                <template #close>
+                    <es-button
+                        class="order-1 d-flex d-lg-none align-self-end nav-button nav-search-close-mobile p-0"
+                        aria-label="Close search bar"
+                        variant="link">
+                        <icon-x />
+                    </es-button>
+                </template>
+            </es-search-bar>
         </b-container>
         <!-- sticky nav bar -->
         <nav class="nav-es-sticky bg-white d-none d-lg-block position-fixed py-25">
diff --git a/es-vue-base/src/lib-components/EsSearchBar.vue b/es-vue-base/src/lib-components/EsSearchBar.vue
index 3537a50ba..7c338ab0a 100644
--- a/es-vue-base/src/lib-components/EsSearchBar.vue
+++ b/es-vue-base/src/lib-components/EsSearchBar.vue
@@ -1,8 +1,9 @@
 <template>
-    <div class="align-items-center w-100 d-flex justify-content-center position-relative">
+    <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 w-100"
+            class="d-flex align-items-center mx-auto justify-content-center order-2 order-lg-1 w-100"
             method="get">
             <es-form-input
                 id="searchBar"
@@ -20,7 +21,7 @@
                 </template>
             </es-form-input>
             <es-button
-                class="ml-50 mb-3"
+                class="ml-50 mb-100"
                 :disabled="!searchText"
                 type="submit"
                 :value="buttonText">

From abc6a30018366367d53eb50f43fccc72b5e5fd7d Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Thu, 14 Nov 2024 10:24:11 -0500
Subject: [PATCH 07/17] fix: prevent overlay from blocking mobile search

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

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 4efc9f3e3..1b5c8807b 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -241,20 +241,22 @@
             </div>
         </nav>
         <!-- mobile search bar -->
-        <b-container
-            class="nav-search-bar-mobile d-lg-none"
+        <div
+            class="nav-search-bar-mobile d-lg-none position-relative"
             style="display: none">
-            <es-search-bar>
-                <template #close>
-                    <es-button
-                        class="order-1 d-flex d-lg-none align-self-end nav-button nav-search-close-mobile p-0"
-                        aria-label="Close search bar"
-                        variant="link">
-                        <icon-x />
-                    </es-button>
-                </template>
-            </es-search-bar>
-        </b-container>
+            <b-container>
+                <es-search-bar>
+                    <template #close>
+                        <es-button
+                            class="order-1 d-flex d-lg-none align-self-end nav-button nav-search-close-mobile p-0"
+                            aria-label="Close search bar"
+                            variant="link">
+                            <icon-x />
+                        </es-button>
+                    </template>
+                </es-search-bar>
+            </b-container>
+        </div>
         <!-- sticky nav bar -->
         <nav class="nav-es-sticky bg-white d-none d-lg-block position-fixed py-25">
             <b-container class="align-items-center d-flex justify-content-between">

From 987ed3a3362870a156ff193a771466e13a13e41e Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Thu, 14 Nov 2024 16:12:35 -0500
Subject: [PATCH 08/17] feat: add prop for ID

---
 .../pages/molecules/es-search-bar.vue           | 17 +++++++----------
 es-vue-base/src/lib-components/EsNavBar.vue     |  4 ++--
 es-vue-base/src/lib-components/EsSearchBar.vue  |  9 ++++++++-
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/es-design-system/pages/molecules/es-search-bar.vue b/es-design-system/pages/molecules/es-search-bar.vue
index 1ed379809..573234081 100644
--- a/es-design-system/pages/molecules/es-search-bar.vue
+++ b/es-design-system/pages/molecules/es-search-bar.vue
@@ -1,17 +1,14 @@
 <template>
     <div>
-        <h1 class="mb-500">
-            Search bar
-        </h1>
-        <h2>
-            Basic example
-        </h2>
-        <es-search-bar class="my-500" />
-        <h2>
-            Example with open/close functionality
-        </h2>
+        <h1 class="mb-500">Search bar</h1>
+        <h2>Basic example</h2>
+        <es-search-bar
+            id="searchBar1"
+            class="my-500" />
+        <h2>Example with open/close functionality</h2>
         <es-search-bar
             v-if="showSearchBar"
+            id="searchBar2"
             class="my-500">
             <template #close>
                 <es-button
diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 1b5c8807b..9ce98f7d7 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -138,7 +138,7 @@
                         class="nav-search-bar"
                         style="display: none">
                         <div class="row w-100">
-                            <es-search-bar>
+                            <es-search-bar id="searchBarDesktop">
                                 <template #close>
                                     <es-button
                                         class="position-absolute nav-button mb-100 nav-search-close"
@@ -245,7 +245,7 @@
             class="nav-search-bar-mobile d-lg-none position-relative"
             style="display: none">
             <b-container>
-                <es-search-bar>
+                <es-search-bar id="searchBarMobile">
                     <template #close>
                         <es-button
                             class="order-1 d-flex d-lg-none align-self-end nav-button nav-search-close-mobile p-0"
diff --git a/es-vue-base/src/lib-components/EsSearchBar.vue b/es-vue-base/src/lib-components/EsSearchBar.vue
index 7c338ab0a..a998a0acd 100644
--- a/es-vue-base/src/lib-components/EsSearchBar.vue
+++ b/es-vue-base/src/lib-components/EsSearchBar.vue
@@ -6,7 +6,7 @@
             class="d-flex align-items-center mx-auto justify-content-center order-2 order-lg-1 w-100"
             method="get">
             <es-form-input
-                id="searchBar"
+                :id="id"
                 v-model="searchText"
                 aria-label="Search bar"
                 class="w-50"
@@ -45,6 +45,13 @@ export default {
         EsFormInput,
     },
     props: {
+        /**
+         * A unique id to keep track of which search form is being used.
+         */
+        id: {
+            type: String,
+            required: true,
+        },
         buttonText: {
             type: String,
             default: 'Search',

From 524a2cb4a1fd3fc75c57c9434af077dde80523a5 Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Thu, 14 Nov 2024 16:13:09 -0500
Subject: [PATCH 09/17] fix: eslint updates

---
 .../pages/molecules/es-search-bar.vue         | 22 +++++--------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/es-design-system/pages/molecules/es-search-bar.vue b/es-design-system/pages/molecules/es-search-bar.vue
index 573234081..87dfe251d 100644
--- a/es-design-system/pages/molecules/es-search-bar.vue
+++ b/es-design-system/pages/molecules/es-search-bar.vue
@@ -36,18 +36,14 @@
         </es-button>
 
         <div class="my-500">
-            <h2>
-                EsSearchBar slots
-            </h2>
+            <h2>EsSearchBar slots</h2>
             <ds-prop-table
                 :rows="slotTableRows"
                 :widths="slotTableWidths" />
         </div>
 
         <div class="my-500">
-            <h2>
-                EsSearchBar props
-            </h2>
+            <h2>EsSearchBar props</h2>
             <ds-prop-table
                 :rows="propTableRows"
                 :widths="propTableWidths" />
@@ -70,16 +66,8 @@ export default {
             docCode: '',
             showSearchBar: false,
             propTableRows: [
-                [
-                    'buttonText',
-                    'Search',
-                    'Text to display on the submit button.',
-                ],
-                [
-                    'placeholder',
-                    'Try "best solar panels"',
-                    'Placeholder text to display in the search input.',
-                ],
+                ['buttonText', 'Search', 'Text to display on the submit button.'],
+                ['placeholder', 'Try "best solar panels"', 'Placeholder text to display in the search input.'],
             ],
             propTableWidths: {
                 md: ['4', '2', '6'],
@@ -100,7 +88,7 @@ export default {
     },
     async created() {
         if (this.$prism) {
-        /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */
+            /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */
             const docSource = await import('!raw-loader!./es-search-bar.vue');
             const compSource = await import('!raw-loader!@energysage/es-vue-base/src/lib-components/EsSearchBar.vue');
             /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import */

From ef887a291997d73bdb08e8955b431f33f002eec7 Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Fri, 15 Nov 2024 10:35:18 -0500
Subject: [PATCH 10/17] fix: restore showSearch prop for desktop

---
 es-vue-base/src/lib-components/EsNavBar.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 9ce98f7d7..ebeba192e 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -116,9 +116,13 @@
                         </es-nav-bar-top-level-menu>
                         <div
                             id="navBarSearchIcon"
-                            class="nav-item d-none d-lg-block pt-100">
+                            class="nav-item d-none pt-100"
+                            :class="{
+                                'd-lg-block': showSearch,
+                            }">
                             <es-button
-                                variant="link"
+                                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
@@ -308,6 +312,10 @@ export default {
             type: Object,
             required: true,
         },
+        showSearch: {
+            type: Boolean,
+            default: false,
+        },
     },
     mounted() {
         // CUSTOM GLOBAL-NAV SCRIPT STARTS

From 883ecd7779999e28ef3bb279b32119f28f318b1c Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Fri, 15 Nov 2024 10:59:05 -0500
Subject: [PATCH 11/17] fix: use showSearch prop in mobile navbar

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

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index ebeba192e..abe0de2d8 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -31,7 +31,8 @@
                 <!-- mobile search icon -->
                 <div
                     id="navBarSearchIconMobile"
-                    class="d-block d-lg-none">
+                    class="d-lg-none"
+                    :class="showSearch ? 'd-block' : 'd-none'">
                     <es-button
                         variant="link"
                         aria-label="Open search bar"
@@ -114,6 +115,7 @@
                                 <slot name="logo" />
                             </template>
                         </es-nav-bar-top-level-menu>
+                        <!-- desktop search icon -->
                         <div
                             id="navBarSearchIcon"
                             class="nav-item d-none pt-100"

From e6a3cac33c466c67ab6336c1ea6390dead76dc4a Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Fri, 15 Nov 2024 13:03:40 -0500
Subject: [PATCH 12/17] fix: wrong selector, name variable names clearer

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

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index abe0de2d8..5ea0e01ed 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -141,7 +141,7 @@
                     </b-container>
                     <!-- desktop search bar -->
                     <b-container
-                        class="nav-search-bar"
+                        class="nav-search-bar-desktop"
                         style="display: none">
                         <div class="row w-100">
                             <es-search-bar id="searchBarDesktop">
@@ -334,16 +334,16 @@ export default {
         const overlay = document.querySelector('.content-overlay');
 
         // Search bar elements for hiding/showing
-        const searchBar = document.querySelector('.nav-search-bar');
+        const searchBarDesktop = document.querySelector('.nav-search-bar-desktop');
         const searchBarMobile = document.querySelector('.nav-search-bar-mobile');
         const productMenu = document.querySelector('.product-menu');
         const searchIconMobile = document.querySelector('.search-icon-mobile');
         const searchIconDesktop = document.querySelector('.search-icon-desktop');
-        const searchForm = document.getElementById('searchBar');
+        const searchForm = document.getElementById('searchBarDesktop');
 
         // Function to show/hide search bar
         function toggle_search_bar(show_search_bar) {
-            searchBar.style.display = show_search_bar ? 'flex' : 'none';
+            searchBarDesktop.style.display = show_search_bar ? 'flex' : 'none';
             searchBarMobile.style.display = show_search_bar ? 'flex' : 'none';
             productMenu.style.display = show_search_bar ? 'none' : 'flex';
             if (show_search_bar) {
@@ -361,7 +361,7 @@ export default {
             if (overlay_visible) {
                 overlay.classList.add('show');
             } else if (!overlay_visible
-                && searchBar.style.display === 'none' && searchBarMobile.style.display === 'none') {
+                && searchBarDesktop.style.display === 'none' && searchBarMobile.style.display === 'none') {
                 overlay.classList.remove('show');
             }
         }
@@ -386,7 +386,8 @@ export default {
 
         // Collapse all open menus on window resize
         window.addEventListener('resize', () => {
-            if (mainMenuCheckbox.checked || accountMenuCheckbox.checked || searchBar.style.display !== 'none') {
+            if (mainMenuCheckbox.checked || accountMenuCheckbox.checked
+                || searchBarDesktop.style.display !== 'none' || searchBarMobile.style.display !== 'none') {
                 collapse_mobile_menus();
             }
         });
@@ -420,7 +421,7 @@ export default {
 
         // Show overlay on click for desktop
         document.querySelector('.search-toggle-desktop').addEventListener('click', () => {
-            const show = searchBar.style.display === 'none';
+            const show = searchBarDesktop.style.display === 'none';
             toggle_search_bar(show);
             show_overlay(show);
         });

From fe20cb2747d9bcacbd9d4bcb3d96115a89f344fe Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Mon, 18 Nov 2024 12:04:20 -0500
Subject: [PATCH 13/17] fix: formatting errors introduced by Prettier (?)

---
 .../pages/molecules/es-search-bar.vue         | 32 +++++++++++++++----
 .../pages/organisms/es-nav-bar.vue            |  5 ++-
 es-vue-base/src/lib-components/EsNavBar.vue   | 13 ++++----
 .../src/lib-components/EsSearchBar.vue        |  4 ++-
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/es-design-system/pages/molecules/es-search-bar.vue b/es-design-system/pages/molecules/es-search-bar.vue
index 87dfe251d..9c8048076 100644
--- a/es-design-system/pages/molecules/es-search-bar.vue
+++ b/es-design-system/pages/molecules/es-search-bar.vue
@@ -1,11 +1,17 @@
 <template>
     <div>
-        <h1 class="mb-500">Search bar</h1>
-        <h2>Basic example</h2>
+        <h1 class="mb-500">
+            Search bar
+        </h1>
+        <h2>
+            Basic example
+        </h2>
         <es-search-bar
             id="searchBar1"
             class="my-500" />
-        <h2>Example with open/close functionality</h2>
+        <h2>
+            Example with open/close functionality
+        </h2>
         <es-search-bar
             v-if="showSearchBar"
             id="searchBar2"
@@ -36,14 +42,18 @@
         </es-button>
 
         <div class="my-500">
-            <h2>EsSearchBar slots</h2>
+            <h2>
+                EsSearchBar slots
+            </h2>
             <ds-prop-table
                 :rows="slotTableRows"
                 :widths="slotTableWidths" />
         </div>
 
         <div class="my-500">
-            <h2>EsSearchBar props</h2>
+            <h2>
+                EsSearchBar props
+            </h2>
             <ds-prop-table
                 :rows="propTableRows"
                 :widths="propTableWidths" />
@@ -66,8 +76,16 @@ export default {
             docCode: '',
             showSearchBar: false,
             propTableRows: [
-                ['buttonText', 'Search', 'Text to display on the submit button.'],
-                ['placeholder', 'Try "best solar panels"', 'Placeholder text to display in the search input.'],
+                [
+                    'buttonText',
+                    'Search',
+                    'Text to display on the submit button.',
+                ],
+                [
+                    'placeholder',
+                    'Try "best solar panels"',
+                    'Placeholder text to display in the search input.',
+                ],
             ],
             propTableWidths: {
                 md: ['4', '2', '6'],
diff --git a/es-design-system/pages/organisms/es-nav-bar.vue b/es-design-system/pages/organisms/es-nav-bar.vue
index 73781dc1d..409af45ca 100644
--- a/es-design-system/pages/organisms/es-nav-bar.vue
+++ b/es-design-system/pages/organisms/es-nav-bar.vue
@@ -4,8 +4,7 @@
             EsNavBar
         </h1>
         <p>
-            The nav bar is a specialized component intended for use outside the normal content
-            container. See above.
+            The nav bar is a specialized component intended for use outside the normal content container. See above.
         </p>
 
         <p
@@ -57,7 +56,7 @@ export default {
     },
     async created() {
         if (this.$prism) {
-        /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */
+            /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */
             const docSource = await import('!raw-loader!./es-nav-bar.vue');
             const compSource = await import('!raw-loader!@energysage/es-vue-base/src/lib-components/EsNavBar.vue');
             /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import */
diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 5ea0e01ed..e17bb7e7a 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -3,7 +3,8 @@
         id="nav-main"
         class="nav-es-container">
         <div class="content-overlay" />
-        <nav class="nav-es-global navbar navbar-expand navbar-light py-0 font-size-base">
+        <nav
+            class="nav-es-global navbar navbar-expand navbar-light py-0 font-size-base">
             <!-- mobile hamburger menu button -->
             <div class="d-flex d-lg-none col-3 px-0">
                 <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
@@ -59,7 +60,7 @@
                 id="data--main-menu"
                 class="menu-checkbox main-menu-checkbox"
                 aria-labelledby="data--main-menu"
-                type="checkbox" />
+                type="checkbox">
             <!-- first-level menu on mobile, the whole nav on desktop-->
             <div
                 id="navbarNavDropdown"
@@ -123,8 +124,7 @@
                                 'd-lg-block': showSearch,
                             }">
                             <es-button
-                                variant="
-                            link"
+                                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
@@ -158,7 +158,8 @@
                         </div>
                     </b-container>
                     <!-- mobile+desktop product menus -->
-                    <b-container class="flex-lg-nowrap justify-content-lg-end product-menu">
+                    <b-container
+                        class="flex-lg-nowrap justify-content-lg-end product-menu">
                         <div class="row">
                             <es-nav-bar-product-menu
                                 v-for="product in globalContent.products"
@@ -187,7 +188,7 @@
                 id="data--account-menu"
                 class="menu-checkbox account-menu-checkbox"
                 aria-labelledby="data--account-menu"
-                type="checkbox" />
+                type="checkbox">
             <!-- mobile account menu -->
             <div class="menu top-level-menu align-items-start d-flex d-lg-none flex-grow-1">
                 <!-- menu header -->
diff --git a/es-vue-base/src/lib-components/EsSearchBar.vue b/es-vue-base/src/lib-components/EsSearchBar.vue
index a998a0acd..d341ed4e1 100644
--- a/es-vue-base/src/lib-components/EsSearchBar.vue
+++ b/es-vue-base/src/lib-components/EsSearchBar.vue
@@ -15,7 +15,9 @@
                 :placeholder="placeholder"
                 :value="searchText"
                 @keydown.enter="checkSearchText">
-                <template #label> Search bar </template>
+                <template #label>
+                    Search bar
+                </template>
                 <template #prefixIcon>
                     <icon-search />
                 </template>

From 14115c1660ef369bda571571676e40b207fac56d Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Tue, 19 Nov 2024 10:05:27 -0500
Subject: [PATCH 14/17] fix: set search form focus in mobile or desktop

---
 es-vue-base/src/lib-components/EsNavBar.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index e17bb7e7a..04769a727 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -340,7 +340,8 @@ export default {
         const productMenu = document.querySelector('.product-menu');
         const searchIconMobile = document.querySelector('.search-icon-mobile');
         const searchIconDesktop = document.querySelector('.search-icon-desktop');
-        const searchForm = document.getElementById('searchBarDesktop');
+        const searchFormMobile = document.getElementById('searchBarMobile');
+        const searchFormDesktop = document.getElementById('searchBarDesktop');
 
         // Function to show/hide search bar
         function toggle_search_bar(show_search_bar) {
@@ -350,7 +351,12 @@ export default {
             if (show_search_bar) {
                 searchIconMobile.classList.add('search-open');
                 searchIconDesktop.classList.add('search-open');
-                searchForm.focus();
+
+                if (searchFormMobile.checkVisibility()) {
+                    searchFormMobile.focus();
+                } else {
+                    searchFormDesktop.focus();
+                }
             } else {
                 searchIconMobile.classList.remove('search-open');
                 searchIconDesktop.classList.remove('search-open');

From a0a802213532c46c1d5770039140e65b52183064 Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Tue, 19 Nov 2024 11:40:37 -0500
Subject: [PATCH 15/17] fix: clean up variable names and comments

---
 es-vue-base/src/lib-components/EsNavBar.vue | 40 +++++++++++----------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 04769a727..9fc8985e3 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -147,7 +147,7 @@
                             <es-search-bar id="searchBarDesktop">
                                 <template #close>
                                     <es-button
-                                        class="position-absolute nav-button mb-100 nav-search-close"
+                                        class="position-absolute nav-button mb-100 nav-search-close-desktop"
                                         aria-label="Close search bar"
                                         style="right: 0"
                                         variant="link">
@@ -335,27 +335,29 @@ export default {
         const overlay = document.querySelector('.content-overlay');
 
         // Search bar elements for hiding/showing
-        const searchBarDesktop = document.querySelector('.nav-search-bar-desktop');
-        const searchBarMobile = document.querySelector('.nav-search-bar-mobile');
-        const productMenu = document.querySelector('.product-menu');
         const searchIconMobile = document.querySelector('.search-icon-mobile');
         const searchIconDesktop = document.querySelector('.search-icon-desktop');
-        const searchFormMobile = document.getElementById('searchBarMobile');
-        const searchFormDesktop = document.getElementById('searchBarDesktop');
+        const productMenu = document.querySelector('.product-menu');
+
+        const navSearchBarMobile = document.querySelector('.nav-search-bar-mobile');
+        const navSearchBarDesktop = document.querySelector('.nav-search-bar-desktop');
+        const searchBarMobile = document.getElementById('searchBarMobile');
+        const searchBarDesktop = document.getElementById('searchBarDesktop');
 
         // Function to show/hide search bar
         function toggle_search_bar(show_search_bar) {
-            searchBarDesktop.style.display = show_search_bar ? 'flex' : 'none';
-            searchBarMobile.style.display = show_search_bar ? 'flex' : 'none';
+            navSearchBarMobile.style.display = show_search_bar ? 'flex' : 'none';
+            navSearchBarDesktop.style.display = show_search_bar ? 'flex' : 'none';
             productMenu.style.display = show_search_bar ? 'none' : 'flex';
+
             if (show_search_bar) {
                 searchIconMobile.classList.add('search-open');
                 searchIconDesktop.classList.add('search-open');
 
-                if (searchFormMobile.checkVisibility()) {
-                    searchFormMobile.focus();
+                if (searchBarMobile.checkVisibility()) {
+                    searchBarMobile.focus();
                 } else {
-                    searchFormDesktop.focus();
+                    searchBarDesktop.focus();
                 }
             } else {
                 searchIconMobile.classList.remove('search-open');
@@ -368,7 +370,7 @@ export default {
             if (overlay_visible) {
                 overlay.classList.add('show');
             } else if (!overlay_visible
-                && searchBarDesktop.style.display === 'none' && searchBarMobile.style.display === 'none') {
+                && navSearchBarMobile.style.display === 'none' && navSearchBarDesktop.style.display === 'none') {
                 overlay.classList.remove('show');
             }
         }
@@ -394,7 +396,7 @@ export default {
         // Collapse all open menus on window resize
         window.addEventListener('resize', () => {
             if (mainMenuCheckbox.checked || accountMenuCheckbox.checked
-                || searchBarDesktop.style.display !== 'none' || searchBarMobile.style.display !== 'none') {
+                || navSearchBarMobile.style.display !== 'none' || navSearchBarDesktop.style.display !== 'none') {
                 collapse_mobile_menus();
             }
         });
@@ -419,26 +421,26 @@ export default {
                 });
             });
 
-        // Show overlay on click for mobile
+        // Click handlers for navbar search buttons
         document.querySelector('.search-toggle-mobile').addEventListener('click', () => {
-            const show = searchBarMobile.style.display === 'none';
+            const show = navSearchBarMobile.style.display === 'none';
             toggle_search_bar(show);
             show_overlay(show);
         });
 
-        // Show overlay on click for desktop
         document.querySelector('.search-toggle-desktop').addEventListener('click', () => {
-            const show = searchBarDesktop.style.display === 'none';
+            const show = navSearchBarDesktop.style.display === 'none';
             toggle_search_bar(show);
             show_overlay(show);
         });
 
-        document.querySelector('.nav-search-close').addEventListener('click', () => {
+        // Click handlers for search form close buttons
+        document.querySelector('.nav-search-close-mobile').addEventListener('click', () => {
             toggle_search_bar(false);
             show_overlay(false);
         });
 
-        document.querySelector('.nav-search-close-mobile').addEventListener('click', () => {
+        document.querySelector('.nav-search-close-desktop').addEventListener('click', () => {
             toggle_search_bar(false);
             show_overlay(false);
         });

From 9b1f2246ac7388ccc083ee6dc85952d823267683 Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Tue, 19 Nov 2024 11:55:04 -0500
Subject: [PATCH 16/17] fix: split toggle_search_bar routine

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

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 9fc8985e3..946119389 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -345,26 +345,29 @@ export default {
         const searchBarDesktop = document.getElementById('searchBarDesktop');
 
         // Function to show/hide search bar
-        function toggle_search_bar(show_search_bar) {
+        function toggle_search_bar_mobile(show_search_bar) {
             navSearchBarMobile.style.display = show_search_bar ? 'flex' : 'none';
+
+            if (show_search_bar) {
+                searchIconMobile.classList.add('search-open');
+                searchBarMobile.focus();
+            } else {
+                searchIconMobile.classList.remove('search-open');
+            }
+        }
+
+        // Function to show/hide search bar
+        function toggle_search_bar_desktop(show_search_bar) {
             navSearchBarDesktop.style.display = show_search_bar ? 'flex' : 'none';
             productMenu.style.display = show_search_bar ? 'none' : 'flex';
 
             if (show_search_bar) {
-                searchIconMobile.classList.add('search-open');
                 searchIconDesktop.classList.add('search-open');
-
-                if (searchBarMobile.checkVisibility()) {
-                    searchBarMobile.focus();
-                } else {
-                    searchBarDesktop.focus();
-                }
+                searchBarDesktop.focus();
             } else {
-                searchIconMobile.classList.remove('search-open');
                 searchIconDesktop.classList.remove('search-open');
             }
         }
-
         // Function to show/hide overlay
         function show_overlay(overlay_visible) {
             if (overlay_visible) {
@@ -384,7 +387,7 @@ export default {
         // Close all submenus, hide overlay, and unlock scrolling when menu is closed
         function collapse_mobile_menus() {
             uncheck_menus();
-            toggle_search_bar(false);
+            toggle_search_bar_mobile(false);
             show_overlay(false);
             document.body.style.overflow = 'visible';
         }
@@ -424,24 +427,24 @@ export default {
         // Click handlers for navbar search buttons
         document.querySelector('.search-toggle-mobile').addEventListener('click', () => {
             const show = navSearchBarMobile.style.display === 'none';
-            toggle_search_bar(show);
+            toggle_search_bar_mobile(show);
             show_overlay(show);
         });
 
         document.querySelector('.search-toggle-desktop').addEventListener('click', () => {
             const show = navSearchBarDesktop.style.display === 'none';
-            toggle_search_bar(show);
+            toggle_search_bar_desktop(show);
             show_overlay(show);
         });
 
         // Click handlers for search form close buttons
         document.querySelector('.nav-search-close-mobile').addEventListener('click', () => {
-            toggle_search_bar(false);
+            toggle_search_bar_mobile(false);
             show_overlay(false);
         });
 
         document.querySelector('.nav-search-close-desktop').addEventListener('click', () => {
-            toggle_search_bar(false);
+            toggle_search_bar_desktop(false);
             show_overlay(false);
         });
 

From 81bc949a0291a3e4ca06d581843eb5236a5aa77a Mon Sep 17 00:00:00 2001
From: Michael LeRoux <mike@energysage.com>
Date: Tue, 19 Nov 2024 14:30:14 -0500
Subject: [PATCH 17/17] fix: close search form when menus are opened

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

diff --git a/es-vue-base/src/lib-components/EsNavBar.vue b/es-vue-base/src/lib-components/EsNavBar.vue
index 946119389..4d8b710c9 100644
--- a/es-vue-base/src/lib-components/EsNavBar.vue
+++ b/es-vue-base/src/lib-components/EsNavBar.vue
@@ -417,6 +417,7 @@ 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
@@ -452,6 +453,7 @@ export default {
         mainMenuCheckbox.addEventListener('change', (event) => {
             if (event.target.checked) {
                 show_mobile_menus();
+                toggle_search_bar_mobile(false);
             } else {
                 collapse_mobile_menus();
             }
@@ -461,6 +463,7 @@ export default {
         accountMenuCheckbox.addEventListener('change', (event) => {
             if (event.target.checked) {
                 show_mobile_menus();
+                toggle_search_bar_mobile(false);
             } else {
                 collapse_mobile_menus();
             }