Contents

import tippy from "@libs/tippy";
import { CocoComponent } from "@js/coco";

export default CocoComponent("appSidebarNavItem", () => {
  return {
    menu: null,
    active: false,

    init() {
      if (this.$refs.menu) {
        this.menu = tippy(this.$el, {
          theme: "coco-naked-dropdown",
          placement: this.menuPlacement,
          arrow: false,
          offset: [0, 0],
          trigger: "click",
          interactive: true,
          maxWidth: null,
          onShow: () => {
            this.active = true;
          },
          onHide: () => {
            this.active = false;
          },
          content: () => this.$refs.menu.innerHTML,
        });
      }

      this.$watch("mobileLayout", () => {
        this.onOrientationChange();
      });
    },

    onOrientationChange() {
      if (this.menu) {
        this.menu.setProps({
          placement: this.menuPlacement,
        });
      }
    },

    root: {
      "@click": "if (menu) $event.preventDefault()",
      ":class": "{active}",
    },

    get menuPlacement() {
      return this.mobileLayout ? "top" : "right-start";
    },
  };
});

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
coveragebook_components-0.8.3	app/components/coco/app/blocks/sidebar_nav/item/item.js