Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Sidenav with icons

Zaffar free asked 4 years ago


Hi,

I am using the sidenav from pro template. When toggling it is closed completey but I would like to keep it only showing the icons. Is there any opportunity?

If not, how can I get access to the properties like width and body padding to set the properties on my own. JQuery is not working with my Typescript.

Thanks in advance!


Arkadiusz Idzikowski staff commented 4 years ago

Did you try to use our slim sidenav version?

https://mdbootstrap.com/docs/angular/navigation/sidenav/#slim-sidenav


Zaffar free commented 4 years ago

Yes but there are no icons and i want to minimize the sidenav and keep only icons. Is it possible?


Arkadiusz Idzikowski staff answered 4 years ago


The slim sidenav works just as you described. It has two modes - normal and minimized, and in the second mode it display only icons. Copy this code to your component html file and click on the 'minimize' button to see how it works:

https://mdbootstrap.com/docs/angular/navigation/sidenav/#slim-sidenav

The default sidenav breakpoint is 1440px. When screen width is lower than 1440px, then sidenav will be hidden automatically. You can adjust this breakpoint with [sidenavBreakpoint] input.

<mdb-side-nav #sidenav class="wide sn-bg-1 fixed" [fixed]="true" [sidenavBreakpoint]="800">


FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.10.1
  • Device: All
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No