hudozka/src/style/hmenu.scss

.no-scroll {
  overflow: hidden;
}

.HMenu {
  --hmenu-margin: 6px;
  --hmenu-icon-width: 32px;
  --hmenu-icon-height: 32px;

  display: flex;
  flex-direction: row;
  align-items: center;

  width: 100%;
  //height: 100%;

  position: relative;

  list-style: none;
}

.HMenu a {
  &:visited {
    color: inherit;
  }
}

.HMenu.HMenu--folded {
  height: 100%;
}

.HMenu--folded.HMenu--closed {
  li {
    margin: 0;
  }
}

.HMenu--folded.HMenu--open {
  li {
    margin: 0 0 var(--single-margin);
  }
}

.HMenu--folded.HMenu--closed {
  justify-content: center;
}

.HMenu--folded.HMenu--closed .HMenu__item{
  display: none;
}

.HMenu--folded .HMenu__item.HMenu__item--cur{
  display: block;
}






.HMenu__toggle {
  position: absolute;
  left: 0;
  height: var(--hmenu-icon-height);

  margin: var(--hmenu-margin);

  display: flex;

  a {
    text-decoration: none;
    border: none;

    width: var(--hmenu-icon-width);
    height: var(--hmenu-icon-height);
    background-size: 100%;
  }

  a:hover {
    text-decoration: none;
    border: none;
  }
}

.HMenu--folded.HMenu--closed {
  .HMenu__toggle {
    a {
      background-image: url(/graphics/hmenu-b.png);
    }

    a:hover {
      background-image: url(/graphics/hmenu-hover-b.png);
    }
  }
}

.HMenu--folded.HMenu--open {
  .HMenu__toggle {
    a {
      background-image: url(/graphics/hmenu-close-b.png);
    }

    a:hover {
      background-image: url(/graphics/hmenu-close-hover-b.png);
    }
  }
}





.HMenu--unfolded {
  margin-left: 1em;

  li {
    margin: 0 1em .5em .5em;
  }

  .HMenu__toggle {
    display: none;
  }
}


.HMenu--folded.HMenu--open {
  z-index: 100;

  display: flex;
  align-items: center;

  width: 100%;
  height: 100%;

  position: fixed;
  top: 0;
  left: 0;

  background-color: #ffffff;

  flex-direction: column;
  text-align: center;

  overflow-y: auto;

  font-size: 1.5rem;

  /*transition: opacity 0.5s ease-in-out;*/
  /*-webkit-transition: opacity 0.5s ease-in-out;*/
}



._HMenu--folded li:last-child {
  margin-bottom: 2em;
}

@media (max-width: var(--mobile-width)) {
  .HMenu--folded .HMenu__item {
    max-width: 10em;
  }

  .HMenu--folded.HMenu--closed {
    .HMenu__toggle {
      a {
        background-image: url(/graphics/hmenu-b.png);
      }

      a:hover {
        background-image: url(/graphics/hmenu-b.png);
      }
    }
  }

  .HMenu--folded.HMenu--open {
    .HMenu__toggle {
      a {
        background-image: url(/graphics/hmenu-close-b.png);
      }

      a:hover {
        background-image: url(/graphics/hmenu-close-b.png);
      }
    }
  }
}