imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Worked on zone manager

Browse Source
This commit is contained in:
Dennis Postma
2024-06-11 01:10:22 +02:00
parent 399e994bbe
commit 8e174a063a
29 changed files with 658 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/gui/Menu.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<div class="menu-wrapper">
<ul class="menu">
<li class="menu-item">
<p>Chat</p>
<a>
<img draggable="false" src="/assets/icons/chat.png" />
</a>
</li>
<li class="menu-item">
<p>World</p>
<a>
<img draggable="false" src="/assets/icons/world.png" />
</a>
</li>
<li class="menu-item">
<p>Users</p>
<a>
<img draggable="false" src="/assets/icons/users.png" />
</a>
</li>
<li class="menu-item">
<p>Inventory</p>
<a>
<img draggable="false" 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: 20px;
.menu-item {
position: relative;
p {
position: absolute;
bottom: 50px;
width: 64px;
text-align: center;
background-color: #b1b2b5;
border: 2px solid $white;
border-radius: 24px;
height: 24px;
font-size: 0.875rem;
line-height: 24px;
left: 50%;
transform: translateX(-50%);
display: none;
&::after {
content: '';
position: absolute;
top: 100%;
background-color: $white;
height: 8px;
width: 14px;
clip-path: polygon(100% 0, 0 0, 50% 100%);
left: 50%;
transform: translateX(-50%);
}
}
a {
padding: 8px;
background-color: rgba(127, 127, 127, 0.7);
border: 2px solid $white;
border-radius: 50%;
display: block;
width: 30px;
height: 30px;
img {
width: inherit;
height: inherit;
}
}
&:hover {
p {
display: block;
}
a {
background-image: url('/assets/galaxy.png');
background-position: center;
background-size: cover;
img {
filter: drop-shadow(0px 3px 6px $black);
}
}
}
}
}
}
</style>