Topic: Sidenav arrow icons

Tobias premium asked 3 years ago


I'm following the sample code here: https://mdbootstrap.com/docs/b5/angular/navigation/sidenav/

But I get no arrow icons on the collapsable menu items, as shown in the examples. Is this a bug or am I missing something?


Tobias premium commented 3 years ago

<mdb-sidenav-layout>
  <mdb-sidenav #sidenav="mdbSidenav">
    <ul class="sidenav-menu">
      <mdb-sidenav-item>
        <a class="sidenav-link"
          ><i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link"
          ><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span></a
        >
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 2</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 3</a>
          </li>
        </ul>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link"
          ><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span></a
        >
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 4</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 5</a>
          </li>
        </ul>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link"
          ><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 3</span></a
        >
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 5</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 6</a>
          </li>
        </ul>
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link"
          ><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 4</span></a
        >
        <ul class="sidenav-collapse" mdbCollapse>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 7</a>
          </li>
          <li class="sidenav-item">
            <a class="sidenav-link">Link 8</a>
          </li>
        </ul>
      </mdb-sidenav-item>
    </ul>
  </mdb-sidenav>
  <mdb-sidenav-content #sidenavContent>
    <!-- Toggler -->
    <button #sidenavToggle class="btn btn-primary" (click)="sidenav.toggle()">
      <i class="fas fa-bars"></i>
    </button>
    <!-- Toggler -->
  </mdb-sidenav-content>
</mdb-sidenav-layout>

Arkadiusz Idzikowski staff commented 3 years ago

@Tobias We use FontAwesome icons inside the mdbCollapse component. Did you install and configure FontAwesome in your project?


Tobias premium commented 3 years ago

Yes, I'm using FontAwesome already in other places. Inspecting the generated html does not include any fa-* tags for the sidenav collapsibles, so they are not even being generated by your backend code.


Arkadiusz Idzikowski staff commented 3 years ago

It looks like there is in fact some bug on our end. We will take a closer look at that and let you know what we found.


Tobias premium commented 3 years ago

I just updated to beta6 to see if this was fixed, but it was not. Unfortunately sidenav seems even more broken now, as menus won't expand at all. I'm doing the new, proper, import and using the first example code in the docs.


Tobias premium commented 3 years ago

Got it to work by importing MdbCollapseModule in app.module.ts:

import { MdbCollapseModule } from 'mdb-angular-ui-kit/collapse';

Guess you need to update the documentation due to all these separate imports nowadays.

Arrow icons are still not being rendered though.


Arkadiusz Idzikowski staff commented 3 years ago

@Tobias We didn't add the fix for the arrows yet. Thank you for letting us know about these problems, we will update the documentation and fix the build.



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: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta4
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: Yes