Topic: menu and multiple submenus sidenav

Corporate pro asked 2 months ago


Expected behavior When having a menu of up to 3 levels, when expanding a sublevel the entire menu does not collapse

Actual behavior When having a 3-level menu, clicking on a submenu collapses all the menu items, preventing navigation in the submenu items

Resources (screenshots, code snippets, etc.)

enter image description here


Arkadiusz Idzikowski staff commented 2 months ago

Could you please edit your post and provide an example code on which we will be able to reproduce this problem?


Corporate pro commented 2 months ago

<mdb-sidenav-layout>
    <ul mdbScrollbar class="sidenav-menu">
        <mdb-sidenav-item>
            <a class="sidenav-link rounded-0" href="#">
                menu level 1
            </a>
            <ul class="submenu sidenav-collapse" mdbCollapse>
                <mdb-sidenav-item>
                    <a class="sidenav-link rounded-0" href="#">
                        menu level 1.1
                    </a>
                    <ul class="sidenav-collapse" mdbCollapse [collapsed]="false">
                        <li class="sidenav-item">
                            <a href="#" class="sidenav-link rounded-0" mdbWavesEffect>
                                menu level 1.1.1
                            </a>
                        </li>
                        <li class="sidenav-item">
                            <a href="#" class="sidenav-link rounded-0" mdbWavesEffect>
                                menu level 1.1.2
                            </a>
                        </li>
                        <li class="sidenav-item">
                            <a href="#" class="sidenav-link rounded-0" mdbWavesEffect>
                                menu level 1.1.3
                            </a>
                        </li>
                    </ul>
                </mdb-sidenav-item>
                <mdb-sidenav-item>
                    <a class="sidenav-link rounded-0" href="#">
                        menu level 1.2
                    </a>
                    <ul class="sidenav-collapse" mdbCollapse [collapsed]="false">
                        <li class="sidenav-item">
                            <a href="#" class="sidenav-link rounded-0" mdbWavesEffect>
                                menu level 1.2.1
                            </a>
                        </li>
                        <li class="sidenav-item">
                            <a href="#" class="sidenav-link rounded-0" mdbWavesEffect>
                                menu level 1.2.2
                            </a>
                        </li>
                        <li class="sidenav-item">
                            <a href="#" class="sidenav-link rounded-0" mdbWavesEffect>
                                menu level 1.2.3
                            </a>
                        </li>
                    </ul>
                </mdb-sidenav-item>
            </ul>
        </mdb-sidenav-item>
    </ul>
</mdb-sidenav>


Arkadiusz Idzikowski staff commented 2 months ago

Thank you. I used your code to try to reproduce this problem but it looks like everything is working correctly on my end (all menus and submenus can be toggled independently).

Do you use mdbCollapse directive from MDB5 Angular (mdb-angular-ui-kit) or from MDB4 Angular (ng-uikit-pro-standard)? Because it looks like you use syntax from both libraries (mdbWavesEffect directive is part of MDB4 with Bootstrap 4, in MDB5 we use mdbRipple).


Corporate pro commented 2 months ago

<mdb-sidenav-layout>
<ul mdbScrollbar class="sidenav-menu">
    <mdb-sidenav-item>
        <a class="sidenav-link rounded-0" href="#">
            menu level 1
        </a>
        <ul class="submenu sidenav-collapse" mdbCollapse>
            <mdb-sidenav-item>
                <a class="sidenav-link rounded-0" href="#">
                    menu level 1.1
                </a>
                <ul class="sidenav-collapse" mdbCollapse [collapsed]="false">
                    <li class="sidenav-item">
                        <a href="#" class="sidenav-link rounded-0">
                            menu level 1.1.1
                        </a>
                    </li>
                    <li class="sidenav-item">
                        <a href="#" class="sidenav-link rounded-0">
                            menu level 1.1.2
                        </a>
                    </li>
                    <li class="sidenav-item">
                        <a href="#" class="sidenav-link rounded-0">
                            menu level 1.1.3
                        </a>
                    </li>
                </ul>
            </mdb-sidenav-item>
            <mdb-sidenav-item>
                <a class="sidenav-link rounded-0" href="#">
                    menu level 1.2
                </a>
                <ul class="sidenav-collapse" mdbCollapse [collapsed]="false">
                    <li class="sidenav-item">
                        <a href="#" class="sidenav-link rounded-0">
                            menu level 1.2.1
                        </a>
                    </li>
                    <li class="sidenav-item">
                        <a href="#" class="sidenav-link rounded-0">
                            menu level 1.2.2
                        </a>
                    </li>
                    <li class="sidenav-item">
                        <a href="#" class="sidenav-link rounded-0">
                            menu level 1.2.3
                        </a>
                    </li>
                </ul>
            </mdb-sidenav-item>
        </ul>
    </mdb-sidenav-item>
