mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-06-09 12:37:22 +00:00
126 lines
2.6 KiB
Vue
126 lines
2.6 KiB
Vue
<template>
|
|
<div class="side-nav-container">
|
|
<router-link
|
|
v-for="menu in menus"
|
|
:key="menu.name"
|
|
:to="{ name: menu.route_name, params: menu.params }"
|
|
>
|
|
<div class="nav-button" id="home-button" v-motion-slide-from-left-100>
|
|
<div class="in">
|
|
<!-- <div class="nav-icon image" :id="`${menu.name}-icon`"></div> -->
|
|
<!-- <img src="../../assets/icons/a.svg" alt="" /> -->
|
|
<!-- <HomeSvg /> -->
|
|
<component :is="menu.icon"></component>
|
|
<span>{{ menu.name }}</span>
|
|
</div>
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import HomeSvg from "../../assets/icons/home.svg";
|
|
import AlbumSvg from "../../assets/icons/album.svg";
|
|
import ArtistSvg from "../../assets/icons/artist.svg";
|
|
import PlaylistSvg from "../../assets/icons/playlist.svg";
|
|
import FolderSvg from "../../assets/icons/folder.svg";
|
|
|
|
const menus = [
|
|
// {
|
|
// name: "home",
|
|
// route_name: "Home",
|
|
// icon: HomeSvg,
|
|
// },
|
|
// {
|
|
// name: "albums",
|
|
// route_name: "AlbumsView",
|
|
// icon: AlbumSvg,
|
|
// },
|
|
// {
|
|
// name: "artists",
|
|
// route_name: "ArtistsView",
|
|
// icon: ArtistSvg,
|
|
// },
|
|
{
|
|
name: "playlists",
|
|
route_name: "Playlists",
|
|
icon: PlaylistSvg,
|
|
},
|
|
{
|
|
name: "folders",
|
|
route_name: "FolderView",
|
|
params: { path: "$home" },
|
|
icon: FolderSvg,
|
|
},
|
|
// {
|
|
// name: "tags",
|
|
// },
|
|
// {
|
|
// name: "settings",
|
|
// route_name: "SettingsView",
|
|
// },
|
|
];
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.side-nav-container {
|
|
color: #fff;
|
|
margin: 1rem 0;
|
|
text-transform: capitalize;
|
|
|
|
.nav-button {
|
|
border-radius: $small;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
padding: 0.6rem 0;
|
|
|
|
&:hover {
|
|
background-color: $gray3;
|
|
}
|
|
|
|
.nav-icon {
|
|
height: 2rem;
|
|
width: 2rem;
|
|
margin: 0 $small 0 $small;
|
|
border-radius: $small;
|
|
background-color: rgb(26, 24, 24);
|
|
}
|
|
|
|
.in {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
& > * {
|
|
background-size: 1.5rem;
|
|
}
|
|
}
|
|
|
|
// #mixes-icon {
|
|
// background-image: url(../../assets/icons/mix.svg);
|
|
// }
|
|
|
|
// #folders-icon {
|
|
// background-image: url(../../assets/icons/folder.svg);
|
|
// }
|
|
// #settings-icon {
|
|
// background-image: url(../../assets/icons/settings.svg);
|
|
// }
|
|
// #tags-icon {
|
|
// background-image: url(../../assets/icons/tag.svg);
|
|
// }
|
|
}
|
|
|
|
svg {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
margin: 0 $small 0 $small;
|
|
border-radius: $small;
|
|
}
|
|
|
|
svg > path {
|
|
fill: $red !important;
|
|
}
|
|
}
|
|
</style>
|