html - Getting an unwanted space between Nav Items in Navbar Angular

Question

I am trying to create a sidenav bar with nav items in it which has sub menus . I am able to create it but i am getting space between 2 navitems which have submenus .

To be clear i am adding the screenshot for it -

My Side Navbar now

I am trying that both these Admin and Support come one after the other and get slided down when sub menu is clicked .

My code now looks like -

 <mat-sidenav-container class="example-sidenav-container" fxFlex="noshrink">
<mat-sidenav #snav>
  <mat-nav-list>
    <a mat-list-item routerLink="." > <mat-icon mat-list-icon>home</mat-icon> Home </a>
  </mat-nav-list>
  <mat-nav-list>
    <a mat-list-item routerLink="." > <mat-icon mat-list-icon>search</mat-icon> Project/Sb Search    </a>
  </mat-nav-list>
  <mat-nav-list>
    <a mat-list-item routerLink="." > <mat-icon mat-list-icon>add</mat-icon> Create Project/Sb     </a>
  </mat-nav-list>
  <mat-nav-list>
    <a mat-list-item routerLink="." > <mat-icon mat-list-icon>description</mat-icon> Affected Disciplines Form &nbsp;&nbsp;</a>
  </mat-nav-list>
  <mat-nav-list>
    <a mat-list-item routerLink="." > <mat-icon mat-list-icon>reorder</mat-icon> Report</a>
  </mat-nav-list>
  <mat-nav-list>
    <mat-list-item (click)="showSubmenuAdmin = !showSubmenuAdmin" class="parent">
      <span class="full-width">Admin</span>
      <mat-icon mat-list-icon>admin_panel_settings</mat-icon>
      <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenuAdmin}">
        expand_more</mat-icon>
    </mat-list-item>
    <div class="submenu" [ngClass]="{'expanded' : showSubmenuAdmin}">
      <a mat-list-item href="...">Maintain Users</a>
      <a mat-list-item href="...">Admin Tasks</a>
    </div>
  </mat-nav-list>
  <mat-nav-list>
    <mat-list-item (click)="showSubmenuSupport = !showSubmenuSupport" class="parent">
      <span class="full-width">Support</span>
      <mat-icon mat-list-icon>help</mat-icon>
      <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenuSupport}">
        expand_more</mat-icon>
    </mat-list-item>
    <div class="submenu" [ngClass]="{'expanded' : showSubmenuSupport}">
      <a mat-list-item href="...">Contact Us</a>
      <a mat-list-item href="...">Help</a>
    </div>
  </mat-nav-list>
      
  
  
</mat-sidenav>

Can anyone please help me on this ?

question from:https://stackoverflow.com/questions/65902129/getting-an-unwanted-space-between-nav-items-in-navbar-angular

Answer 1

I think you need a var for admin and support length and make a loop like this

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}