<script lang="ts"> import {inertia, page, router} from '@inertiajs/svelte'; import { globalState } from "@/Library/PassState.svelte"; import type {Snippet} from "svelte"; //eslint-disable-next-line let { children }: { children: Snippet } = $props(); const searchChanged = () => { if ($page.url !== '/search') { router.visit('/search', { preserveState: true, }) } if ($page.url === '/search' && globalState.searchQuery === '') { router.visit('/', { preserveState: true, }) } } </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 main-content"> <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..." bind:value={globalState.searchQuery} oninput={searchChanged} 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>