Halo theme, menu and submenus are hard to distinguish because of less indentation

In halo theme, when I create a menu in web menu left sidebar and items in that menu, upon expanding the menu there is just a thin line separator and 1 can’t tell that these items belong to this menu. Even when collapsed, 1 can’t distinguish between 1st level menus and 1st level items.

My idea to add a certain amount of indentation to submenu items and a +/- sign against menus depending on whether is collapsed/expanded respectively.

Have a look at this post -> Side menu with sub-menu

You can style this with css


In case of adding indentation, I would recommend adding styles like below:

// Add indentation
  margin-left: 20px;

// Add icons
.c-sidemenu-item-header .c-sidemenu-item-caption::before {
  content: "\f196";
  font-family: FontAwesome;
  display: inline-block;
  padding-right: 5px;
  cursor: pointer;
  text-align: center;

.c-sidemenu-item-header-open .c-sidemenu-item-caption::before {
  content: "\f147";