</ul>

I removed mdbWavesEffect, and the problem persists. I am using angular mdb5.


Arkadiusz Idzikowski staff commented 2 months ago

Could you please add a more detailed description of the expected behavior and how to reproduce the problem step by step? I tried to reproduce it using the code you provided but all the collapse menus were working correctly in my app.


Corporate pro commented 2 months ago

Then I share a video where I show the error that happens

https://share.vidyard.com/watch/Zrotqv7CMYfNogXRUvdb3Q?


Corporate pro answered 2 months ago


Hello, giving continuity to the support, I send the libraries that I am importing, to see if there are any errors in them, that are causing some interference with the proper functioning that they mention to me

import { Component, OnInit, HostListener, ViewChild } from '@angular/core';
import { Router, Event, ActivatedRoute } from '@angular/router';
import { NavigationStart, NavigationError, NavigationEnd } from '@angular/router';
import { MdbSidenavComponent } from 'mdb-angular-ui-kit/sidenav';
import { MdbNotificationService, MdbNotificationRef } from 'mdb-angular-ui-kit/notification';
import { CmToastComponent } from '@folders/modules/core/components';

And this is the HTML

<mdb-sidenav-layout>
    <mdb-sidenav #sidenav="mdbSidenav" [position]="'absolute'" [mode]="mode" [accordion]="true" class="sidenav-ldm">
        <div class="py-2 bg-white-color border-bottom">
            <mdb-form-control class="input-group">
                <div class="input-group-prepend grey-color">
                    <i class="fal fa-search fa-cdm p-1"></i>
                </div>
                <input type="text" class="form-control border-bottom-0 pe-4"
                    placeholder="{{ 'lbl_busqueda' | translate }}" [(ngModel)]="searchText" id="search"
                    autocomplete="off" mdbInput>
            </mdb-form-control>
            <div class="searchResults border hide">
                <a *ngFor="let menu of searchResults" class="p-3 dropdown-item"
                    routerLink="/administracion-libro-marca/ver-libro-marca/{{ menu.id }}">{{ menu.nombre }}</a>
            </div>
        </div>
        <ul mdbScrollbar class="sidenav-menu">
            <mdb-sidenav-item *ngFor="let menu of submenus">
                <a class="sidenav-link rounded-0"
                    [routerLink]="menu.submenu.length == 0 ? ['/show-menu/' + menu.id] : []">
                    {{ menu.nombre }}
                </a>
                <ul *ngIf="menu.submenu" class="submenu sidenav-collapse" mdbCollapse>
                    <mdb-sidenav-item *ngFor="let submenu of menu.submenu">
                        <a class="sidenav-link rounded-0"
                            [routerLink]="!submenu.items ? ['/show-submenu/' + submenu.id] : []">
                            {{ submenu.nombre }}
                        </a>
                        <ul class="sidenav-collapse" *ngIf="submenu.items" mdbCollapse [collapsed]="false">
                            <li *ngFor="let item of submenu.item" class="sidenav-item">
                                <a routerLink="/show-submenu/{{ item.id }}"
                                    class="sidenav-link rounded-0">
                                    {{ item.nombre }}
                                </a>
                            </li>
                        </ul>
                    </mdb-sidenav-item>
                </ul>
            </mdb-sidenav-item>
        </ul>
    </mdb-sidenav>
    <mdb-sidenav-content #sidenavContent>
        <!-- Toggler -->
        <div class="cdm-view d-flex flex-row fixed-top mw-vw-100">
            <a (click)="sideNav()" mdbBtn
                class="p-btn-ldm-dd waves-light btn-cdm z-depth-0 rounded-0 m-0 px-3 button-collapse">
                <i *ngIf="!sidenavClose" class="fal fa-book fa-lg"></i>
                <i *ngIf="sidenavClose" class="fal fa-times fa-lg"></i>
            </a>
        </div>
        <!-- Toggler -->
    </mdb-sidenav-content>
</mdb-sidenav-layout>


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

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 3.0.1
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No