Sha256: aef4a3bc342dd40f885ef6d0e7aa5246c645dcfef682915de56ed3f202cf78ab
Contents?: true
Size: 1.72 KB
Versions: 3
Compression:
Stored size: 1.72 KB
Contents
import tippy from "@assets/js/base/tippy";
import { CocoComponent } from "@assets/js/base/coco";
export default CocoComponent("appSidebarNavItem", () => {
return {
menu: null,
menuObserver: null,
active: false,
init() {
if (this.menuTemplate) {
this.initMenu();
this.observeMenuForChanges();
}
this.$watch("mobileLayout", () => this.onOrientationChange());
},
initMenu() {
this.menu = tippy(this.$root, {
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.menuTemplate.innerHTML,
});
},
observeMenuForChanges() {
this.menuObserver = new MutationObserver((mutations) => {
this.$nextTick(() => this.menu.setContent(this.menuTemplate.innerHTML));
});
this.menuObserver.observe(this.$root, {
subtree: true,
childList: true,
});
},
onOrientationChange() {
if (this.menu) {
this.menu.setProps({
placement: this.menuPlacement,
});
}
},
destroy() {
if (this.menuObserver) {
this.menuObserver.disconnect();
}
},
root: {
["@turbo:load.document"]() {
if (this.menu) {
this.menu.hide();
}
},
":class": "{active}",
},
get menuTemplate() {
return this.$root.querySelector("template");
},
get menuPlacement() {
return this.mobileLayout ? "top" : "right-start";
},
};
});
Version data entries
3 entries across 3 versions & 1 rubygems