@asi-ngtools/lib/styles/less/asi-menu.less

This project is a little components library, simple to use, which will help you to simplify your project.

asi-menu, .asi-menu {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  button {
    .clean-button;
  }
  a {
    .clean-a;
  }
  .asi-menu-container {
    display: flex;
    flex-direction: column;
    .asi-menu-panel {
      display: flex;
      flex-direction: column;
      position: relative;
      list-style: none;
      padding-left: 0px;
      .items-container {
        display: flex;
        flex-direction: row;
        overflow: auto;
        list-style: none;
        background-color: @asi-menu-background-color;
        &.vertical {
          flex-direction: column;
          .item-container {
            justify-content: flex-start;
          }
        }

        .item-container {
          color: @asi-menu-text-color;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 5px;
          min-height: @asi-menu-min-height;
          min-width: @asi-menu-min-width;
          border-bottom : 2px solid transparent;
          transition: background-color 0.1s easea-in;
          &.active {
            background-color: @asi-menu-active-background-color;
            color: @asi-menu-active-text-color;
            border-bottom: @asi-menu-active-border-bottom;
          }
          &:hover{
            background-color: @asi-menu-hover-background-color;
            color: @asi-menu-hover-text-color;
          }
          outline: none;
          &:focus {
            border-bottom: @asi-menu-outline-border;
          }
        }
        &.burger {
          position: absolute;
          z-index: 25;
          right: 0;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          .item-container {
            width: 250px;
          }
        }
      }
    }
  }
}