168 lines
9.1 KiB
Vue
168 lines
9.1 KiB
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/subscription" 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-credit-card"></i><span class="ms-1 d-none d-sm-inline">Subscription</span>
|
|
</nuxt-link>
|
|
</li>
|
|
<li class="nav-item py-0 w-100 ">
|
|
<nuxt-link to="/setting/soundscap" 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-volume-high"></i><span class="ms-1 d-none d-sm-inline">Soundscape Settings</span>
|
|
</nuxt-link>
|
|
</li>
|
|
<li class="nav-item py-0 w-100 ">
|
|
<nuxt-link to="/setting/faq" class="nav-link px-3 py-3 list-active align-middle px-0 text-muted fw-bold">
|
|
<i class="fa-solid d-block d-sm-none fa-circle-question"></i><span class="ms-1 d-none d-sm-inline">FAQ</span>
|
|
</nuxt-link>
|
|
</li>
|
|
<li class="nav-item py-0 w-100 ">
|
|
<nuxt-link to="/setting/about" class="nav-link px-3 py-3 list-active align-middle px-0 text-muted fw-bold">
|
|
<i class="fa-solid fa-circle-info d-block d-sm-none"></i><span class="ms-1 d-none d-sm-inline">About Mindboost</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 fa-stamp d-sm-none d-block"></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 ">
|
|
|
|
<div class="row">
|
|
<div class="col-4 d-none d-sm-block col-sm-7 col-lg-9 ">
|
|
<div class="row">
|
|
<div class=" col-sm-5 col-lg-3">
|
|
</div>
|
|
<div class="col-sm-7 col-lg-9">
|
|
<h4 class="text-center d-none d-sm-block pt-3 text-muted fw-bolder">Settings</h4>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class=" col-sm-5 col-lg-3">
|
|
<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">
|
|
<router-link to="/setting" class="nav-link fivith-icon px-2 py-2"></router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</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> |