SideNav let me click the top nav and it should not

Topic: SideNav let me click the top nav and it should not

maden asked 4 years ago

Hello,

I have a problem on the SideNav and on the Top navbar as you can see from the attached photo. When I open the SideNav every time I click out it should close and not give me the option to click on the buttons of the Top navbar. Instead when I click outside the SidNav it gives me the possibility to click the Top navbar enter image description here

Arkadiusz Idzikowski staff commented 4 years ago

@maden please provide the code that you used to render the sidenav and navbar components.

We tested that on the example from our documentation and it looks like everything is working correctly: https://mdbootstrap.com/docs/angular/navigation/compositions/#h-s-n-n

Add comment

maden answered 4 years ago

0 0 Best answer

  <mdb-icon fas icon="arrow-left" class="p-1 m-1" (click)="basicModal.hide()"></mdb-icon>

  <div class="col-sm-11 p-0 my-0 w-100">


          <!--          flex-column   this it is a class to add to the div above in order to have the text center-->
          <strong>{{ option.title }}</strong>
          <strong>{{ option.createdDate | date :'medium'}}</strong>
        </div>
      </mdb-option>
    </mdb-auto-completer>
  </div>


</nav>


<mdb-navbar-brand>
  <!-- Logo -->
  <li>
    <div class="logo-wrapper waves-light d-none d-md-inline-block">
      <a (click)="selectCategory(null)" style="cursor: pointer">
        <img class="img-fluid flex-center" src="assets/img/Logo.png">
      </a>
    </div>
  </li>

  <div class="sidebar-profile d-block d-md-none" *ngIf="isAuthenticated"
       routerLink="/profile-edit" routerLinkActive="" (click)="sidenav.hide()">
    <div class="user-pic">
      <img  [lazyLoad]="userProfile.media.fileDownloadUri"
        class="img-fluid rounded-circle z-depth-0">
    </div>
    <div class="user-info">
      <span class="user-name">
        {{firstName}}
      </span>
      <span class="user-name">{{lastName}}</span>
      <span class="user-status">
        <i class="fa fa-circle"></i>
        <span>Online</span>
      </span>
    </div>

  </div>

  <hr class="d-block d-md-none mt-0" *ngIf="isAuthenticated">


  <!--/. Logo -->
</mdb-navbar-brand>
<links>


  <li>
    <ul class="collapsible collapsible-accordion">
      <mdb-accordion [multiple]="false" aria-multiselectable="false">

        <mdb-accordion-item class="d-block d-md-none" *ngIf="!isAuthenticated">
          <mdb-accordion-item-head mdbWavesEffect>
            <mdb-icon fas icon="user"></mdb-icon>
            <span >Account</span>
          </mdb-accordion-item-head>
          <mdb-accordion-item-body>
            <ul class="" style="display: block;">
              <li role="menu">
                <a i18n="@@navigation_log_in" mdbWavesEffect routerLink="/login"
                   routerLinkActive="active" (click)="sidenav.hide()">Login
                </a>
                <a i18n="@@navigation_sign_up" href="#" mdbWavesEffect
                   routerLink="/register" routerLinkActive="active" (click)="sidenav.hide()">Signup
                </a>
                <a i18n="@@navigation_help_support" href="#" mdbWavesEffect
                   routerLink="/help-support" (click)="sidenav.hide()">Help and support
                </a>
              </li>
            </ul>
          </mdb-accordion-item-body>
        </mdb-accordion-item>

        <mdb-accordion-item class="no-collase nav-item d-block d-md-none" *ngIf="isAuthenticated" >

          <mdb-accordion-item-head mdbWavesEffect routerLink="/"
                                   routerLinkActive="active" (click)="sidenav.hide()"><mdb-icon fas
                                                                                                icon="pen"></mdb-icon>

          </mdb-accordion-item-head>
          <mdb-accordion-item-body></mdb-accordion-item-body>

        </mdb-accordion-item>

        <mdb-accordion-item class="no-collase nav-item d-block d-md-none" *ngIf="isAuthenticated">

          <mdb-accordion-item-head mdbWavesEffect routerLink="/message"
                                   routerLinkActive="active" (click)="sidenav.hide()"><mdb-icon fas
                                                                                                icon="envelope"></mdb-icon>
            Message
          </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>
            <mdb-icon fas icon="th-list"></mdb-icon>
            <span>Categories</span>
          </mdb-accordion-item-head>
          <mdb-accordion-item-body>
            <ul class="" style="display: block;">
              <li *ngFor="let category of categories">
                <a (click)="selectCategory(category)" mdbWavesEffect
                                                      style="cursor: pointer" (click)="sidenav.hide()">{{category.name}}</a>

              </li>
            </ul>
          </mdb-accordion-item-body>
        </mdb-accordion-item>


        <!-- Collapsible link -->
        <mdb-accordion-item>
          <mdb-accordion-item-head mdbWavesEffect>
            <mdb-icon far icon="eye"></mdb-icon>
            <span>Filter car</span>
          </mdb-accordion-item-head>
          <mdb-accordion-item-body>
            <ul>
              <li>
                <a href="#" mdbWavesEffect>City</a>
              </li>
              <li>
                <a href="#" mdbWavesEffect>Date</a>
              </li>
            </ul>
          </mdb-accordion-item-body>
        </mdb-accordion-item>

        <mdb-accordion-item>
          <mdb-accordion-item-head mdbWavesEffect>
            <mdb-icon fas icon="cog"></mdb-icon>
            <span>Setting</span>
          </mdb-accordion-item-head>
          <mdb-accordion-item-body>
            <ul>
              <li>
                <a i18n="@@navigation_settings" href="#" mdbWavesEffect
                   routerLink="/settings" routerLinkActive="" (click)="sidenav.hide()">Settings / Privacy
                </a>
              </li>
              <li>
                <a i18n="@@navigation_help_support" href="#" mdbWavesEffect
                   routerLink="/help-support" text-white (click)="sidenav.hide()">Help and support
                </a>
              </li>
            </ul>
          </mdb-accordion-item-body>
        </mdb-accordion-item>


        <mdb-accordion-item
          class="no-collase nav-item d-block d-md-none position-absolute fixed-bottom" *ngIf="isAuthenticated">
          <hr class="m-0">
          <mdb-accordion-item-head mdbWavesEffect (click)="onLogout();sidenav.hide()"><mdb-icon fas
                                                                                                icon="sign-in-alt"></mdb-icon>
            Sign out
          </mdb-accordion-item-head>
          <mdb-accordion-item-body></mdb-accordion-item-body>

        </mdb-accordion-item>

      </mdb-accordion>
    </ul>
  </li>


  <!--/. Side navigation links -->


