1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Navbar Breakpoint

wavelytech pro asked 6 years ago

HelloI am using your MBD pro component for fixed sidebar and non-fixed navbar, of which my code is exactly as stated here --> https://mdbootstrap.com/angular/layout/navigation/#f-s-n-nHowever, I want to change the breakpoint from 1440px to 1200px, as the default is automatically hiding the sidebar when below 1400px.Question:
  1. 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?
  2. 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.

dclauson@teamadvocate.com pro answered 6 years ago

Damian, This works in Firefox and Edge, but does not work in Internet Explorer.  Any idea on how to fix it there?

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

ceyon67 pro answered 6 years ago

where do i find the sidenav.component.ts  ?

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

Damian Gemza staff answered 6 years ago

Dear wavelytech, Please open sidenav.component.ts file, and change its code with this below: 
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);

}

}
Then to your mdb-sidenav element add control [sidenavBreakpoint]="1200", Then in your global stylesheet add this code: 
@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;

}

}
After this, your changes to sidenav breakpoint won't be overwritten by next updates. We'll add new .ts code to next release of MDB Angular. Best Regards, Damian

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, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
wavelytech
Pro User 10Support score
4Questions 1Answers 0Snippets