Create site wide search bar

build/grunt/babel.js

@@ -1,4 +1,4 @@
-// Compile ECMA6 to ECMA5
+// Compile ES2015 to JS
 'use strict';
 
 module.exports = function (grunt) {
@@ -15,6 +15,7 @@ module.exports = function (grunt) {
         'build/js/dist/Widget.js'        : 'build/js/src/Widget.js',
         'build/js/dist/ControlSidebar.js': 'build/js/src/ControlSidebar.js',
         'build/js/dist/Search.js'        : 'build/js/src/Search.js',
+        'build/js/dist/SiteSearch.js'    : 'build/js/src/SiteSearch.js',
         'dist/js/adminlte.js'            : 'build/js/src/AdminLTE.js'
       }
     }

build/grunt/concat.js

@@ -14,7 +14,8 @@ module.exports = function (grunt) {
         'build/js/src/PushMenu.js',
         'build/js/src/Widget.js',
         'build/js/src/ControlSidebar.js',
-        'build/js/src/Search.js'
+        'build/js/src/Search.js',
+        'build/js/src/SiteSearch.js'
       ],
       dest: 'build/js/src/AdminLTE.js'
     }

build/js/dist/SiteSearch.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+/**
+ * --------------------------------------------
+ * AdminLTE SiteSearch.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+var SiteSearch = function ($) {
+  'use strict';
+
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  var NAME = 'SiteSearch';
+  var DATA_KEY = 'lte.site-search';
+  var EVENT_KEY = '.' + DATA_KEY;
+  var JQUERY_NO_CONFLICT = $.fn[NAME];
+
+  var Event = {};
+
+  var Selector = {
+    TOGGLE_BUTTON: '[data-widget="site-search"]',
+    SEARCH_BLOCK: '.site-search-block',
+    SEARCH_BACKDROP: '.site-search-backdrop',
+    SEARCH_INPUT: '.site-search-block .form-control'
+  };
+
+  var ClassName = {
+    OPEN: 'site-search-open'
+  };
+
+  var Default = {
+    transitionSpeed: 300
+  };
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+
+  var SiteSearch = function () {
+    function SiteSearch(_element, _options) {
+      _classCallCheck(this, SiteSearch);
+
+      this.element = _element;
+      this.options = $.extend({}, Default, _options);
+    }
+
+    // Public
+
+    _createClass(SiteSearch, [{
+      key: 'open',
+      value: function open() {
+        $(Selector.SEARCH_BLOCK).slideDown(this.options.transitionSpeed);
+        $(Selector.SEARCH_BACKDROP).show(0);
+        $(Selector.SEARCH_INPUT).focus();
+        $(Selector.SEARCH_BLOCK).addClass(ClassName.OPEN);
+      }
+    }, {
+      key: 'close',
+      value: function close() {
+        $(Selector.SEARCH_BLOCK).slideUp(this.options.transitionSpeed);
+        $(Selector.SEARCH_BACKDROP).hide(0);
+        $(Selector.SEARCH_BLOCK).removeClass(ClassName.OPEN);
+      }
+    }, {
+      key: 'toggle',
+      value: function toggle() {
+        if ($(Selector.SEARCH_BLOCK).hasClass(ClassName.OPEN)) {
+          this.close();
+        } else {
+          this.open();
+        }
+      }
+
+      // Static
+
+    }], [{
+      key: '_jQueryInterface',
+      value: function _jQueryInterface(options) {
+        return this.each(function () {
+          var data = $(this).data(DATA_KEY);
+
+          if (!data) {
+            data = new SiteSearch(this, options);
+            $(this).data(DATA_KEY, data);
+          }
+
+          if (!/toggle|close/.test(options)) {
+            throw Error('Undefined method ' + options);
+          }
+
+          data[options]();
+        });
+      }
+    }]);
+
+    return SiteSearch;
+  }();
+
+  /**
+   * Data API
+   * ====================================================
+   */
+
+
+  $(document).on('click', Selector.TOGGLE_BUTTON, function (event) {
+    event.preventDefault();
+
+    var button = $(event.currentTarget);
+
+    if (button.data('widget') !== 'site-search') {
+      button = button.closest(Selector.TOGGLE_BUTTON);
+    }
+
+    SiteSearch._jQueryInterface.call(button, 'toggle');
+  });
+
+  $(document).on('click', Selector.SEARCH_BACKDROP, function (event) {
+    var backdrop = $(event.currentTarget);
+    SiteSearch._jQueryInterface.call(backdrop, 'close');
+  });
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = SiteSearch._jQueryInterface;
+  $.fn[NAME].Constructor = SiteSearch;
+  $.fn[NAME].noConflict = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT;
+    return SiteSearch._jQueryInterface;
+  };
+
+  return SiteSearch;
+}(jQuery);
+//# sourceMappingURL=SiteSearch.js.map

