first commit

resources/frontend/core/components/NavigationMenuItem.vue

@@ -0,0 +1,66 @@
+<template>
+    <li
+        class="at-menu__item"
+        :class="[this.active ? 'at-menu__item--active' : '', this.disabled ? 'at-menu__item--disabled' : '']"
+    >
+        <router-link v-if="Object.keys(to).length" ref="link" class="at-menu__item-link" :to="to">
+            <slot></slot>
+        </router-link>
+        <div v-else class="at-menu__item-link">
+            <slot></slot>
+        </div>
+    </li>
+</template>
+
+<script>
+    import { findComponentsUpward } from '@cattr/ui-kit/src/utils/util';
+
+    export default {
+        name: 'NavigationMenuItem',
+        props: {
+            name: {
+                type: [String, Number],
+            },
+            to: {
+                type: [Object, String],
+                default() {
+                    return {};
+                },
+            },
+            replace: {
+                type: Boolean,
+                default: false,
+            },
+            disabled: {
+                type: Boolean,
+                default: false,
+            },
+        },
+        data() {
+            return {
+                active: false,
+            };
+        },
+        mounted() {
+            this.$on('on-update-active', name => {
+                this.$nextTick(() => {
+                    if (
+                        this.name === name ||
+                        (this.$refs.link && this.$refs.link.$el.classList.contains('router-link-active'))
+                    ) {
+                        this.active = true;
+
+                        const parents = findComponentsUpward(this, 'AtSubmenu');
+                        if (parents && parents.length) {
+                            parents.forEach(parent => {
+                                parent.$emit('on-update-active', true);
+                            });
+                        }
+                    } else {
+                        this.active = false;
+                    }
+                });
+            });
+        },
+    };
+</script>