6 * navbar-expand-md fixed-top
10 * @class Roo.bootstrap.nav.Headerbar
11 * @extends Roo.bootstrap.nav.Simplebar
12 * @children Roo.bootstrap.nav.Group Roo.bootstrap.Container Roo.bootstrap.form.Form Roo.bootstrap.Row Roo.bootstrap.Column Roo.bootstrap.Link
13 * Bootstrap Sidebar class
15 * @cfg {String} brand what is brand
16 * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
17 * @cfg {String} brand_href href of the brand
18 * @cfg {Boolean} srButton generate the (screen reader / mobile) sr-only button default true
19 * @cfg {Boolean} autohide a top nav bar header that hides on scroll.
20 * @cfg {Boolean} desktopCenter should the header be centered on desktop using a container class
21 * @cfg {Roo.bootstrap.Row} mobilerow - a row to display on mobile only..
24 * Create a new Sidebar
25 * @param {Object} config The config object
29 Roo.bootstrap.nav.Headerbar = function(config){
30 Roo.bootstrap.nav.Headerbar.superclass.constructor.call(this, config);
34 Roo.extend(Roo.bootstrap.nav.Headerbar, Roo.bootstrap.nav.Simplebar, {
41 desktopCenter : false,
44 getAutoCreate : function(){
47 tag: this.nav || 'nav',
48 cls: 'navbar navbar-expand-md',
54 if (this.desktopCenter) {
55 cn.push({cls : 'container', cn : []});
63 cls: 'navbar-toggle navbar-toggler',
64 'data-toggle': 'collapse',
69 html: 'Toggle navigation'
73 cls: 'icon-bar navbar-toggler-icon'
86 cn.push( Roo.bootstrap.version == 4 ? btn : {
97 cls: Roo.bootstrap.version == 4 ? 'nav flex-row roo-navbar-collapse collapse navbar-collapse' : 'collapse navbar-collapse roo-navbar-collapse',
101 cfg.cls += this.inverse ? ' navbar-inverse navbar-dark bg-dark' : ' navbar-default';
103 if (['light','white'].indexOf(this.weight) > -1) {
104 cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
106 cfg.cls += ' bg-' + this.weight;
109 if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
110 cfg.cls += ' navbar-' + this.position + ' ' + this.position ;
112 // tag can override this..
114 cfg.tag = this.tag || (this.position == 'fixed-bottom' ? 'footer' : 'header');
117 if (this.brand !== '') {
118 var cp = Roo.bootstrap.version == 4 ? cn : cn[0].cn;
119 cp.unshift({ // changed from push ?? BS4 needs it at the start? - does this break or exsiting?
121 href: this.brand_href ? this.brand_href : '#',
130 cfg.cls += ' main-nav';
138 getHeaderChildContainer : function()
140 if (this.srButton && this.el.select('.navbar-header').getCount()) {
141 return this.el.select('.navbar-header',true).first();
144 return this.getChildContainer();
147 getChildContainer : function()
150 return this.el.select('.roo-navbar-collapse',true).first();
155 initEvents : function()
157 Roo.bootstrap.nav.Headerbar.superclass.initEvents.call(this);
164 Roo.get(document).on('scroll',function(e) {
165 var ns = Roo.get(document).getScroll().top;
170 ft.removeClass('slideDown');
171 ft.addClass('slideUp');
174 ft.removeClass('slideUp');
175 ft.addClass('slideDown');