</links>


<div class="sidenav-bg mask-strong"></div>


<navlinks class="navbar-container">
  <!-- SideNav slide-out button -->
  <div class="float-left">
    <a (click)="sidenav.show()" class="button-collapse" style="position: absolute">
      <mdb-icon fas icon="bars"></mdb-icon>
    </a>
  </div>
  <!--/. SideNav slide-out button -->

</navlinks>

<div class="logo-wrapper waves-light d-block d-md-none">
  <a (click)="selectCategory(null)" style="cursor: pointer">
    <img class="img-fluid flex-center" src="assets/img/logo.png">
  </a>
</div>


<!-- Search form -->


<navlinks>

  <ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav w-100 d-flex justify-content-end ">

    <li class="clearfix d-none d-md-inline-block flex-shrink-1 w-50">
      <div class="col-sm-12 p-0 my-0 w-100" *ngIf="!widthSelect">



        </mdb-auto-completer>
      </div>
    </li>

    <li class="nav-item d-block d-md-none">
      <a class="nav-link waves-light" mdbWavesEffect>
        <mdb-icon fas icon="search" (click)="basicModal.toggle()"  ></mdb-icon>
      </a>
    </li>

    <li *ngIf="isAuthenticated" class="nav-item d-none d-md-inline-block">
      <a class="nav-link waves-light" mdbWavesEffect routerLink="/create" routerLinkActive="active">
        <mdb-icon fas icon="pen"></mdb-icon>
        <span i18n="@@navigation_create_article" class="clearfix ">Create car</span>
      </a>
    </li>
    <li *ngIf="isAuthenticated" class="nav-item d-none d-md-inline-block">
      <a class="nav-link waves-light" mdbWavesEffect routerLink="/message" routerLinkActive="active">
        <mdb-icon fas icon="envelope"></mdb-icon>
        <span i18n="@@navigation_message"
              class="clearfix ">Message
        </span>
      </a>
    </li>
    <li  *ngIf="isAuthenticated" class="nav-item">
      <a class="nav-link waves-light" mdbWavesEffect>
        <mdb-icon fas icon="bell"></mdb-icon>
        <span
          class="clearfix d-none d-md-inline-block"></span>
      </a>
    </li>

    <li *ngIf="!isAuthenticated" class="nav-item dropdown d-none d-md-inline-block" dropdown>
      <a class="nav-link dropdown-toggle waves-light" dropdownToggle mdbWavesEffect mdbWavesEffect type="button">
        <mdb-icon fas icon="user"></mdb-icon>Account
        <span class="caret"></span>
      </a>
      <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
        <a i18n="@@navigation_log_in" class="dropdown-item waves-light" mdbWavesEffect routerLink="/login"
           routerLinkActive="active">Login
        </a>
        <a i18n="@@navigation_sign_up" class="dropdown-item waves-light" href="#" mdbWavesEffect
           routerLink="/register" routerLinkActive="active">Signup
        </a>
        <a i18n="@@navigation_help_support" class="dropdown-item waves-light" href="#" mdbWavesEffect
           routerLink="/help-support">Help and support
        </a>
      </div>
    </li>


    <li *ngIf="isAuthenticated" class="nav-item avatar dropdown dark-grey-text d-none d-md-inline-block " dropdown>
      <a class="nav-link dropdown-toggle waves-light  d-none d-md-block" dropdownToggle mdbWavesEffect
         type="button">

        <img *ngIf="userProfile && userProfile.media" [lazyLoad]="userProfile.media.fileDownloadUri"
          class="img-fluid rounded-circle z-depth-0 " style="width:35px">
        <img *ngIf="!userProfile || !userProfile.media" [src]="imgUrl" style="width:35px">
      </a>

      <div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">

        <a i18n="@@navigation_profile" class="dropdown-item black-text" href="#" mdbWavesEffect
           routerLink="/profile-edit" routerLinkActive="">Profile
        </a>
        <a i18n="@@navigation_settings" class="dropdown-item waves-light black-text" href="#" mdbWavesEffect
           routerLink="/settings" routerLinkActive="">Settings / Privacy
        </a>
        <a i18n="@@navigation_help_support" class="dropdown-item waves-light black-text" href="#" mdbWavesEffect
           routerLink="/help-support" text-white>Help and support
        </a>
        <div class="divider dropdown-divider"></div>
        <a i18n="@@navigation_log_out" (click)="onLogout()" class="dropdown-item waves-light" href="#"
           mdbWavesEffect style="cursor: pointer;">Sign out
        </a>
      </div>

    </li>

  </ul>

</navlinks>

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB Angular
MDB Version: 11.0.0
Device: all
Browser: all
OS: windows
Provided sample code: No
Provided link: No

maden

25Support score
3Questions 1Answers

0Snippets likes 0Snippets