Shian/src/sass/components/_menu.scss

.menu {
  display: flex;
  flex-direction: column;
  @include transition;

  @include screen(md) {
    flex-direction: row;
  }

  // Dark mode special menu
  &--dark-mode {
    .menu__text {
      display: block;
      @include screen(md) {
        display: none;
      }
    }
    .menu__icon {
      display: inline-block;
    }
  }

  &--permanent-icon {
    .menu__icon {
      display: inline-block;
    }
  }

  &__nav {
    display: flex;
    flex-direction: column;

    @include screen(md) {
      flex-direction: row;
    }
  }
  &__nav-main {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: hidden;
    @include transition;

    @include screen(md) {
      flex-direction: row;
    }

    &.hidden {
      height: 0;

      @include screen(md) {
        height: 100%;
      }
    }
  }
  &__item {
    color: $white;
    height: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    @include transition;

    @include screen(md) {
      height: 4rem;
    }

    &:hover {
      background-color: $theme-blue;
    }

    &--hidden {
      max-height: 0;
      overflow: hidden;
      @include transition;
    }
  }

  &__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  &__icon {
    display: inline-block;
    width: 4rem;
    height: 3rem;
    color: $white;
    text-align: center;
    @include px(0.5rem);
    @include py(0.75rem);
    
    @include screen(md) {
      display: none;
    }
  }
  &__text {
    display: inline-block;
    flex-grow: 1;
    color: $white;
    @include px(1rem);
  }

  &__separator {
    margin-left: 5rem;
    margin-right: 4rem;
    border-top: 0.125rem solid $white;
  }

  &__search-input {
    display: inline-block;
    flex-grow: 1;
    color: $white;
    @include px(0.5rem);
    @include mx(0.5rem);
    @include py(0.25rem);
    appearance: none;
    background-color: transparent;
    outline: none;
    border-bottom: 1px solid $white;
    &:focus-visible {
      outline: none;
      border-bottom: 1px solid $white;
    }
  }
  &__search-results {
    flex-grow: 1;
    overflow-y: scroll;
  }
  &__search-result {
    color: $white;
    display: block;
    align-items: center;
    @include px(2rem);
    @include py(1rem);
    @include transition;

    &:hover {
      background-color: $theme-blue;
    }
  }
  &__search-title {
    color: $white;
    &:hover {
      text-decoration: underline;
    }
  }
}