build/js/src/AdminLTE.js

@@ -1,6 +1,6 @@
 /*!
  * AdminLTE v3.0.0-alpha (https://almsaeedstudio.com)
- * Copyright 2014-2016 Abdullah Almsaeed <abdullah@almsaeedstudio.com>
+ * Copyright 2014-2017 Abdullah Almsaeed <abdullah@almsaeedstudio.com>
  * Project website Almsaeed Studio (https://almsaeedstudio.com)
  * Licensed under MIT (https://github.com/almasaeed2010/AdminLTE/blob/master/LICENSE)
  */
@@ -12,9 +12,9 @@ const Layout = (($) => {
    * ====================================================
    */
 
-  const NAME = 'Layout'
-  const DATA_KEY = 'lte.layout'
-  const EVENT_KEY = `.${DATA_KEY}`
+  const NAME               = 'Layout'
+  const DATA_KEY           = 'lte.layout'
+  const EVENT_KEY          = `.${DATA_KEY}`
   const JQUERY_NO_CONFLICT = $.fn[NAME]
 
   const Event = {
@@ -22,19 +22,19 @@ const Layout = (($) => {
   }
 
   const Selector = {
-    SIDEBAR: '.main-sidebar',
-    HEADER: '.main-header',
-    CONTENT: '.content-wrapper',
-    CONTENT_HEADER: '.content-header',
-    WRAPPER: '.wrapper',
+    SIDEBAR        : '.main-sidebar',
+    HEADER         : '.main-header',
+    CONTENT        : '.content-wrapper',
+    CONTENT_HEADER : '.content-header',
+    WRAPPER        : '.wrapper',
     CONTROL_SIDEBAR: '.control-sidebar',
-    LAYOUT_FIXED: '.layout-fixed',
-    FOOTER: '.main-footer'
+    LAYOUT_FIXED   : '.layout-fixed',
+    FOOTER         : '.main-footer'
   }
 
   const ClassName = {
-    HOLD: 'hold-transition',
-    SIDEBAR: 'main-sidebar',
+    HOLD        : 'hold-transition',
+    SIDEBAR     : 'main-sidebar',
     LAYOUT_FIXED: 'layout-fixed'
   }
 
@@ -55,12 +55,12 @@ const Layout = (($) => {
 
     fixLayoutHeight() {
       let heights = [
-          $(window).height(),
-          $(Selector.HEADER).outerHeight(),
-          $(Selector.FOOTER).outerHeight(),
-          $(Selector.SIDEBAR).height()
-        ],
-        max = this._max(heights)
+            $(window).height(),
+            $(Selector.HEADER).outerHeight(),
+            $(Selector.FOOTER).outerHeight(),
+            $(Selector.SIDEBAR).height()
+          ],
+          max     = this._max(heights)
 
       $(Selector.CONTENT).css('min-height', max - (heights[1] + heights[2]))
     }
@@ -130,7 +130,7 @@ const Layout = (($) => {
 
   $.fn[NAME] = Layout._jQueryInterface
   $.fn[NAME].Constructor = Layout
-  $.fn[NAME].noConflict = function () {
+  $.fn[NAME].noConflict  = function () {
     $.fn[NAME] = JQUERY_NO_CONFLICT
     return Layout._jQueryInterface
   }
@@ -763,3 +763,125 @@ const Search = (($) => {
   return Search
 
 })(jQuery)
+
+const SiteSearch = (($) => {
+  'use strict'
+
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  const NAME               = 'SiteSearch'
+  const DATA_KEY           = 'lte.site-search'
+  const EVENT_KEY          = `.${DATA_KEY}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+  const Event = {}
+
+  const Selector = {
+    TOGGLE_BUTTON  : '[data-widget="site-search"]',
+    SEARCH_BLOCK   : '.site-search-block',
+    SEARCH_BACKDROP: '.site-search-backdrop',
+    SEARCH_INPUT   : `.site-search-block .form-control`
+  }
+
+  const ClassName = {
+    OPEN: 'site-search-open'
+  }
+
+  const Default = {
+    transitionSpeed: 300
+  }
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+
+  class SiteSearch {
+
+    constructor(_element, _options) {
+      this.element = _element
+      this.options = $.extend({}, Default, _options);
+    }
+
+    // Public
+
+    open() {
+      $(Selector.SEARCH_BLOCK).slideDown(this.options.transitionSpeed)
+      $(Selector.SEARCH_BACKDROP).show(0)
+      $(Selector.SEARCH_INPUT).focus();
+      $(Selector.SEARCH_BLOCK).addClass(ClassName.OPEN)
+    }
+
+    close() {
+      $(Selector.SEARCH_BLOCK).slideUp(this.options.transitionSpeed)
+      $(Selector.SEARCH_BACKDROP).hide(0)
+      $(Selector.SEARCH_BLOCK).removeClass(ClassName.OPEN)
+    }
+
+    toggle() {
+      if ($(Selector.SEARCH_BLOCK).hasClass(ClassName.OPEN)) {
+        this.close()
+      } else {
+        this.open()
+      }
+    }
+
+    // Static
+
+    static _jQueryInterface(options) {
+      return this.each(function () {
+        let data = $(this).data(DATA_KEY)
+
+        if (!data) {
+          data = new SiteSearch(this, options)
+          $(this).data(DATA_KEY, data)
+        }
+
+        if(!/toggle|close/.test(options)) {
+          throw Error(`Undefined method ${options}`)
+        }
+
+        data[options]()
+      })
+    }
+  }
+
+  /**
+   * Data API
+   * ====================================================
+   */
+  $(document).on('click', Selector.TOGGLE_BUTTON, (event) => {
+    event.preventDefault();
+
+    let button = $(event.currentTarget)
+
+    if (button.data('widget') !== 'site-search') {
+      button = button.closest(Selector.TOGGLE_BUTTON)
+    }
+
+    SiteSearch._jQueryInterface.call(button, 'toggle')
+  });
+
+  $(document).on('click', Selector.SEARCH_BACKDROP, (event) => {
+    let backdrop = $(event.currentTarget)
+    SiteSearch._jQueryInterface.call(backdrop, 'close')
+  });
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = SiteSearch._jQueryInterface
+  $.fn[NAME].Constructor = SiteSearch
+  $.fn[NAME].noConflict  = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return SiteSearch._jQueryInterface
+  }
+
+  return SiteSearch
+
+})(jQuery)

build/js/src/Layout.js

@@ -13,9 +13,9 @@ const Layout = (($) => {
    * ====================================================
    */
 
-  const NAME = 'Layout'
-  const DATA_KEY = 'lte.layout'
-  const EVENT_KEY = `.${DATA_KEY}`
+  const NAME               = 'Layout'
+  const DATA_KEY           = 'lte.layout'
+  const EVENT_KEY          = `.${DATA_KEY}`
   const JQUERY_NO_CONFLICT = $.fn[NAME]
 
   const Event = {
@@ -23,19 +23,19 @@ const Layout = (($) => {
   }
 
   const Selector = {
-    SIDEBAR: '.main-sidebar',
-    HEADER: '.main-header',
-    CONTENT: '.content-wrapper',
-    CONTENT_HEADER: '.content-header',
-    WRAPPER: '.wrapper',
+    SIDEBAR        : '.main-sidebar',
+    HEADER         : '.main-header',
+    CONTENT        : '.content-wrapper',
+    CONTENT_HEADER : '.content-header',
+    WRAPPER        : '.wrapper',
     CONTROL_SIDEBAR: '.control-sidebar',
-    LAYOUT_FIXED: '.layout-fixed',
-    FOOTER: '.main-footer'
+    LAYOUT_FIXED   : '.layout-fixed',
+    FOOTER         : '.main-footer'
   }
 
   const ClassName = {
-    HOLD: 'hold-transition',
-    SIDEBAR: 'main-sidebar',
+    HOLD        : 'hold-transition',
+    SIDEBAR     : 'main-sidebar',
     LAYOUT_FIXED: 'layout-fixed'
   }
 
@@ -56,12 +56,12 @@ const Layout = (($) => {
 
     fixLayoutHeight() {
       let heights = [
-          $(window).height(),
-          $(Selector.HEADER).outerHeight(),
-          $(Selector.FOOTER).outerHeight(),
-          $(Selector.SIDEBAR).height()
-        ],
-        max = this._max(heights)
+            $(window).height(),
+            $(Selector.HEADER).outerHeight(),
+            $(Selector.FOOTER).outerHeight(),
+            $(Selector.SIDEBAR).height()
+          ],
+          max     = this._max(heights)
 
       $(Selector.CONTENT).css('min-height', max - (heights[1] + heights[2]))
     }
@@ -131,7 +131,7 @@ const Layout = (($) => {
 
   $.fn[NAME] = Layout._jQueryInterface
   $.fn[NAME].Constructor = Layout
-  $.fn[NAME].noConflict = function () {
+  $.fn[NAME].noConflict  = function () {
     $.fn[NAME] = JQUERY_NO_CONFLICT
     return Layout._jQueryInterface
   }

build/js/src/SiteSearch.js

@@ -0,0 +1,128 @@
+/**
+ * --------------------------------------------
+ * AdminLTE SiteSearch.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+const SiteSearch = (($) => {
+  'use strict'
+
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  const NAME               = 'SiteSearch'
+  const DATA_KEY           = 'lte.site-search'
+  const EVENT_KEY          = `.${DATA_KEY}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+  const Event = {}
+
+  const Selector = {
+    TOGGLE_BUTTON  : '[data-widget="site-search"]',
+    SEARCH_BLOCK   : '.site-search-block',
+    SEARCH_BACKDROP: '.site-search-backdrop',
+    SEARCH_INPUT   : `.site-search-block .form-control`
+  }
+
+  const ClassName = {
+    OPEN: 'site-search-open'
+  }
+
+  const Default = {
+    transitionSpeed: 300
+  }
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+
+  class SiteSearch {
+
+    constructor(_element, _options) {
+      this.element = _element
+      this.options = $.extend({}, Default, _options);
+    }
+
+    // Public
+
+    open() {
+      $(Selector.SEARCH_BLOCK).slideDown(this.options.transitionSpeed)
+      $(Selector.SEARCH_BACKDROP).show(0)
+      $(Selector.SEARCH_INPUT).focus();
+      $(Selector.SEARCH_BLOCK).addClass(ClassName.OPEN)
+    }
+
+    close() {
+      $(Selector.SEARCH_BLOCK).slideUp(this.options.transitionSpeed)
+      $(Selector.SEARCH_BACKDROP).hide(0)
+      $(Selector.SEARCH_BLOCK).removeClass(ClassName.OPEN)
+    }
+
+    toggle() {
+      if ($(Selector.SEARCH_BLOCK).hasClass(ClassName.OPEN)) {
+        this.close()
+      } else {
+        this.open()
+      }
+    }
+
+    // Static
+
+    static _jQueryInterface(options) {
+      return this.each(function () {
+        let data = $(this).data(DATA_KEY)
+
+        if (!data) {
+          data = new SiteSearch(this, options)
+          $(this).data(DATA_KEY, data)
+        }
+
+        if(!/toggle|close/.test(options)) {
+          throw Error(`Undefined method ${options}`)
+        }
+
+        data[options]()
+      })
+    }
+  }
+
+  /**
+   * Data API
+   * ====================================================
+   */
+  $(document).on('click', Selector.TOGGLE_BUTTON, (event) => {
+    event.preventDefault();
+
+    let button = $(event.currentTarget)
+
+    if (button.data('widget') !== 'site-search') {
+      button = button.closest(Selector.TOGGLE_BUTTON)
+    }
+
+    SiteSearch._jQueryInterface.call(button, 'toggle')
+  });
+
+  $(document).on('click', Selector.SEARCH_BACKDROP, (event) => {
+    let backdrop = $(event.currentTarget)
+    SiteSearch._jQueryInterface.call(backdrop, 'close')
+  });
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = SiteSearch._jQueryInterface
+  $.fn[NAME].Constructor = SiteSearch
+  $.fn[NAME].noConflict  = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return SiteSearch._jQueryInterface
+  }
+
+  return SiteSearch
+
+})(jQuery)

build/scss/AdminLTE.scss

@@ -40,6 +40,7 @@
 @import "labels";
 @import "direct-chat";
 @import "users-list";
+@import "_site-search";
 @import "carousel";
 @import "modal";
 @import "social-widgets";

build/scss/_boxes.scss

@@ -268,10 +268,10 @@
   }
 
   .box-pane {
-    @include border-radius-sides(0, 0, $box-border-radius, 0);
+    //@include border-radius-sides(0, 0, $box-border-radius, 0);
   }
   .box-pane-right {
-    @include border-radius-sides(0, 0, 0, $box-border-radius);
+    border-bottom-right-radius: $box-border-radius;
   }
 }
 

build/scss/_header.scss

@@ -52,7 +52,7 @@
 
   .open > .nav-link,
   .nav-link:hover {
-    background: rgba(#000, .1);
+    background: rgba(0, 0, 0, .1);
   }
 
   .has-img {

build/scss/_site-search.scss

@@ -0,0 +1,62 @@
+.site-search-block {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1100;
+  box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
+  background: $input-bg;
+
+  .site-search-backdrop {
+    content: ' ';
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.2);
+    z-index: -1;
+  }
+
+  .form-control {
+    border: 0;
+    border-radius: 0;
+    padding-left: 60px;
+    padding-right: 60px;
+  }
+
+  &,
+  .form-control,
+  .site-search-close {
+    height: $main-header-height;
+  }
+
+  .site-search-close,
+  .site-search-submit {
+    position: absolute;
+    top: 0;
+    display: block;
+    color: #444;
+    width: 50px;
+    text-align: center;
+    line-height: $main-header-height;
+    cursor: pointer;
+    &:hover {
+      color: #999;
+      text-decoration: none;
+    }
+  }
+
+  .site-search-close {
+    left: 0;
+  }
+
+  .site-search-submit {
+    right: 0;
+    background: #fff;
+    border: 0;
+    padding: 0;
+  }
+}

dist/css/adminlte.css

@@ -7888,12 +7888,8 @@ body,
   margin: -9px;
 }
 
-.box-body .box-pane {
-  border-radius: 0 0 3px 0;
-}
-
 .box-body .box-pane-right {
-  border-radius: 0 0 0 3px;
+  border-bottom-right-radius: 3px;
 }
 
 .box-footer {
@@ -9190,6 +9186,71 @@ table.text-xs-center, table.text-xs-center td, table.text-xs-center th {
   font-size: 12px;
 }
 
+.site-search-block {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1100;
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
+  background: #fff;
+}
+
+.site-search-block .site-search-backdrop {
+  content: ' ';
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: -1;
+}
+
+.site-search-block .form-control {
+  border: 0;
+  border-radius: 0;
+  padding-left: 60px;
+  padding-right: 60px;
+}
+
+.site-search-block,
+.site-search-block .form-control,
+.site-search-block .site-search-close {
+  height: 54px;
+}
+
+.site-search-block .site-search-close,
+.site-search-block .site-search-submit {
+  position: absolute;
+  top: 0;
+  display: block;
+  color: #444;
+  width: 50px;
+  text-align: center;
+  line-height: 54px;
+  cursor: pointer;
+}
+
+.site-search-block .site-search-close:hover,
+.site-search-block .site-search-submit:hover {
+  color: #999;
+  text-decoration: none;
+}
+
+.site-search-block .site-search-close {
+  left: 0;
+}
+
+.site-search-block .site-search-submit {
+  right: 0;
+  background: #fff;
+  border: 0;
+  padding: 0;
+}
+
 /*
  * Component: Carousel
  * -------------------

dist/js/adminlte.js

@@ -6,7 +6,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 /*!
  * AdminLTE v3.0.0-alpha (https://almsaeedstudio.com)
- * Copyright 2014-2016 Abdullah Almsaeed <abdullah@almsaeedstudio.com>
+ * Copyright 2014-2017 Abdullah Almsaeed <abdullah@almsaeedstudio.com>
  * Project website Almsaeed Studio (https://almsaeedstudio.com)
  * Licensed under MIT (https://github.com/almasaeed2010/AdminLTE/blob/master/LICENSE)
  */
@@ -858,4 +858,137 @@ var Search = function ($) {
 
   return Search;
 }(jQuery);
+
+var SiteSearch = function ($) {
+  'use strict';
+
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  var NAME = 'SiteSearch';
+  var DATA_KEY = 'lte.site-search';
+  var EVENT_KEY = '.' + DATA_KEY;
+  var JQUERY_NO_CONFLICT = $.fn[NAME];
+
+  var Event = {};
+
+  var Selector = {
+    TOGGLE_BUTTON: '[data-widget="site-search"]',
+    SEARCH_BLOCK: '.site-search-block',
+    SEARCH_BACKDROP: '.site-search-backdrop',
+    SEARCH_INPUT: '.site-search-block .form-control'
+  };
+
+  var ClassName = {
+    OPEN: 'site-search-open'
+  };
+
+  var Default = {
+    transitionSpeed: 300
+  };
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+
+  var SiteSearch = function () {
+    function SiteSearch(_element, _options) {
+      _classCallCheck(this, SiteSearch);
+
+      this.element = _element;
+      this.options = $.extend({}, Default, _options);
+    }
+
+    // Public
+
+    _createClass(SiteSearch, [{
+      key: 'open',
+      value: function open() {
+        $(Selector.SEARCH_BLOCK).slideDown(this.options.transitionSpeed);
+        $(Selector.SEARCH_BACKDROP).show(0);
+        $(Selector.SEARCH_INPUT).focus();
+        $(Selector.SEARCH_BLOCK).addClass(ClassName.OPEN);
+      }
+    }, {
+      key: 'close',
+      value: function close() {
+        $(Selector.SEARCH_BLOCK).slideUp(this.options.transitionSpeed);
+        $(Selector.SEARCH_BACKDROP).hide(0);
+        $(Selector.SEARCH_BLOCK).removeClass(ClassName.OPEN);
+      }
+    }, {
+      key: 'toggle',
+      value: function toggle() {
+        if ($(Selector.SEARCH_BLOCK).hasClass(ClassName.OPEN)) {
+          this.close();
+        } else {
+          this.open();
+        }
+      }
+
+      // Static
+
+    }], [{
+      key: '_jQueryInterface',
+      value: function _jQueryInterface(options) {
+        return this.each(function () {
+          var data = $(this).data(DATA_KEY);
+
+          if (!data) {
+            data = new SiteSearch(this, options);
+            $(this).data(DATA_KEY, data);
+          }
+
+          if (!/toggle|close/.test(options)) {
+            throw Error('Undefined method ' + options);
+          }
+
+          data[options]();
+        });
+      }
+    }]);
+
+    return SiteSearch;
+  }();
+
+  /**
+   * Data API
+   * ====================================================
+   */
+
+
+  $(document).on('click', Selector.TOGGLE_BUTTON, function (event) {
+    event.preventDefault();
+
+    var button = $(event.currentTarget);
+
+    if (button.data('widget') !== 'site-search') {
+      button = button.closest(Selector.TOGGLE_BUTTON);
+    }
+
+    SiteSearch._jQueryInterface.call(button, 'toggle');
+  });
+
+  $(document).on('click', Selector.SEARCH_BACKDROP, function (event) {
+    var backdrop = $(event.currentTarget);
+    SiteSearch._jQueryInterface.call(backdrop, 'close');
+  });
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = SiteSearch._jQueryInterface;
+  $.fn[NAME].Constructor = SiteSearch;
+  $.fn[NAME].noConflict = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT;
+    return SiteSearch._jQueryInterface;
+  };
+
+  return SiteSearch;
+}(jQuery);
 //# sourceMappingURL=adminlte.js.map

starter.html

@@ -38,8 +38,18 @@ to get the desired effect
 |               | sidebar-mini                            |
 |---------------------------------------------------------|
 -->
-<body class="hold-transition skin-blue">
+<body class="hold-transition skin-blue sidebar-mini">
 <div class="wrapper">
+  <!-- Site Wide Search -->
+  <div class="site-search-block">
+    <a href="#" class="site-search-close" data-widget="site-search"><i class="fa fa-arrow-left"></i></a>
+    <form action="#" method="get">
+      <input name="query" type="search" class="form-control" placeholder="Site Search">
+      <button type="submit" class="site-search-submit"><i class="fa fa-search"></i></button>
+    </form>
+    <div class="site-search-backdrop"></div>
+  </div>
+
   <!-- Navbar -->
   <nav class="main-header navbar navbar-sticky-top bg-primary navbar-dark">
     <!-- Logo -->
@@ -144,14 +154,9 @@ to get the desired effect
           <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
         </div>
       </li>
-      <li class="nav-item dropdown">
-        <a class="nav-link" data-toggle="dropdown" href="#"><i class="fa fa-search"></i></a>
-        <div class="dropdown-menu">
-          <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Profile</a>
-          <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> History</a>
-          <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Usage</a>
-          <a href="#" class="dropdown-item"><i class="fa fa-user margin-r-5"></i> Logout</a>
-        </div>
+      <!-- SEARCH FORM -->
+      <li class="nav-item">
+        <a href="#" class="nav-link" data-widget="site-search"><i class="fa fa-search"></i></a>
       </li>
       <li class="nav-item">
         <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"><i class="fa fa-th-large"></i></a>