//Roo.log(this.el.select('.navbar-toggle',true));
this.el.select('.navbar-toggle',true).on('click', function() {
if(this.fireEvent('beforetoggle', this) !== false){
- this.el.select('.navbar-collapse',true).toggleClass('in');
+ var ce = this.el.select('.navbar-collapse',true).first();
+ ce.toggleClass('in'); // old...
+ if (ce.hasClass('collapse')) {
+ // show it...
+ ce.removeClass('collapse');
+ ce.addClass('collapsing');
+ var h = ce.getHeight();
+ ce.setHeight(0); // resize it ...
+
+ ce.removeClass('collapsing');
+ ce.addClass('collapsing');
+
+ // now flag it as moving..
+
+ (function() {
+ ce.removeClass('collapsing');
+ ce.addClass('show');
+ ce.removeClass('collapse');
+
+ ce.dom.style.height = '';
+ }).defer(500);
+ ce.setHeight(h)
+
+ } else {
+ ce.addClass('collapsing');
+ ce.removeClass('show');
+ (function() {
+ ce.removeClass('collapsing');
+ ce.addClass('collapse');
+
+ }).defer(200);
+
+ }
}
}, this);
}
if(this.srButton){
- cn.push({
- tag: 'div',
- cls: 'navbar-header',
+ var btn = {
+ tag: 'button',
+ type: 'button',
+ cls: 'navbar-toggle navbar-toggler',
+ 'data-toggle': 'collapse',
cn: [
{
- tag: 'button',
- type: 'button',
- cls: 'navbar-toggle navbar-toggler',
- 'data-toggle': 'collapse',
- cn: [
- {
- tag: 'span',
- cls: 'sr-only',
- html: 'Toggle navigation'
- },
- {
- tag: 'span',
- cls: 'icon-bar navbar-toggler-icon'
- },
- {
- tag: 'span',
- cls: 'icon-bar'
- },
- {
- tag: 'span',
- cls: 'icon-bar'
- }
- ]
+ tag: 'span',
+ cls: 'sr-only',
+ html: 'Toggle navigation'
+ },
+ {
+ tag: 'span',
+ cls: 'icon-bar navbar-toggler-icon'
+ },
+ {
+ tag: 'span',
+ cls: 'icon-bar'
+ },
+ {
+ tag: 'span',
+ cls: 'icon-bar'
}
]
+ };
+
+ cn.push( Roo.bootstrap.version == 4 ? btn : {
+ tag: 'div',
+ cls: 'navbar-header',
+ cn: [
+ btn
+ ]
});
}
}
if (this.brand !== '') {
- cn[0].cn.unshift({ // changed from push ?? BS4 needs it at the start? - does this break or exsiting?
+ var cp = Roo.bootstrap.version == 4 ? cn : cn[0].cn;
+ cp.unshift({ // changed from push ?? BS4 needs it at the start? - does this break or exsiting?
tag: 'a',
href: this.brand_href ? this.brand_href : '#',
cls: 'navbar-brand',