In my index.php file, I have a side-nav component structured like this:
<div class="container">
<side-nav></side-nav>
</div>
The SideNav.vue file contains the following structure:
<template>
<div class="container">
<nav-section name="General">
<nav-item name="Home">
<nav-child name="Dahsboard 1" url="#"></nav-child>
<nav-child name="Dahsboard 2" url="#"></nav-child>
</nav-item>
<nav-item name="Settings">
<nav-child name="Setting 1" url="#"></nav-child>
<nav-child name="Setting 2" url="#"></nav-child>
</nav-item>
<nav-item name="Admin">
<nav-child name="Admin 1" url="#"></nav-child>
<nav-child name="Admin 2" url="#"></nav-child>
</nav-item>
</nav-section>
<nav-section name="Data Analysis">
<nav-item name="Data Source">
<nav-child name="Source 1" url="#"></nav-child>
<nav-child name="Source 2" url="#"></nav-child>
</nav-item>
<nav-item name="Visualization">
<nav-child name="Chart 1" url="#"></nav-child>
<nav-child name="Chart 2" url="#"></nav-child>
</nav-item>
<nav-item name="Others">
<nav-child name="Other 1" url="#"></nav-child>
<nav-child name="Other 2" url="#"></nav-child>
</nav-item>
</nav-section>
</div>
</template>
<script>
import NavSection from './NavSection.vue'
import NavItem from './NavItem.vue'
import NavChild from './NavChild.vue'
export default {
components: {
'nav-section':NavSection,
'nav-item': NavItem,
'nav-child': NavChild,
},
data() {
return {
}
},
mounted() {
console.log('Component mounted.')
},
}
</script>
In the NavSection.vue file:
<template>
<section>
<h6>{{ name }}</h6>
<ul>
<slot></slot>
</ul>
</section>
</template>
<script>
export default {
props: ['name'],
data() {
return {
}
}
}
</script>
Within NavItem.vue file:
<template>
<li>
<a @click="toggleClass">{{ name }}</a>
<ul :class="{ 'active': isActive}">
<slot></slot>
</ul>
</li>
</template>
<script>
export default {
props: ['name'],
data() {
return {
isActive: false,
names: []
}
},
created() {
//this returns all the names in console
console.log(this.name)
},
methods: {
toggleClass() {
this.isActive = true
// logic for switching isActive value to FALSE when another item is clicked would need to be added here
}
}
}
</script>
Finally, in NavChild.vue:
<template>
<li>
<a :href="url">{{ name }}</a>
</li>
</template>
<script>
export default {
props: ['name', 'url'],
data() {
return {
}
}
}
</script>
The implementation aims to make each navSection contain multiple navItems, and each navItem house several navChild components. Upon triggering the toggleClass function by clicking on an anchor tag within a navItem, two requirements are: 1. the isActive property should update to TRUE for that specific item, and 2. isActive should revert to FALSE upon clicking on another item in the same section.
An approach suggested in the NavItem.vue file involves comparing clicked item's name prop with all names - however, finding a way to access and store all passed data for a particular prop remains unresolved. Any suggestions to enhance this code or streamline achieving the desired functionality are welcomed. Let the coding begin!