Topic: Navbar Breakpoint
- Is there a hook or some sort to modify the breakpoint, which I found out to be in 2 files, assets/core/_variables.scss ($sidenav-breakpoint) and pro/sidenav/sidenav.components.ts?
- If 1 is not available, and I have to modify those 2 files, how do I move the ng-mdb-pro node module package to my local assets and load it from there instead? I don\'t think it\'s wise to modify directly in node_module.
Damian Gemza staff commented 6 years ago
Dear dclauson, What exactly is not working in IE with this code? Could you please provide me with a better description of your problem and if it's possible, some screenshots of actual behavior? Without this, I wouldn't be able to help you well. Best Regards, Damian
Damian Gemza staff commented 6 years ago
Dear ceyon67, This problem was fixed with today's release, so you don't need to change the typescripts. Just use sidenavBreakpoint input to change the value of sidenav breakpoint, and add scss from the upper post. Best Regards, Damian
import { Component, ViewChild, Input, ElementRef, Renderer2, AfterViewInit, HostListener, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
@Component({
selector:'mdb-sidenav',
templateUrl:'sidenav.component.html'
})
export class SidenavComponent implements AfterViewInit {
public windwosWidth:number;
public shown:boolean;
public isBrowser:any = false;
@Input() public class: string;
@Input() public fixed = true;
@Input() sidenavBreakpoint: number = null;
@ViewChild('sidenav') public sideNav: ElementRef;
@ViewChild('overlay') public overlay: any;
constructor( @Inject(PLATFORM_ID) platformId:string, public el:ElementRef,
public renderer:Renderer2) {
this.isBrowser = isPlatformBrowser(platformId);
}
ngAfterViewInit() {
if (this.isBrowser) {
// pobraneie szerokosci okna po init
this.windwosWidth=window.innerWidth;
if (this.fixed) {
this.renderer.addClass(document.body, 'fixed-sn');
if (this.windwosWidth<this.sidenavBreakpoint+1) {
this.renderer.setStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(-100%)');
this.setShown(false);
} else {
this.renderer.setStyle(this.sideNav.nativeElement, 'transform', 'translateX(0%)');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(0%)');
this.setShown(true);
}
} else {
this.renderer.addClass(document.body, 'hidden-sn');
this.renderer.setStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(-100%)');
this.setShown(false);
}
}
}
@HostListener('window:resize')
windwosResize() {
if (this.isBrowser) {
this.windwosWidth=window.innerWidth;
if (this.fixed) {
if (this.windwosWidth<this.sidenavBreakpoint+1) {
this.renderer.setStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(-100%)');
this.setShown(false);
}
if (this.windwosWidth>this.sidenavBreakpoint&&this.shown) {
this.renderer.setStyle(this.sideNav.nativeElement, 'transform', 'translateX(0%)');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(0%)');
this.hideOverlay();
this.setShown(true);
} else if (this.windwosWidth > this.sidenavBreakpoint) {
this.renderer.setStyle(this.sideNav.nativeElement, 'transform', 'translateX(0%)');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(0%)');
this.hideOverlay();
this.setShown(true);
}
} else {
if (this.windwosWidth>this.sidenavBreakpoint) {
this.renderer.setStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(-100%)');
this.hideOverlay();
this.setShown(false);
}
}
}
}
show() {
if (this.isBrowser) {
if (this.fixed) {
if (this.windwosWidth<this.sidenavBreakpoint+1) {
this.renderer.setStyle(this.sideNav.nativeElement, 'transform', 'translateX(0%)');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(0%)');
this.setShown(true);
this.showOverlay();
} else {
this.renderer.setStyle(this.sideNav.nativeElement, 'transform', 'translateX(0%)');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(0%)');
this.setShown(true);
}
} else {
this.renderer.setStyle(this.sideNav.nativeElement, 'transform', 'translateX(0%)');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(0%)');
this.setShown(true);
this.showOverlay();
}
}
}
hide() {
if (this.isBrowser) {
if (this.fixed) {
if (this.windwosWidth<this.sidenavBreakpoint+1) {
this.renderer.setStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(-100%)');
this.setShown(false);
this.hideOverlay();
} else {
this.renderer.setStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(-100%)');
this.setShown(false);
}
} else {
this.renderer.setStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)');
this.renderer.setStyle(this.el.nativeElement, 'transform', 'translateX(-100%)');
this.setShown(false);
this.hideOverlay();
}
}
}
toggle() {
if (this.shown) {
this.hide();
} else {
this.show();
}
}
showOverlay() {
this.renderer.setStyle(this.overlay.nativeElement, 'display', 'block');
setTimeout(() => {
this.renderer.setStyle(this.overlay.nativeElement, 'opacity', '1');
}, 0);
}
hideOverlay() {
this.renderer.setStyle(this.overlay.nativeElement, 'opacity', '0');
setTimeout(() => {
this.renderer.setStyle(this.overlay.nativeElement, 'display', 'none');
}, 200);
}
setShown(value:boolean) {
setTimeout(() => {
this.shown=value;
}, 510);
}
}
@import "../node_modules/ng-mdb-pro/assets/scss/core/mixins";
@import "../node_modules/ng-mdb-pro/assets/scss/core/colors";
@import "../node_modules/ng-mdb-pro/assets/scss/core/variables";
$sidenav-breakpoint : 1200px !default;
.breadcrumbs {
@media all and (min-width: 1200px) {
position: absolute;
left: 240px;
}
}
dclauson@teamadvocate.com pro commented 6 years ago
Damian, I am on version 6.1.2 and it looks like the .breadcrumbs class wasn't completely implemented in your scss, because when I try to set the sidenav bar to 1200px, the breadcrumbs and the main content do not move to the left correctly when the sidebar hits the breakpoint of 1200. Can you look into how to fix this?dclauson@teamadvocate.com pro commented 6 years ago
I got this working, but had to add this to my global stylesheet. Can you get this updated for the next version?
@import "~ng-uikit-pro-standard/assets/scss/core/mixins";
@import "~ng-uikit-pro-standard/assets/scss/core/colors";
@import "~ng-uikit-pro-standard/assets/scss/core/variables";
$sidenav-breakpoint: 1200px !default;
.breadcrumbs {
@media all and (min-width: 1200px) {
position: absolute;
left: 240px;
}
}
.fixed-sn main {
@media all and (min-width: 1200px) {
padding-left: 240px;
}
}
Damian Gemza staff commented 6 years ago
Dear dclauson@teamadvocate.com, We'll try to fix this in future release. Best Regards, DamianFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No