How to make menu like in vue js official site?

Question

css

I was very interested in that very side menu from the official site / documentation of Vue.js.
The fact is that I don’t know how to do it, they say, for example, the same active tags h.
Here's an example: how to make me click on the heading, he applied the styles, the subheading opened, clicked on it and the styles were applied.

But still the question "how to do the same" - has not yet been lowered.
If there is a code, thank you very much.

Answer 1

<template>
  <ul>
    <li>
      <div class="link fir" @click="goToInstallation(); wtactiv()" v-bind:class="{ actived: isActive }" >Installation</div>
      <ul v-if="currentLink === 'installation'">
        <li>Process of Installation</li>
        <li>Another Installation</li>
      </ul>
    </li>
    <li>
      <div class="link sec" @click="goToCommunication(); twoact()" v-bind:class="{ actived: twoActive  }" >Communication</div>
      <ul v-if="currentLink === 'okda'">
        <li @click='activated'>Commun Submenu 1</li>
        <li>Commun Submenu 2</li>
      </ul>
    </li>
    <!-- <h1 class="static fir" @click="wtactiv" v-bind:class="{ actived: isActive }">первое</h1>
    <h2 class="static sec" @click="twoact" v-bind:class="{ actived: twoActive  }">второе</h2> -->
  <h3>{{currentLink}}</h3>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      twoActive: false,
      isActive: false,
    };
  },
  methods: {
    twoact(){
      this.isActive = false
      this.twoActive = true
      
      
    },
    wtactiv(){
      this.twoActive = false
      this.isActive = true
      
      
    },
    goToInstallation() {
      this.currentLink = "installation";
    },
    goToCommunication() {
      this.currentLink = "okda";
    },
  },
};


</script>
<style scoped>
.grey{
  color: #282c34;
}
.actived{
 color: green;
}
.

.link {
  color: #282c34;
  cursor: pointer;
}
</style>

Added commenter's code above . Of course, this is on "crutches", because. there, one method cleans up the other, but if you don’t do a believe-believe big menu, then it will do.

Answer 2

In the side menu, there are not H tags, but li tags in which the a tag is located. You can check it in the inspector.
Each item in the list in the sidebar is a router link.
The router link has two classes
.router-link-activeand .router-link-exact-active
you can override the styles for the active link either in a specific component (for example, a side menu component) or in a common file that contains global styles

.router-link-exact-active {
color: red;
}

Example with subheadings:
make the sidebar a separate component. Create a variable there to which you will assign the current route. Show / hide the necessary blocks depending on the value of this variable
place the necessary headings in the block, and add in this block v-if
The block with subheadings will open depending on the conditions that are written in the v-if
Codesandbox
Only instead of a div you will have a router link