Initial commit

resources/js/Components/Layouts/AuthenticatedLayout.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { inertia, page } from '@inertiajs/svelte';
+    import { globalState } from "@/Library/PassState.svelte";
+
+    //eslint-disable-next-line
+	let { children }: { children: any } = $props();
+</script>
+
+<div class="flex flex-col h-screen">
+	<div class="flex flex-grow overflow-hidden">
+		<nav class="flex flex-col w-2/12 items-center space-y-6 bg-zinc-800 px-10 py-6 text-white text-2xl">
+			<div class="rounded-lg bg-slate-700 px-4 py-1">{$page.props.appName}</div>
+            <a href="/" use:inertia class="hover:underline">Home</a>
+		</nav>
+
+        <main class="w-10/12 px-10 py-8 overflow-y-auto">
+            <div class="flex items-center justify-between mb-4">
+                <div class="mr-4">
+                    {@render globalState.title?.()}
+                </div>
+                <div class="relative flex-grow">
+                    <span class="material-icons text-gray-900 absolute left-3 top-1/2 transform -translate-y-1/2">search</span>
+                    <input type="text" placeholder="Search..." class="w-full p-2 pl-10 rounded-full bg-gray-200 text-black" />
+                </div>
+            </div>
+            {@render children()}
+        </main>
+	</div>
+
+	<div class="relative w-full bg-zinc-800 text-white p-8 flex flex-col items-center">
+		<input
+			type="range"
+			class="absolute w-full h-4 bg-gray-700 appearance-none slider"
+			style="top: 0px;"
+            value="0"
+		/>
+		<div class="w-full flex items-center justify-between mt-2">
+			<div>Track Info</div>
+			<div>Player Controls</div>
+			<div>Volume Controls</div>
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	.slider {
+		height: 4px;
+		transition: height 0.3s ease;
+		padding: 0;
+	}
+
+	.slider:hover {
+		height: 4px;
+	}
+
+	.slider::-webkit-slider-thumb {
+		width: 16px;
+		height: 16px;
+		background: #fff;
+		border-radius: 50%;
+		cursor: pointer;
+		-webkit-appearance: none;
+		appearance: none;
+	}
+
+	.slider::-moz-range-thumb {
+		width: 16px;
+		height: 16px;
+		background: #fff;
+		border-radius: 50%;
+		cursor: pointer;
+	}
+</style>