Danny Hoeve Danny Hoeve - 26 days ago 15
CSS Question

A nested Angular submenu doesn't hide properly

I have menu with a submenu made with Angular 2 that will collapse and expand whenever the person clicks on it:

This is how it SHOULD look like:



enter image description here Clicked on Admin ->enter image description here




This is how it looks like now:



This is how it looks like Clicked on Admin - >
This is how it looks when you expand it

In order to make it look like the first I have to add a next
<a>

element after the nested menu in order to make it work. If I delete the last 'child' it will look like the second image.

The code for this looks like this

file names in order of appearance:


  • Sidebar.ts

  • Some relevant CSS (.nestedmenu)

  • Sidebar.html



import { Component } from '@angular/core';

@Component({
moduleId: module.id,
selector: 'sidebar-cmp',
templateUrl: 'sidebar.html'
})

export class SidebarComponent {
showMenu: string = '';
isActive = false;
addExpandClass(element: any) {
if (element === this.showMenu) {
this.showMenu = '0';
} else {
this.showMenu = element;
}
}
eventCalled() {
this.isActive = !this.isActive;
}
}


.nested-menu {
.list-group-item {
cursor: pointer;
}
.nested {
list-style-type: none;
}
ul.submenu {
height: 0;
}
& .expand {
ul.submenu {
list-style-type: none;
height: auto;
li {
a {
color: #FFF;
padding: 10px;
display: block;
}
}
}
}
}


<button class="btn btn-default btn-sm" id="toggle-sidebar" type="button" (click)="eventCalled()">
&#9776;
</button>
<nav class="sidebar" [ngClass]="{sidebarPushRight: isActive}">
<ul class="list-group">
<a routerLink="/dashboard/home" [routerLinkActive]="['router-link-active']" class="list-group-item">
<span class="icon">
<i class="fa fa-fw fa-dashboard"></i>
</span> Dashboard
</a>
<div class="nested-menu">
<a class="list-group-item" (click)="addExpandClass('pages')">
<span><i class="fa fa-users"></i> &nbsp; Admin</span>
</a>
<li class="nested" [ngClass]="{'expand' : showMenu === 'pages' }">
<ul class="submenu">
<li>
<a routerLink="/dashboard/admin/device" [routerLinkActive]="['router-link-active']"> Device </a>
</li>
<li>
<a routerLink="/dashboard/admin/device" [routerLinkActive]="['router-link-active']"> Sensor </a>
</li>
</ul>
</li>
</div>
<!-- If this part is commented out it'll break the submenu above-->
<a class="list-group-item">
<span class="icon">
<i class="fa fa-fw fa-dashboard"></i>
</span> Test
</a>
</ul>
</nav>


What should I do to make it also work without adding something after the submenu? If I have to provide more code I'll do so.

Answer

https://github.com/start-angular/SB-Admin-BS4-Angular-2/issues/48

Answer here:

.I had the same problem. Just edit your _app-base.scss located in the assets/sass/ folder as I show you:

.nested-menu { .list-group-item { cursor: pointer; } .nested { list-style-type: none; } ul.submenu { height: 0; } & .expand { ul.submenu { list-style-type: none; height: auto; li { a { color: #FFFFFF; padding: 10px; display: block; } } } } & .hidden { visibility: hidden; } }

then you must edit each div menu in the typescript file sidebar.ts in the following way:

<div class="nested-menu"> <a class="list-group-item" (click)="addExpandClass('pages')"> <span><i class="fa fa-plus"></i> &nbsp; Menu</span> </a> <li class="nested" [ngClass]="{'expand' : showMenu === 'pages', hidden: showMenu !== 'pages' }"> <ul class="submenu"> <li> <a href><span>Submenu</span></a> </li> <li> <a href><span>Submenu</span></a> </li> </ul> </li> </div>

And that's all! :)

Comments