Side Nav is broken

Dear azharem,

Could you please provide me with the code which you're using and which is not working in your app?

I would like to debug your problem.

Best Regards,

Damian

Hello Damian,

This is my component:

import {Component, Input, OnDestroy, OnInit} from "@angular/core";
import {BaseComponent} from "../common/base.component";
import {Patient} from "../../model/app.models";
import {PatientService} from "./patient.service";
import {AppDataService} from "../../common/app.dataservice";
@Component({
  selector: 'app-patient',
  templateUrl : './patient.component.html',
  providers : [PatientService],
  styleUrls : ['./patient.scss']
})

export class PatientComponent extends BaseComponent {

  @Input() userId : string;
  patient : Patient;

  constructor(private patientService : PatientService, private dataService : AppDataService){
    super();

  }
}

this is the ./patient.component.html:

<!-- SideNav slide-out button -->
<a (click)="sidenav.toggle()" class="btn btn-primary p-3 button-collapse"><i class="fas fa-bars"></i></a>
<!--/. SideNav slide-out button -->

<!-- Sidebar navigation -->
<mdb-side-nav #sidenav class="fixed" [fixed]="true">
  <!-- Logo -->
  <li>
    <div class="logo-wrapper waves-light">
      <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
    </div>
  </li>
  <!--/. Logo -->
  <!--Social-->
  <li>
    <ul class="social">
      <li><a class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>
      <li><a class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
      <li><a class="icons-sm gplus-ic"><i class="fab fa-google-plus"> </i></a></li>
      <li><a class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>
    </ul>
  </li>
  <!--/Social-->
  <!--Search Form-->
  <li>
    <form class="search-form" role="search">
      <div class="form-group md-form waves-light" mdbWavesEffect>
        <input type="text" class="form-control" placeholder="Search">
      </div>
    </form>
  </li>
  <!--/.Search Form-->
  <!-- Side navigation links -->
  <li>
    <ul class="collapsible collapsible-accordion">
      <mdb-accordion [multiple]="false" aria-multiselectable="false">

        <!-- Collapsible link -->
        <mdb-accordion-item>
          <mdb-accordion-item-head mdbWavesEffect><i class="fas fa-chevron-right"></i> Collapsible menu</mdb-accordion-item-head>
          <mdb-accordion-item-body>
            <ul>
              <li><a href="#" class="waves-effect" mdbWavesEffect>Link 1</a></li>
              <li><a href="#" class="waves-effect" mdbWavesEffect>Link 2</a></li>
            </ul>
          </mdb-accordion-item-body>
        </mdb-accordion-item>

        <!-- Simple link -->
        <mdb-accordion-item class="no-collase">
          <mdb-accordion-item-head mdbWavesEffect><i class="far fa-hand-pointer"></i> Simple link</mdb-accordion-item-head>
          <mdb-accordion-item-body></mdb-accordion-item-body>
        </mdb-accordion-item>

        <!-- Collapsible link -->
        <mdb-accordion-item>
          <mdb-accordion-item-head mdbWavesEffect><i class="far fa-eye"></i> Collapsible menu 2</mdb-accordion-item-head>
          <mdb-accordion-item-body>
            <ul>
              <li><a href="#" class="waves-effect" mdbWavesEffect>Link 1</a></li>
              <li><a href="#" class="waves-effect" mdbWavesEffect>Link 2</a></li>
            </ul>
          </mdb-accordion-item-body>
        </mdb-accordion-item>

        <!-- Simple link -->
        <mdb-accordion-item class="no-collase">
          <mdb-accordion-item-head mdbWavesEffect><i class="far fa-gem"></i> Simple link 2</mdb-accordion-item-head>
          <mdb-accordion-item-body></mdb-accordion-item-body>
        </mdb-accordion-item>

      </mdb-accordion>
    </ul>
  </li>
  <!--/. Side navigation links -->
  <div class="sidenav-bg mask-strong"></div>
</mdb-side-nav>
<!--/. Sidebar navigation -->

this is patient.scss:

