Navbar Breakpoint

Topic: Navbar Breakpoint

wavelytech pro asked 7 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:

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.

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

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 7 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 7 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 7 years ago

Dear dclauson@teamadvocate.com, We'll try to fix this in future release. Best Regards, Damian

Add comment

ceyon67 pro answered 6 years ago

0 0 Best answer

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

Add comment

dclauson@teamadvocate.com pro answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

wavelytech

Pro User

10Support score
4Questions 1Answers

0Snippets likes 0Snippets