Top navigation menu depending on sidebar

Question

I am working on a Single Page Application using VueJS and vuerouter .

My App.vue looks like:

<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>

I would like to achieve the following behaviour:

• The sidebar menu displays static main categories the user can navigate to
• The topper menu depends on the main sidebar menu and must displays sub-categories related to the main categories.

My first thought is that I can share a common state with vuex. Clicking on a main category on the sidebar would trigger a new CURRENT_STATE that would be read by the top bar. Then there would be a sort of conditional rendering based on the CURRENT_STATE.

But I am pretty sure there is a nicer/cleaner way to achieve this.

Has anyone already encountered this issue ? Any idea is welcomed :) Thanks !

Answer 1

When you set up your topbar as such:

<header><topbar :key="$route.path"></topbar></header>

Any path change should trigger the topbar to refresh. If your sidebar should be static, then you don't have to add a key parameter there so that that won't be refreshed like the topbar will.