dev-audioprocessing/pages/setting.vue

<template>
<!--  <setting-bar />-->
  <div class="container-fluid">
    <div class="row flex-nowrap">
      <div class="col-auto col-md-3  px-sm-2 px-0 " style="background-color: #f4f5f7">
        <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
          <a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
            <span class=" d-none d-sm-inline pt-3"><img src="~/assets/image/Logo.png" class="img img-fluid"></span>
          </a>
          <ul class="nav  flex-column mb-sm-auto mb-0 align-items-center w-100 align-items-sm-start" id="menu">
            <li class="nav-item py-0 w-100 ">
              <nuxt-link to="/setting" class="nav-link px-3 py-3 list-active align-middle px-0 active text-muted fw-bold">
                <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">Account</span>
              </nuxt-link>
            </li>
            <li class="nav-item py-0 w-100 ">
              <nuxt-link to="/setting/editaccount" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
                <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">Subscription</span>
              </nuxt-link>
            </li>
            <li class="nav-item py-0 w-100 ">
              <a href="#" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
                <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">Soundscape Settings</span>
              </a>
            </li>
            <li class="nav-item py-0 w-100 ">
              <a href="#" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
                <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">FAQ</span>
              </a>
            </li>
            <li class="nav-item py-0 w-100 ">
              <a href="#" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
                <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">About Mindboost</span>
              </a>
            </li>
            <li class="nav-item py-0 w-100 ">
              <a href="#" class="nav-link px-3 py-3 list-active align-middle px-0  text-muted fw-bold">
                <i class="fa-solid d-sm-none d-block fa-user"></i><span class="ms-1 d-none d-sm-inline">Imprint</span>
              </a>
            </li>

          </ul>
          <hr>
        </div>
      </div>
      <div class="col-10 col-sm-9 overflow-hidden">
        <div class="row ">
          <div class="col-12 text-center">
            <div class="d-inline-block mx-auto  ">
              <h4 class="d-inline-block  d-none d-sm-block pt-3 text-muted fw-bolder">Settings</h4>
            </div>
            <ul class="nav float-end">
              <li class="nav-item dropdown">
                <a class="nav-link first-icon px-2 py-2" aria-current="page"  data-bs-toggle="dropdown" href="#"></a>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                  <li class="px-1"><a class="dropdown-item py-2 " href="#" style="border-bottom: 1px solid lightgray;">Lagoon  <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
                  <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Tropics <span class="float-end"><img src="~/assets/image/Vector7.png"></span></a></li>
                  <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Forest <span class="float-end"><img src="~/assets/image/Vector8.png"></span></a></li>
                  <li class="px-1"><a class="dropdown-item py-2" href="#" style="border-bottom: 1px solid lightgray;">Meadow <span class="float-end"><img src="~/assets/image/Vector121.png"></span></a></li>
                </ul>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link second-icon   px-2 py-2" data-bs-auto-close="outside" data-bs-toggle="dropdown" href="#">
                </a>
                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                  <li class="px-1">
                    <div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample">
                      <div class="accordion-item">
                        <h4 class="accordion-header" id="flush-headingOne">
                          <button class="accordion-button accordion-button-homebar  py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                            Headphones Type
                          </button>
                        </h4>
                        <div id="flush-collapseOne" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                          <div class="accordion-body p-0 m-0">
                            <ul class="nav flex-column">
                              <li class="nav-item">
                                <a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">In-Ear  <span class="float-end"><img src="~/assets/image/airbods.png"></span></a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="#">Over-Ear <span class="float-end"><img src="~/assets/image/headphone.png"></span> </a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="px-1">
                    <div class="accordion accordion-flush p-0 m-0" id="accordionFlushExample1">
                      <div class="accordion-item">
                        <h4 class="accordion-header" id="flush-headingOne">
                          <button class="accordion-button accordion-button-homebar  py-2 px-3 m-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne1" aria-expanded="false" aria-controls="flush-collapseOne">
                            Headphones Type
                          </button>
                        </h4>
                        <div id="flush-collapseOne1" class="p-0 m-0 accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample1">
                          <div class="accordion-body p-0 m-0">
                            <ul class="nav flex-column">
                              <li class="nav-item">
                                <a class="nav-link text-decoration-none text-dark" aria-current="page" href="#">No  <span class="float-end"><img src="~/assets/image/AudioWave1.png"></span></a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" href="#">Yes <span class="float-end"><img src="~/assets/image/audiowave2.png"></span></a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link third-icon  px-2 py-2" id="foucused-icon" href="#" ref="foucused"></a>
              </li>
              <li class="nav-item">
                <a class="nav-link fourth-icon  px-2 py-2" href="#"></a>
              </li>
              <li class="nav-item">
                <a class="nav-link fivith-icon  px-2 py-2" href="#"></a>
              </li>
            </ul>
          </div>
        </div>

        <nuxt-page key="child" />
    </div>
  </div>
  </div>
</template>
<script>
import SettingBar from "../components/settingbar";
export default {
  components: {SettingBar}
}
</script>

<style>
.list-active{
  border-radius: 10px;
  width: 100% !important;
}
.list-active.router-link-exact-active{
  background-color: #e9c046;
  border-radius: 10px;
  color: white !important;
  width: 100% !important;
}
.list-active:active a{
  color: white !important;
}
</style>