.x-nav-bar {
  @extend .nav,
          .nav-fill,
          .flex-nowrap;

  .nav-item {
    @extend .d-flex,
            .flex-column,
            .justify-content-center,
            .align-items-center,
            .text-grey,
            .text-decoration-none;
    font-size: $font-size-xs;

    .x-aside-theme-dark & {
      @extend %x-theme-dark-menu-item;
    }

    .x-icon-md {
      @extend .pt-2,
              .pb-1;
    }

    .list-text {
      @extend .pt-0,
              .pb-2;
    }

    @include hover {
      &:not(.active) {
        @extend .text-primary;
      }
    }
  }
}


.x-menu-bar {
  @extend .position-fixed,
          .w-100;
  bottom: 0;
  left: 0;
}