Topic: Resposive double nav

et3rnal87 pro asked 3 years ago


Hi,

I have a few questions about the side nav, first of all, I,m using this library with the assumption it reduces the need for me to manually right styles/functions.

Starting with the simplest:

  • How do I change the side nav color? and to be specific I need a light colour.

    • The vertical scroll bar of the side-nav will be visible whenever the browser window isn't the full width!
  • I want the side nav to be hidden on smaller screens, I found that you provide sidenavBreakpoint however when navigating with angular routerLink it doesn't close itself and if I use (click)="sidenav.hide();" then it will hide the nav on a big screen which shouldn't couldn't happen.

  • I can't find a way to change the side nav open style, it is always overlapping the main content, I need it to push and adjust at least in big screens

An example with these would be really useful for me and your documentations.

PS: Is it a good idea using MDB for SPA mobile app?

Thanks


Arkadiusz Idzikowski staff answered 3 years ago


You can find the example here, just change body class name from light-blue-skin to white-skin:

https://mdbootstrap.com/docs/angular/navigation/compositions/#f-s-f-n

Could you confirm if you use 6.3.0 version? There were some problems with sidenav scroll and mask in 6.x.x but we fixed that later.


et3rnal87 pro commented 3 years ago

Yes 6.3.0 I tried updating to v8 when I upgraded my angular to 8 but so many things broke down, all button colours changed!


Arkadiusz Idzikowski staff commented 3 years ago

There was a lot of breaking changes both in our library and Angular framework itself. If you want to use v8, the best way to do that would be to update your versions to 7.x.x first and then migrate to version 8.

You can find some useful information about migrations in our migration guide and on Angular Update page.

MDB Angular migration guide: https://mdbootstrap.com/docs/angular/getting-started/migration/

Angular update guide: https://update.angular.io


et3rnal87 pro commented 3 years ago

I'm already on angular 8 now, going to MDB 7 doesn't seem to work. ill check the migration link you provided


et3rnal87 pro answered 3 years ago


Could you please point me to the example to get the same behaviour as the examples. Specifically this one https://mdbootstrap.com/live/_MDB/index/docs/skins/white-skin.html

Thanks


et3rnal87 pro answered 3 years ago


Thanks for the light colour, I was hoping you have a better implementation I guess MDB isn't the best option for mobile SPA.

All the examples in https://mdbootstrap.com/docs/angular/navigation/sidenav have scroll bars.

The issue appears when adding side-nav class which allow adding a margin to push down the side nav from the top navbar

I can't find the example I copied from, but it results in what looks like two side navs! at the bottom but surprisingly if the browser is full window width it doesn't appear! enter image description here


Arkadiusz Idzikowski staff answered 3 years ago


Please take a look at the 'customization' section in our documentation:

https://mdbootstrap.com/docs/angular/navigation/sidenav/#color

For example, for light color you can use: <mdb-side-nav class="blue lighten-2">

As for the problem with closing sidenav when navigating - you can try to add an if statement to check the browser screen width before using hide() method.

Unfortunately we don't have 'push' version of sidenav, but I will add this feature to our nice-to-have list.

Could you provide more information/screenshot for the problem with vertical scroll? Do you currently use MDB Angular v6.3.0?



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

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.3.0
  • Device: Windows
  • Browser: FF & Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No