<script>
	import "../app.css";
</script>

<div class="navbar text-lg py-1">
	<div class="container flex items-center">
		<a href="/">
			<img class="w-40 mr-6" src="/banner.png" alt="" />
		</a>
		<a class="mr-7" href="/games">Games</a>
		<a class="mr-7" href="/catalog">Catalog</a>
		<a class="mr-7" href="/forums">Forums</a>
		<input
			class="rounded-lg px-2 border-2 border-grey-300 text-black"
			type="text"
			name="search"
			id="search"
			placeholder="Search"
		/>
		<span class="flex-grow" />
		<a class="mr-2 px-2 flex items-center rounded bg-blue-500 shadow-lg" href="/my/money">
			<img class="h-6 mr-1.5" src="/rowbux.png" alt="" />
			100
		</a>
		<div class="relative inline-block dropdown">
			<button class="hover:text-zinc-200" href="/my/profile"
				>abcdefghijklmnop
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 24 24"
					fill="currentColor"
					class="w-4 h-4 inline-block"
				>
					<path
						fill-rule="evenodd"
						d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z"
						clip-rule="evenodd"
					/>
				</svg>
			</button>

			<div
				class="absolute bg-white text-center text-black w-36 right-0 origin-top-right rounded border border-gray-300 divide-y shadow-lg hidden dropdown-content"
			>
				<div>
					<a class="block px-4 py-0.5 text-gray-700" href="/my/profile">Profile</a>
					<a class="block px-4 py-0.5 text-gray-700" href="/my/settings">Settings</a>
				</div>
				<a class="block px-4 py-0.5 text-red-700" href="/logout">Logout</a>
			</div>
		</div>
	</div>
</div>
<div class="bg-zinc-800 text-base py-0.5">
	<div class="container flex items-center">
		<a class="mr-6" href="/my/avatar">Profile</a>
		<a class="mr-6" href="/my/avatar">Avatar</a>
		<a class="mr-6" href="/my/money">Money</a>
		<a class="mr-6" href="/groups">Groups</a>
		<a class="mr-6" href="/people">People</a>
		<a class="mr-6" href="/my/invites">Invites</a>
		<a class="mr-6" href="/my/settings">Settings</a>
	</div>
</div>

<slot />
