create playlist view

- add support for scss

src/assets/css/_variables.scss

@@ -0,0 +1,2 @@
+$card-dark: #131313b2;
+$red: #df4646;

src/components/LeftSidebar/Navigation.vue

@@ -27,7 +27,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'Home' }">
+    <router-link :to="{ name: 'PlaylistView' }">
       <div class="nav-button" id="playlists-button">
         <div class="in">
           <div class="nav-icon image" id="playlists-icon"></div>

src/components/PlaylistView/Header.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="p-header rounded">
+    <div class="album-art rounded"></div>
+    <div></div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.p-header {
+  display: flex;
+  padding: 0.5rem;
+  background-color: $card-dark;
+  height: calc(100% - 1rem);
+}
+
+.p-header > * {
+  // border: solid;
+}
+
+.p-header .album-art {
+  width: 15rem;
+  height: 15rem;
+  background: $red;
+}
+</style>

src/main.js

@@ -3,7 +3,7 @@ import App from "./App.vue";
 import "./registerServiceWorker";
 import router from "./router";
 
-import "../src/assets/css/global.css";
+import "../src/assets/css/global.scss";
 
 import "animate.css";
 

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Home from "../views/Home.vue";
 import FolderView from "../views/FolderView.vue";
+import PlaylistView from "../views/PlaylistView.vue";
 
 const routes = [
   {
@@ -13,6 +14,11 @@ const routes = [
     name: "FolderView",
     component: FolderView,
   },
+  {
+    path: "/playlist",
+    name: "PlaylistView",
+    component: PlaylistView,
+  }
 ];
 
 const router = createRouter({

src/views/PlaylistView.vue

@@ -0,0 +1,19 @@
+<template>
+  <Header />
+</template>
+
+<script>
+import Header from "@/components/PlaylistView/Header.vue";
+
+export default {
+  components: {
+    Header,
+  },
+  setup() {
+    return {};
+  },
+};
+</script>
+
+<style>
+</style>