header, main, footer {
  padding-left: 240px;
}

@media only screen and (max-width : 992px) {
  header, main, footer {
    padding-left: 0;
  }
}

this is my style.scss:

/* You can add global styles to this file, and also import other style files */

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

body {
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}

.basic-container {
  padding: 30px;
}

.version-info {
  font-size: 8pt;
  float: right;
}




.hdr {
  background-color: #91c8ff;
  height: 100px;
}

.spacer {
  margin-right: 1%;
}

mat-horizontal-stepper{
  width: 100%;
}
.details {
  width : 70%;
}

form {
  margin-left: 5%;
  margin-right: 5%;
}
.medicine-input{
  width : 20%;
}
.medicine-input-details{
  width : 30%;
}
.list-item{
  padding: 10px;
}
.medicine-item{
  height : 50px;
}
.flex {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
}

.right-btn {
  flex-grow : 1;
  padding-right: 100px;
  justify-content: flex-end;
}

.right-item {
  justify-content: flex-end;
}

.left-item {
  justify-content: flex-start;
}

.left-btn {
  justify-content: flex-start;
}
.content-center {
  justify-content: center;
}
.heading-label{
  color: dodgerblue;
}

.center-item {
  align-items: center;
}
.me-center {
  align-self: center;
}
table {
  width: 100%;
}
.flex-container {
  display : flex;
  margin-left: 1%;
  margin-right: 1%;
  display: flex;
  flex-direction: row;
  flex-grow : 1;
}
.flex-column{
  display: flex;
  flex-direction: column;
}
.grow-1{
  flex-grow: 1;
}
.grow-25{
  flex-grow: 0.25;
}
.grow-50{
  flex-grow: 0.50;
}
.grow-10{
  flex-grow: 0.10;
}
.grow-05{
  flex-grow: 0.05;
}
.grow-04{
  flex-grow: 0.04;
}
.grow-06{
  flex-grow: 0.06;
}
.spacer-left{
  margin-left: 1%;
}
.spacer-right{
  margin-right: 5px;
}

.flex > br
{
  width: 100%;
  content: '';
}
.width-40 {
  width: 40%;
}
.fill-remaining-space {
  /*This fills the remaining space, by using flexbox.
 Every toolbar row uses a flexbox row layout. */
  flex: 1 1 auto;
}

This is part of my app.module.ts import:

imports: [
    RouterModule.forRoot(appRoutes, {enableTracing: false}), BrowserModule, HttpClientModule, BrowserAnimationsModule, MatDialogModule, FormsModule,
    ReactiveFormsModule, CustomMaterialModule, FlexLayoutModule, LyThemeModule.setTheme('minima-light'),
    MDBBootstrapModulesPro.forRoot(),
    // Add components
    LyButtonModule,
    LyToolbarModule,
    LyResizingCroppingImageModule, LyIconModule
  ]

Thanks. Azhar

Dear azharem,

Please take a look at this screenshot, I have copied your code and launched my app.

Everything there is working fine. https://screenshots.firefox.com/t9kfMxpldjAMrc8Q/localhost

Could you please share your application via email? Here's my email address: d.gemza@mdbootstrap.com

Best Regards,

Damian

Hi Damian,

Before I extract my project out to share for troubleshoot, can you share your angular.json that you used in above working example? I suspect perhaps I don't have correct config in my angular.json file. Here is what it looks like with respect to css config. See if you can spot some issue:

"styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
              "src/styles.scss"
            ],
            "scripts": ["node_modules/chart.js/dist/Chart.js",
              "node_modules/hammerjs/hammer.min.js"]
          },

Thanks. Azhar

Hi Damian,

I just created a test angular 7 project from scratch and added MDB modules etc. I'm seeing the same issue. Can you share your test project where I can see how you have it setup? My project is nested within a Java project and it will be difficult to extract out selective portions so perhaps if I have your sample/example working project I can compare the files and see what I'm missing.

Thanks. Azhar

Thanks Damian. That seems to have fixed the issue.

Azhar