I want to set sidebar menu active when clicked. Now only the first menu is selected as active. If other menus are selected, the first menu still remains as active menu. How to implement this ?

My code:

<div id="mobile_sidebar_display">
  <div
    class="logo_section d-flex justify-content-center align-items-center"
  >
    <a v-on:click="closeSideDrawer" :href="base + '/'">
      <img src="../../assets/images/logo_2.svg" class="w-100" />
    </a>
  </div>
  <div style="height: 10px"></div>
  <a
    v-on:click="closeSideDrawer"
    class="sidebar_link active"
    :href="base + '/'"
    ><i class="fas fa-home"></i> <span class="ml-2">Home</span></a
  >

  <a v-on:click="closeSideDrawer" class="sidebar_link" href="#"
    ><i class="far fa-user"></i> <span class="ml-2">Courses</span></a
  >
  <router-link class="sidebar_link" to="/QuizGrid"
    ><i class="fas fa-puzzle-piece"></i>
    <span v-on:click="closeSideDrawer" class="ml-2"
      >Puzzles</span
    ></router-link
  >
</div>