Nav (mobile support? LOL.)

src/app.css

@@ -4,8 +4,28 @@
 
 html,
 body {
-	@apply bg-zinc-800;
 	@apply text-white;
 	padding: 0;
 	margin: 0;
 }
+
+.navbar {
+	background-image: url(/background.png);
+	animation-name: scrollbg;
+	animation-duration: 120s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+}
+
+@keyframes scrollbg {
+	from {
+		background-position: 0 0;
+	}
+	to {
+		background-position: 100% 100%;
+	}
+}
+
+.dropdown:hover .dropdown-content {
+	display: block;
+}

src/routes/+layout.svelte

@@ -2,4 +2,65 @@
 	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 />

tailwind.config.cjs

@@ -1,11 +1,14 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
+	content: ["./src/**/*.{html,js,svelte,ts}"],
-  theme: {
+	theme: {
-    container: {
+		container: {
 			center: true,
-    },
+			padding: {
-    extend: {}
+				"2xl": "16rem"
-  },
+			}
-  plugins: []
+		},
+		extend: {}
+	},
+	plugins: []
 };