<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>
