feat: add search bar to nav bar

es-bs-base/scss/_nav.scss

@@ -29,6 +29,17 @@
   }
 }
 
+.nav-button {
+  &:hover {
+    background: variables.$blue-50 !important;
+  }
+
+  &:focus,
+  &.focus {
+    border-color: variables.$blue-500;
+  }
+}
+
 //
 // Tabs
 //

es-design-system/layouts/nav.vue

@@ -1,8 +1,11 @@
 <template>
     <div>
         <es-nav-bar
+            v-model="searchText"
             :account-content="accountContent"
-            :global-content="globalContent">
+            :global-content="globalContent"
+            show-search
+            @searchButtonClicked="searchButtonClicked">
             <template #logo>
                 <ds-es-logo />
             </template>
@@ -52,6 +55,11 @@ import { getEsNavBarAccountContent, getEsNavBarGlobalContent } from '@energysage
 /* eslint-disable vue/multi-word-component-names, vue/component-definition-name-casing */
 export default {
     name: 'NavLayout',
+    data() {
+        return {
+            searchText: '',
+        };
+    },
     computed: {
         accountContent() {
             return getEsNavBarAccountContent();
@@ -77,5 +85,11 @@ export default {
             return getEsNavBarGlobalContent();
         },
     },
+    methods: {
+        searchButtonClicked() {
+            /* eslint-disable-next-line no-console */
+            console.log('Searching...', this.searchText);
+        },
+    },
 };
 </script>

es-vue-base/src/lib-components/EsNavBar.vue

@@ -100,14 +100,50 @@
                                 <slot name="logo" />
                             </template>
                         </es-nav-bar-top-level-menu>
+                        <div
+                            v-if="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 dropdown-toggle d-none d-lg-flex flex-nowrap py-100"
+                                @click="toggleSearchBar()">
+                                <icon-search
+                                    class="align-self-center account-icon"
+                                    width="20px"
+                                    height="20px" />
+                            </es-button>
+                        </div>
                         <!-- desktop account menu -->
                         <es-nav-bar-account-menu
                             :auth-items="accountContent.loggedIn.items"
                             class="d-none d-lg-block pt-100"
                             :logged-out="accountContent.loggedOut" />
                     </b-container>
                     <!-- mobile+desktop product menus -->
-                    <b-container class="d-flex flex-lg-nowrap justify-content-lg-end product-menu">
+                    <b-container v-if="searchBarOpen">
+                        <div class="row w-100">
+                            <es-nav-bar-search-bar
+                                v-bind="$attrs"
+                                v-on="$listeners">
+                                <template #close>
+                                    <es-button
+                                        class="position-absolute nav-button"
+                                        aria-label="Close search bar"
+                                        style="right: 0"
+                                        variant="link"
+                                        @click="toggleSearchBar()">
+                                        <icon-x
+                                            width="30px"
+                                            height="30px" />
+                                    </es-button>
+                                </template>
+                            </es-nav-bar-search-bar>
+                        </div>
+                    </b-container>
+                    <b-container
+                        v-else
+                        class="d-flex flex-lg-nowrap justify-content-lg-end product-menu">
                         <div class="row">
                             <es-nav-bar-product-menu
                                 v-for="product in globalContent.products"
@@ -225,6 +261,7 @@ import EsNavBarAccountMenu from './EsNavBarAccountMenu.vue';
 import EsNavBarLink from './EsNavBarLink.vue';
 import EsNavBarProductMenu from './EsNavBarProductMenu.vue';
 import EsNavBarTopLevelMenu from './EsNavBarTopLevelMenu.vue';
+import EsNavBarSearchBar from './EsNavBarSearchBar.vue';
 
 export default {
     name: 'EsNavBar',
@@ -234,17 +271,27 @@ export default {
         EsNavBarLink,
         EsNavBarProductMenu,
         EsNavBarTopLevelMenu,
+        EsNavBarSearchBar,
     },
     props: {
         accountContent: {
             type: Object,
             required: true,
         },
+        showSearch: {
+            type: Boolean,
+            default: false,
+        },
         globalContent: {
             type: Object,
             required: true,
         },
     },
+    data() {
+        return {
+            searchBarOpen: false,
+        };
+    },
     mounted() {
         // CUSTOM GLOBAL-NAV SCRIPT STARTS
 
@@ -403,5 +450,13 @@ export default {
 
         // CUSTOM GLOBAL-NAV SCRIPT ENDS
     },
+    methods: {
+        toggleSearchBar() {
+            this.searchBarOpen = !this.searchBarOpen;
+        },
+        searchButtonClicked() {
+            this.$emit('searchButtonClicked');
+        },
+    },
 };
 </script>

es-vue-base/src/lib-components/EsNavBarSearchBar.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="align-items-center w-100 d-flex justify-content-center position-relative">
+        <div class="d-flex align-items-center mx-auto justify-content-center w-100">
+            <es-form-input
+                id="searchBar"
+                class="mt-3 w-50"
+                v-bind="$attrs"
+                label-sr-only
+                :placeholder="label"
+                @keyup.enter="$emit('searchButtonClicked')"
+                v-on="$listeners">
+                <template #prefixIcon>
+                    <icon-search />
+                </template>
+            </es-form-input>
+            <es-button
+                class="ml-50"
+                @click="$emit('searchButtonClicked')">
+                {{ buttonText }}
+            </es-button>
+        </div>
+        <slot name="close" />
+    </div>
+</template>
+
+<script lang="js">
+import EsButton from './EsButton.vue';
+import EsFormInput from './EsFormInput.vue';
+import IconSearch from '../lib-icons/icon-search.vue';
+
+export default {
+    name: 'EsNavBarSearchBar',
+    components: {
+        EsButton,
+        EsFormInput,
+        IconSearch,
+    },
+    props: {
+        label: {
+            type: String,
+            default: 'Try "best solar panels"',
+        },
+        buttonText: {
+            type: String,
+            default: 'Search',
+        },
+    },
+};
+</script>

es-vue-base/tests/EsZipCodeForm.spec.js

@@ -19,7 +19,7 @@ describe('EsZipCodeForm', () => {
         // Simulate a delay (e.g., 2 seconds)
         await new Promise((resolve) => {
             setTimeout(() => {
-              resolve();
+                resolve();
             }, 2000);
         });