140 lines
2.5 KiB
Svelte
140 lines
2.5 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { UserCheck } from '$lib/userFunction';
|
|
|
|
let Nickname;
|
|
let userImage;
|
|
|
|
onMount(async () => {
|
|
const UserData = await UserCheck();
|
|
Nickname = UserData.username;
|
|
userImage = UserData.avatar_image;
|
|
|
|
});
|
|
|
|
let isOpen = false;
|
|
let items1 = ['Профиль', 'Настройки'];
|
|
let items2 = ['Выйти'];
|
|
</script>
|
|
|
|
<header class="headerClass">
|
|
<div class="divsiteAvatar">
|
|
<img class="siteAvatar" src="./BP-NEON.png" alt="лого" />
|
|
<p class="siteAvatarBP">Black Phoenix</p>
|
|
</div>
|
|
<div class="divUser">
|
|
<button class="buttonUser" on:click={() => (isOpen = !isOpen)}>
|
|
<h3 class="name">{Nickname}</h3>
|
|
<img class="userAvatar" src={userImage} alt="аватарка" />
|
|
</button>
|
|
</div>
|
|
|
|
{#if isOpen}
|
|
<div class="dropdown">
|
|
{#each items1 as item (item)}
|
|
<div class="listItem">{item}</div>
|
|
{/each}
|
|
<div class="ListLine"></div>
|
|
{#each items2 as item (item)}
|
|
<div class="listItem">{item}</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</header>
|
|
|
|
<style>
|
|
.buttonUser {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
border: 0;
|
|
|
|
|
|
}
|
|
|
|
.ListLine {
|
|
border: 1px solid lightgray;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.dropdown {
|
|
z-index: 3;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: 5vw;
|
|
top: 10vh;
|
|
width: 200px;
|
|
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
border: 0;
|
|
border-radius: 10px;
|
|
|
|
|
|
}
|
|
|
|
.listItem {
|
|
cursor: pointer;
|
|
}
|
|
|
|
div,
|
|
h3 {
|
|
font-weight: 600;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
|
|
}
|
|
.headerClass > * {
|
|
margin-bottom: 0;
|
|
}
|
|
.headerClass {
|
|
list-style: none;
|
|
display: grid;
|
|
grid-template-columns: 5vw 200px repeat(5, auto) 200px 5vw;
|
|
grid-template-rows: 9vh;
|
|
gap: 0;
|
|
}
|
|
.siteAvatar {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.siteAvatarBP {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.divsiteAvatar {
|
|
grid-column: 2;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
border: 1px solid black;
|
|
}
|
|
.divUser {
|
|
grid-column: 8;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.userAvatar {
|
|
justify-content: right;
|
|
width: 70px;
|
|
border-radius: 50%;
|
|
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|