Skip to content
Snippets Groups Projects
Select Git revision
  • 92ef9519a15bddd63e4c27221542911248341985
  • master default protected
  • feat/new-image-formats
  • clickable-select-chevron
  • 2.20.0
  • 2.19.0
  • 2.18.0
  • 2.17.0
  • 2.16.1
  • 2.16.0
  • 2.15.0
  • 2.14.0
  • 2.13.0
  • 2.12.1
  • 2.11.0
  • 2.10.0
  • 2.9.1
  • 2.9.0
  • 2.8.0
  • 2.7.1
  • 2.7.0
  • 2.6.0
  • 2.5.2
  • 2.5.1
24 results

NavbarSubitem.vue

Blame
  • NavbarSubitem.vue 983 B
    <template>
      <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
        <span class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
        <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
          <slot>
          </slot>
        </div>
      </div>
    </template>
    
    <script>
    import { isLgScreenSize } from "../../utils";
    
    export default {
      data() {
        return {
          show: false
        };
      },
      props: {
        href: {
          type: String,
        },
        label: {
          type: String,
        }
      },
      methods: {
        onMouseEnter() {
          if (isLgScreenSize()) {
            this.$data.show = true;
          }
        },
        onMouseLeave() {
          if (isLgScreenSize()) {
            this.$data.show = false;
          }
        },
        handleClick() {
          if (this.$props.href) {
            window.location = this.$props.href;
          }
    
          this.$data.show = !this.$data.show;
        }
      }
    }
    </script>