small NavbarSearch improvements

build/js/NavbarSearch.js

@@ -18,12 +18,13 @@ const JQUERY_NO_CONFLICT = $.fn[NAME]
 
 const SELECTOR_TOGGLE_BUTTON = '[data-widget="navbar-search"]'
 const SELECTOR_SEARCH_BLOCK = '.navbar-search-block'
-const SELECTOR_SEARCH_INPUT = '.navbar-search-block .form-control'
+const SELECTOR_SEARCH_INPUT = '.form-control'
 
 const CLASS_NAME_OPEN = 'navbar-search-open'
 
 const Default = {
-  resetOnClose: true
+  resetOnClose: true,
+  target: SELECTOR_SEARCH_BLOCK
 }
 
 /**
@@ -40,20 +41,20 @@ class NavbarSearch {
   // Public
 
   open() {
-    $(SELECTOR_SEARCH_BLOCK).css('display', 'flex').hide().fadeIn().addClass(CLASS_NAME_OPEN)
-    $(SELECTOR_SEARCH_INPUT).focus()
+    $(this._config.target).css('display', 'flex').hide().fadeIn().addClass(CLASS_NAME_OPEN)
+    $(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).focus()
   }
 
   close() {
-    $(SELECTOR_SEARCH_BLOCK).fadeOut().removeClass(CLASS_NAME_OPEN)
+    $(this._config.target).fadeOut().removeClass(CLASS_NAME_OPEN)
 
     if (this._config.resetOnClose) {
-      $(SELECTOR_SEARCH_INPUT).val('')
+      $(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).val('')
     }
   }
 
   toggle() {
-    if ($(SELECTOR_SEARCH_BLOCK).hasClass(CLASS_NAME_OPEN)) {
+    if ($(this._config.target).hasClass(CLASS_NAME_OPEN)) {
       this.close()
     } else {
       this.open()
@@ -65,9 +66,10 @@ class NavbarSearch {
   static _jQueryInterface(options) {
     return this.each(function () {
       let data = $(this).data(DATA_KEY)
+      const _options = $.extend({}, Default, $(this).data())
 
       if (!data) {
-        data = new NavbarSearch(this, options)
+        data = new NavbarSearch(this, _options)
         $(this).data(DATA_KEY, data)
       }
 

build/scss/_main-header.scss

@@ -142,6 +142,17 @@
       }
     }
   }
+
+  .navbar-search-block {
+    .form-control-navbar {
+      &:focus {
+        &,
+        + .input-group-append .btn-navbar {
+          color: $main-header-light-placeholder-color;
+        }
+      }
+    }
+  }
 }
 
 // Navbar Search