Add latest changes from gitlab-org/gitlab@master

2 files changed, 18 insertions, 2 deletions

diff --git a/app/assets/javascripts/header_search/components/app.vue b/app/assets/javascripts/header_search/components/app.vue
index 4406cacdf3f..adf304aebc7 100644
--- a/app/assets/javascripts/header_search/components/app.vue
+++ b/app/assets/javascripts/header_search/components/app.vue
@@ -120,9 +120,11 @@ export default {
     ...mapActions(['setSearch', 'fetchAutocompleteOptions', 'clearAutocomplete']),
     openDropdown() {
       this.showDropdown = true;
+      this.$emit('toggleDropdown', this.showDropdown);
     },
     closeDropdown() {
       this.showDropdown = false;
+      this.$emit('toggleDropdown', this.showDropdown);
     },
     submitSearch() {
       return visitUrl(this.currentFocusedOption?.url || this.searchQuery);
@@ -146,7 +148,7 @@ export default {
     v-outside="closeDropdown"
     role="search"
     :aria-label="$options.i18n.searchGitlab"
-    class="header-search gl-relative gl-rounded-base"
+    class="header-search gl-relative gl-rounded-base gl-w-full"
     :class="headerSearchActivityDescriptor"
   >
     <gl-search-box-by-type
diff --git a/app/assets/javascripts/header_search/index.js b/app/assets/javascripts/header_search/index.js
index 4af8513ecdb..b2c505d569f 100644
--- a/app/assets/javascripts/header_search/index.js
+++ b/app/assets/javascripts/header_search/index.js
@@ -7,6 +7,7 @@ Vue.use(Translate);
 
 export const initHeaderSearchApp = (search = '') => {
   const el = document.getElementById('js-header-search');
+  let navBarEl = null;
 
   if (!el) {
     return false;
@@ -19,8 +20,21 @@ export const initHeaderSearchApp = (search = '') => {
   return new Vue({
     el,
     store: createStore({ searchPath, issuesPath, mrPath, autocompletePath, searchContext, search }),
+    mounted() {
+      navBarEl = document.querySelector('.header-content');
+    },
     render(createElement) {
-      return createElement(HeaderSearchApp);
+      return createElement(HeaderSearchApp, {
+        on: {
+          toggleDropdown: (isVisible = false) => {
+            if (isVisible) {
+              navBarEl?.classList.add('header-search-is-active');
+            } else {
+              navBarEl?.classList.remove('header-search-is-active');
+            }
+          },
+        },
+      });
     },
   });
 };