107 lines
3.4 KiB
Vue
107 lines
3.4 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<nav class="navbar navbar-expand-sm">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<a class="navbar-brand" href="#"><img src="~/assets/image/Logo.png"></a>
|
||
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||
|
|
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link fw-bolder fs-5 text-dark" aria-current="page" href="#">Home</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="d-flex">
|
||
|
|
<ul class="nav">
|
||
|
|
<li class="nav-item dropdown">
|
||
|
|
<a class="nav-link first-icon px-2 py-2" aria-current="page" id="dropdownMenuLink" data-bs-toggle="dropdown" href="#"></a>
|
||
|
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||
|
|
<li><a class="dropdown-item" href="#" style="border-bottom: 1px solid lightgray;">Lagoon <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
|
||
|
|
<li><a class="dropdown-item" href="#">Tropics <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
|
||
|
|
<li><a class="dropdown-item" href="#">Forest <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
|
||
|
|
<li><a class="dropdown-item" href="#">Meadow <span class="float-end"><img src="~/assets/image/Vector123.png"></span></a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link second-icon px-2 py-2" href="#"></a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link third-icon px-2 py-2" href="#"></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>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:'HomeBar',
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.first-icon{
|
||
|
|
content: url('~/assets/image/Vector.png');
|
||
|
|
border-radius: 5px;
|
||
|
|
/*padding: 10px 10px;*/
|
||
|
|
text-align: center;
|
||
|
|
height: 44px;
|
||
|
|
}
|
||
|
|
.first-icon:focus{
|
||
|
|
content: url('~/assets/image/Sounscape.png');
|
||
|
|
background-color: #e9c046;
|
||
|
|
border-radius: 5px;
|
||
|
|
/*padding: 10px 10px;*/
|
||
|
|
text-align: center;
|
||
|
|
height: 44px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.second-icon{
|
||
|
|
content: url('~/assets/image/AirPods Pro Max.png');
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 10px 10px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.second-icon:focus{
|
||
|
|
content: url('~/assets/image/AirPods Pro Max (1).png');
|
||
|
|
background-color: #e9c046;
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 10px 10px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.third-icon{
|
||
|
|
content: url('~/assets/image/Vector (5).png');
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 10px 10px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.third-icon:focus{
|
||
|
|
content: url('~/assets/image/Vector (3).png');
|
||
|
|
background-color: #e9c046;
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 10px 10px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.fourth-icon{
|
||
|
|
content: url('~/assets/image/Audio Wave.png');
|
||
|
|
}
|
||
|
|
.fivith-icon{
|
||
|
|
content: url('~/assets/image/Vector (1).png');
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 10px 10px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.fivith-icon:focus{
|
||
|
|
content: url('~/assets/image/Vector (4).png');
|
||
|
|
background-color: #e9c046;
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 10px 10px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|