naive-ui/styles/Menu.scss

@import './mixins/mixins.scss';
@import './themes/vars.scss';

@include themes-mixin() {
  @include b(menu) {
    color: $--menu-item-text-color;
    @include once {
      overflow: hidden;
      transition: background-color .3s $--n-ease-in-out-cubic-bezier;
      width: 100%;
      box-sizing: border-box;
      font-size: 14px;
    }
    @include m(collapsed) {
      @include b(menu-list) {
        @include b(menu-item) {
          @include e(header) {
            opacity: 0;
          }
        }
      }
      @include b(sub-menu) {
        @include b(sub-menu-item) {
          @include e(header) {
            opacity: 0;
          }
          &::after {
            opacity: 0;
          }
        }
      }
    }
    @include b(menu-list) {
      @include once {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      @include b(menu-item) {
        color: $--menu-item-text-color;
        @include once {
          cursor: pointer;
          transition: color .3s $--n-ease-in-out-cubic-bezier, padding-left .3s $--n-ease-in-out-cubic-bezier;
          position: relative;
          height: 48px;
          display: flex;
          align-items: center;
          font-size: 14px;
          list-style: none;
          line-height: 1.5;
          @include e(icon) {
            transition: padding-right .3s $--n-ease-in-out-cubic-bezier;
            box-sizing: content-box;
            flex-shrink: 0;
            padding-right: 8px;
            display: inline-flex;
          }
          @include e(header) {
            transition: opacity .3s $--n-ease-in-out-cubic-bezier;
            opacity: 1;
            flex-grow: 1;
            flex-shrink: 1;
          }
          @include m(selected) {
            &::before {
              opacity: .9;
            }
          }
          @include m(disabled) {
            opacity: 0.45;
            cursor: not-allowed;
          }
        }
        &::before {
          background-image: $--menu-item-background-image;
          background-position: $--menu-item-background-position;
          @include once {
            content: "";
            background-size: 300%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 0;
            transition: opacity 0.3s $--n-ease-in-out-cubic-bezier, background-position .3s $--n-ease-in-out-cubic-bezier;
            opacity: 0; 
          }
        }
      }
    }
    @include b(sub-menu) {
      @include once {
        cursor: pointer;
        position: relative; 
        @include b(sub-menu-content) {
          padding: 0;
          list-style: none;
          @include fade-in-height-expand-transition($duration: .2s);
        }
      }
      @include b(sub-menu-item) {
        color: $--menu-sub-menu-text-color;
        @include once {
          display: flex;
          flex-wrap: nowrap;
          font-weight: 500;
          font-size: 14px;
          transition: color .3s $--n-ease-in-out-cubic-bezier, padding-left .3s $--n-ease-in-out-cubic-bezier;
          height: 48px;
          display: flex;
          align-items: center;
          position: relative;
          @include e(icon) {
            transition: padding-right .3s $--n-ease-in-out-cubic-bezier;
            padding-right: 8px;
            box-sizing: content-box;
            flex-shrink: 0;
            display: inline-flex;
          }
          @include e(header) {
            transition: opacity .3s $--n-ease-in-out-cubic-bezier;
            opacity: 1;
            flex-grow: 1;
            opacity: 1;
          }
          @include m(collapsed) {
            &::after {
              transform: rotate(225deg);
            }
          }
          @include m(disabled) {
            opacity: 0.45;
            cursor: not-allowed;
          }
        }
        &::after { // down arrow 
          border-left: 2px solid  $--menu-sub-menu-arrow-color;
          border-top: 2px solid  $--menu-sub-menu-arrow-color;
          @include once {
            content: '';
            height: 6px;
            width: 6px;
            position: absolute;
            right: 24px;
            top: calc(50% - 3px);
            transform: rotate(45deg) ;
            transform-origin: 25% 25%;
            opacity: 1;
            transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.3s $--n-ease-in-out-cubic-bezier, border-color 0.3s $--n-ease-in-out-cubic-bezier;
          }
        }
      }
    }
    @include b(menu-item-group) {
      @include b(menu-item-group-title) {
        color: $--menu-item-group-text-color;
        @include once {
          cursor: default;
          height: 40px;
          display: flex;
          align-items: center;
          transition: color .3s $--n-ease-in-out-cubic-bezier;
        }        
      }
    }
  }
}