Tobias premium commented 2 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 2 years ago

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

Tobias premium commented 2 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 2 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 2 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 2 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 2 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.