mirror of
https://github.com/JuLi0n21/pwa-player.git
synced 2026-04-19 15:30:05 +00:00
36 lines
1.2 KiB
Vue
36 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { useRoute } from "vue-router";
|
|
|
|
const route = useRoute();
|
|
|
|
function isActive(path: string) {
|
|
return route.path === path ? "bg-blue-500 text-white" : "";
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main class="flex-1 flex flex-col h-full overflow-y-scroll md:overflow-hidden">
|
|
<header v-show="true">
|
|
<div class="wrapper">
|
|
<nav class="flex justify-start my-2 mx-1 space-x-1 overflow-y-auto overflow-x-auto flex-nowrap text-nowrap">
|
|
<RouterLink class="p-1 rounded-full backdrop--light shadow-xl" to="/"
|
|
><i class="fa-solid fa-arrow-left"></i>
|
|
</RouterLink>
|
|
<RouterLink :class="`p-1 rounded-full backdrop--light shadow-xl ${isActive('/')}`" to="/menu/recent"
|
|
>Recently added</RouterLink
|
|
>
|
|
<RouterLink :class="`p-1 rounded-full backdrop--light shadow-xl ${isActive('/')}`" to="/menu/favourites">
|
|
Favorites</RouterLink
|
|
>
|
|
<RouterLink :class="`p-1 rounded-full backdrop--light shadow-xl ${isActive('/')}`" to="/menu/collections">
|
|
Collections</RouterLink
|
|
>
|
|
</nav>
|
|
<hr />
|
|
</div>
|
|
</header>
|
|
|
|
<router-view />
|
|
</main>
|
|
</template>
|