FMenuList.vue

<template>
  <ul :class="menuListClasses">
    <li
      v-for="(item, index) in items"
      :key="item.id"
      class="FMenuList__li"
    >
      <slot v-bind="{ item, index }">
    </li>
  </ul>
</template>

<script>

export default {
  name: 'f-menu-list',
  
  props: {
    items: {
      type: Array,
      required: true
    },
    isSub: Boolean,
    expand: Boolean,
    hideSubItems: Boolean
  },

  computed: {
    menuListClasses() {
      return [
        'FMenuList',
        {
          'FMenuList--sub': this.isSub,
          'FMenuList--parent': !this.isSub,
          'FMenuList--expand': this.expand,
          'FMenuList--hide-sub': this.hideSubItems
        }
      ]
    }
  }
}
</script>

<style lang="scss">

.FMenuList {
  width: 100%;

  &--parent {
    height: 100%;
    padding: 25px 0 0;
    background-color: #fff;
    position: fixed;
    top: 70px;
    left: -100%;
    padding-top: 35px;

    @media screen and (min-width: map-get($sizes, 'tablet' )) {
      position: absolute;
      top: 0;
      left: 0;
      @include transition(0.1s);
      box-shadow: var(--shadow-base);
    }

    &__li {
      margin-bottom: 35px;
      width: 100%;
      height: 20px;
    }
  }

  &--sub {
    overflow: visible;
    max-height: 900px;
    transition: max-height 300ms ease, margin 300ms ease 300ms,
      overflow 350ms ease;

    &__li {
      &:first-child {
        margin-top: 20px;
      }

      &:not(:last-child) {
        margin-bottom: 15px;
      }
    }
  }

  &--expand {
    left: 0;
    @include transition(0.1s);
    text-align: center;

    @media screen and (min-width: map-get($sizes, 'tablet' )) {
      width: 230px;
      text-align: left;
    }
  }

  &--display-sub {
    overflow: hidden;
    max-height: 0px;
    margin: 0;
  }

  &::-webkit-scrollbar {
    width: 0px;
  }
}
</style>