Add player component and integrate into app layout

app/app.vue

@@ -2,6 +2,7 @@
 	<ToastContainer />
 	<NuxtLayout>
 		<NuxtPage />
+		<Player />
 	</NuxtLayout>
 </template>
 

app/components/Player/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="tsx">
+const widthFixer = useTemplateRef("width-fixer")
+const player = useTemplateRef("player")
+
+onMounted(() => {
+	const resizeObserver = new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			if (player.value)
+				player.value.style.width = `${entry.target.clientWidth}px`
+		}
+	})
+
+	if (widthFixer.value) resizeObserver.observe(widthFixer.value)
+})
+</script>
+
+<template>
+	<div id="width-fixer" ref="width-fixer"></div>
+	<article class="player" ref="player"></article>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+
+#width-fixer {
+	width: 100%;
+}
+
+.player {
+	position: fixed;
+	bottom: 1rem;
+
+	height: 72px;
+
+	border-radius: $border-radius-standard;
+}
+</style>

app/pages/index.vue

@@ -1,5 +1,18 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const player = usePlayer()
+
+const { data } = useApiFetch("/all/tracks")
+
+const play = () => {
+	player.addToQueue(data.value[0])
+	player.play()
+}
+</script>
 
 <template>
+	<Button @click="play">Test play</Button>
+
 	<AlbumSlider />
+
+	<div :style="{ height: '100vh' }"></div>
 </template>

app/ui/Sidebar.vue

@@ -39,6 +39,7 @@
 		height: 100%;
 		overflow-y: auto;
 		padding: 2rem 3rem;
+		position: relative;
 	}
 }
 </style>