106 lines
3.0 KiB
Vue
106 lines
3.0 KiB
Vue
<template>
|
|
<div class="menu-wrapper">
|
|
<ul class="menu">
|
|
<li class="menu-item">
|
|
<p>Chat</p>
|
|
<a>
|
|
<img src="/assets/icons/chat.png">
|
|
</a>
|
|
</li>
|
|
<li class="menu-item">
|
|
<p>World</p>
|
|
<a>
|
|
<img src="/assets/icons/world.png">
|
|
</a>
|
|
</li>
|
|
<li class="menu-item">
|
|
<p>Users</p>
|
|
<a>
|
|
<img src="/assets/icons/users.png">
|
|
</a>
|
|
</li>
|
|
<li class="menu-item">
|
|
<p>Inventory</p>
|
|
<a>
|
|
<img src="/assets/icons/treasure-chest.png">
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '@/assets/scss/main';
|
|
|
|
.menu-wrapper {
|
|
.menu {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 1.25rem;
|
|
|
|
.menu-item {
|
|
position: relative;
|
|
p {
|
|
position: absolute;
|
|
bottom: 3.125rem;
|
|
width: 4rem;
|
|
text-align: center;
|
|
background-color: #B1B2B5;
|
|
border: 2px solid $white;
|
|
border-radius: 1.5rem;
|
|
height: 1.5rem;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: none;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 100%;
|
|
background-color: $white;
|
|
height: 0.5rem;
|
|
width: 0.875rem;
|
|
clip-path: polygon(100% 0, 0 0, 50% 100%);
|
|
left: calc(50% - 0.4375rem);
|
|
}
|
|
}
|
|
|
|
a {
|
|
padding: 0.5rem;
|
|
background-color: rgba(127, 127, 127, 0.7);
|
|
border: 2px solid $white;
|
|
border-radius: 100%;
|
|
display: block;
|
|
width: 1.875rem;
|
|
height: 1.875rem;
|
|
|
|
img {
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
p {
|
|
display: block;
|
|
}
|
|
a {
|
|
background-image: url('/assets/galaxy.png');
|
|
background-position: center;
|
|
background-size: cover;
|
|
img {
|
|
-webkit-filter: drop-shadow(0px 3px 6px $black);
|
|
filter: drop-shadow(0px 3px 6px $black);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |