Empty content with sidenav collapsed and menu expanded

[gmartinezk]

Hi Zongbin, how are you.

First, thanks and congratulations for this awesome template.

The issue is about when sidenav is collapsed and the menu is expanded, the sidenav content sometimes appears empty, In part because the submenu items have no icons. This cause in my opinion, a loss of context. I attach some reference images

Do you have some tip to avoid this, some style/structure advice.

Thanks 🙂

[nzbin]

I know this issue. The easiest way I think you can make menu collapsed when sidenav is collapsed. I will try other methods to improve it in the future.

[Ricard01]

Well thats when the sidenav is collapsed so i did this

.matero-sidenav-collapsed {
  .matero-sidenav {
	// rest remains same

	// Hides the height of the submenu 
    .submenu {
      height: 0; 
      overflow: hidden;
	
	//  Shows the submenu when the sidenav is not collapsed 
      &.active {
        height: auto; 
      }
    }

    &:hover {
      width: var(--sidenav-width);
      overflow: visible; //added

   
      .submenu{
        height: auto; // Shows de submenu in Hover
      }

    }
  }
}

[nzbin]

The v18 has improved this issue, please check the website.

It will show the first letter if the icon is not set.