I am currently developing a Single Page Application using VueJS along with vuerouter.
In my App.vue file, the structure is as follows:
<template>
<div id="app">
<header><topbar></topbar></header>
<div class="wrapper">
<main><router-view></router-view></main>
<nav><sidebar></sidebar></nav>
</div>
<footer>footer</footer>
</div>
</template>
The desired functionality I want to achieve includes:
- The sidebar should display fixed main categories for user navigation
- The top bar menu should dynamically show sub-categories related to the selected main category
My initial approach involves sharing a common state with vuex. When a main category is clicked on the sidebar, it would update the CURRENT_STATE which can then be used to render the appropriate sub-categories in the top bar. However, I feel that there might be a cleaner solution to accomplish this.
Has anyone encountered a similar issue before? Any suggestions or ideas are greatly appreciated :) Thank you!