Just to be sure - you don't want to collapse the navbar by a breakpoint? If so try this:

<mdb-navbar
  style="width:100%"
  [containerInside]="false"
  SideClass="navbar navbar-expand navbar-dark bg-primary"
>
  <mdb-navbar-brand><a class="navbar-brand" href="#">Navbar</a></mdb-navbar-brand>
  <ul class="navbar-nav mr-auto" style="width:100%">
    <li class="nav-item active">
      <a class="nav-link" mdbWavesEffect
        >Home
        <span class="sr-only">(current)</span>
      </a>
    </li>
    <li class="nav-item">
      <a
        class="nav-link"
        href="https://mdbootstrap.com/angular/angular-bootstrap-getting-started/"
        target="_blank"
        mdbWavesEffect
        >About MDB</a
      >
    </li>
    <li class="nav-item">
      <a
        class="nav-link"
        href="https://mdbootstrap.com/angular/getting-started/"
        target="_blank"
        mdbWavesEffect
        >Free download</a
      >
    </li>
    <li class="nav-item">
      <a
        class="nav-link"
        href="https://mdbootstrap.com/angular/angular-tutorial/"
        target="_blank"
        mdbWavesEffect
        >Free tutorials</a
      >
    </li>
  </ul>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a
        href="https://www.facebook.com/mdbootstrap"
        class="nav-link"
        target="_blank"
        mdbWavesEffect
      >
        <mdb-icon fab icon="facebook-f"></mdb-icon>
      </a>
    </li>
    <li class="nav-item">
      <a href="https://twitter.com/MDBootstrap" class="nav-link" target="_blank" mdbWavesEffect>
        <mdb-icon fab icon="twitter"></mdb-icon>
      </a>
    </li>
    <li class="nav-item">
      <a
        href="https://github.com/mdbootstrap/bootstrap-material-design"
        class="nav-link border border-light"
        target="_blank"
        mdbWavesEffect
      >
        <mdb-icon fab icon="github" class="mr-2"></mdb-icon>MDB GitHub
      </a>
    </li>
    <li class="nav-item">
      <a
        href="https://mdbootstrap.com/products/angular-ui-kit/"
        class="ml-1 nav-link border border-light rounded"
        mdbWavesEffect
      >
        <mdb-icon far icon="gem" class=" left"></mdb-icon> Go Pro</a
      >
    </li>
  </ul>
</mdb-navbar>

Hope it helps! Best Regards, Bartosz.

Here is modified version of navigation component:

<!--Main Navigation-->

    <!-- Navbar brand -->
    <logo class="ml-3">
        <a class="navbar-brand" href="https://mdbootstrap.com/angular/angular-bootstrap-getting-started/">
            <strong class="blue-text">MDB</strong>
        </a>
    </logo>

    <!-- Collapsible content -->
    <links>

        <!-- Links -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" mdbWavesEffect>Home
                    <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://mdbootstrap.com/angular/angular-bootstrap-getting-started/" target="_blank" mdbWavesEffect>About MDB</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://mdbootstrap.com/angular/getting-started/" target="_blank" mdbWavesEffect>Free download</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://mdbootstrap.com/angular/angular-tutorial/" target="_blank" mdbWavesEffect>Free tutorials</a>
            </li>
        </ul>
        <!-- Links -->

        <!-- Search form -->
        <ul class="navbar-nav nav-flex-icons">

                <li class="nav-item">
                    <a href="https://www.facebook.com/mdbootstrap" class="nav-link" target="_blank" mdbWavesEffect>
                        <mdb-icon fab icon="facebook-f"></mdb-icon>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="https://twitter.com/MDBootstrap" class="nav-link" target="_blank" mdbWavesEffect>
                        <mdb-icon fab icon="twitter"></mdb-icon>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="https://github.com/mdbootstrap/bootstrap-material-design" class="nav-link border border-light"
                        target="_blank" mdbWavesEffect>
                        <mdb-icon fab icon="github" class="mr-2"></mdb-icon>MDB GitHub
                    </a>
                </li>
                <li class="nav-item">
                    <a href="https://mdbootstrap.com/products/angular-ui-kit/" class="ml-1 nav-link border border-light rounded" mdbWavesEffect>
                        <mdb-icon far icon="gem" class=" left"></mdb-icon> Go Pro</a>
                </li>
            </ul>
    </links>
    <!-- Collapsible content -->

</mdb-navbar>
<!--/.Navbar-->

and it looks like this when collapsed: