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

  .nav-item {
    @extend %x-flex-center,
            %font-size-xs,
            %text-decoration-none,
            %flex-column,
            %text-grey;

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

    .x-ion-continer {
      @extend %p-0;
    }

    .x-icon-md {
      @extend %p-0;
    }

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

    @include hover {
      &:not(.active) {
        @include custom-theme-color(primary, color);
      }
    }
  }
}


.x-menu-bar {
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;
}