github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Create site wide search bar

pull/1707/head
Abdullah Almsaeed 2017-01-03 10:42:20 -05:00
parent b2a83e147f
commit cfe8c644f4
20 changed files with 728 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/grunt/babel.js
View File

@ -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'
}
}

3
build/grunt/concat.js
View File

@ -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'
}

2
build/js/dist/Layout.js.map vendored
View File

File diff suppressed because one or more lines are too long

146
build/js/dist/SiteSearch.js vendored Normal file
View File

@ -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

1
build/js/dist/SiteSearch.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

162
build/js/src/AdminLTE.js
View File

@ -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)

38
build/js/src/Layout.js
View File

@ -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
}

128
build/js/src/SiteSearch.js Normal file
View File

@ -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)

1
build/scss/AdminLTE.scss
View File

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

4
build/scss/_boxes.scss
View File

@ -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;
}
}

2
build/scss/_header.scss
View File

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

62
build/scss/_site-search.scss Normal file
View File

@ -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;
}
}

71
dist/css/adminlte.css vendored
View File

@ -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
* -------------------

3
dist/css/adminlte.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
dist/css/adminlte.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

135
dist/js/adminlte.js vendored
View File

@ -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

2
dist/js/adminlte.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/adminlte.min.js vendored
View File

File diff suppressed because one or more lines are too long

23
starter.html
View File

@ -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>