svelte-testing/src/routes/__layout.svelte

<script>
	import '../app.css';
	import Header from '../components/misc/header.svelte';
	import AlertHeader from '../components/misc/alert-header.svelte';
	import Musicplayer from '../components/misc/musicplayer.svelte';
	import CurrentMusicStore from '../stores/currentMusic';
	import Musicselectionmodal from '../components/misc/musicselectionmodal.svelte';
	import musicStore from '../stores/musicStore';

	$: musicPaused = $CurrentMusicStore.paused;
	$: musicTitle = $CurrentMusicStore.musicTitle;
	$: musicArtist = $CurrentMusicStore.musicArtist;
	$: musicUrl = $CurrentMusicStore.musicUrl;

	function onMusicToggle() {
		if (musicUrl == '') {
			$CurrentMusicStore.musicTitle = $musicStore[0].musicTitle;
			$CurrentMusicStore.musicArtist = $musicStore[0].musicArtist;
			$CurrentMusicStore.musicUrl = $musicStore[0].musicUrl;
		}

		$CurrentMusicStore.paused = !$CurrentMusicStore.paused
		return;
	}

	// Modal stuff
	let modalShow = false;
</script>

<div class="-z-20 absolute">
	<Musicplayer />
</div>
<div
	class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen h-screen text-murasaki overflow-auto"
>
	<!-- modal -->
	<Musicselectionmodal bind:show={modalShow} />
	<!-- Possible alert header -->
	<!--<AlertHeader text='ALERT'/>-->
	<div class="bg-slate-100 w-full h-min md:h-10 lg:pl-20">
		<button on:click={onMusicToggle} class="bg-white border-black border rounded h-min w-20">
			{#if musicPaused}
				<span class="font-mono">▶</span>
				Play
			{:else}
				<span class="font-mono ">⏸&#xFE0E;</span>
				Pause
			{/if}
		</button>
		<button class="bg-white border-black border rounded h-min"
			on:click={() => {
				modalShow = !modalShow;
			}}>Show music selection</button
		>
		<br class="block md:hidden">
		<span>Current song: {musicArtist} - {musicTitle}</span>
	</div>
	<!-- Header -->
	<Header />
	<!-- Main content -->
	<slot />
</div>

<!-- background-image: linear-gradient(to right top, #051937, #1a325b, #304d82, #466aab, #5d88d6); 
https://mycolor.space/gradient?ori=to+right+top&hex=%23051937&hex2=%235D88D6&sub=1
-->
<style>
	@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&family=Roboto+Slab&display=swap');
</style>