Initial commit

src/app/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

src/app/App.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <div class="min-vh-100 d-flex align-items-stretch justify-spcace-between">
+      <div class="sidebar elevated d-none d-md-block" :class="{'d-block':showMenu}">
+        <SideNav></SideNav>
+      </div>
+      <div class="main flex-fill">
+        <div class="container-fluid pt-3 pb-3">
+          <TopNav/>
+          <router-view></router-view>
+        </div>
+      </div>
+    </div>
+    <footer class="footer elevated">
+      <Player />
+    </footer>
+  </div>
+</template>
+<style lang="scss" >
+  .sidebar {
+    // position: sticky;
+    // top: 0;
+    // height: calc(100vh - 80px);
+    // width: 200px;
+    // min-width: 200px;
+    // max-width: 200px;
+    // text-overflow: ellipsis;
+
+    .nav-link {
+      width: 220px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .main {
+    margin-bottom: 80px;
+  }
+  .sidebar {
+    padding-bottom: 180px;
+  }
+  .footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 80px;
+  }
+</style>
+<script lang="ts">
+  import SideNav from "./SideNav.vue";
+  import TopNav from "./TopNav.vue";
+  import Player from "@/player/Player.vue";
+  import { mapState, mapMutations } from 'vuex';
+
+  export default {
+    components: {
+      SideNav,
+      TopNav,
+      Player,
+    },
+    computed: {
+      ...mapState(['showMenu'])
+    },
+  };
+</script>

src/app/SideNav.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="text-truncate">
+    <nav class="nav flex-column">
+      <router-link class="nav-link" :to="{name: 'home'}">
+        <img src="@/app/logo.png" class="img-fluid">
+      </router-link>
+
+      <router-link class="nav-link" :to="{name: 'home'}">
+        <Icon>mdi-home</Icon> Home
+      </router-link>
+
+
+    <router-link class="nav-link" :to="{name: 'queue'}">
+      <Icon>mdi-view-list</Icon> Playing
+    </router-link>
+
+      <router-link class="nav-link" :to="{name: 'starred'}">
+        <Icon>mdi-star</Icon> Starred
+      </router-link>
+      
+            <a class="nav-link disabled">
+        <small class="text-uppercase text-muted font-weight-bold">
+          Library
+        </small>
+      </a>
+
+
+      <router-link class="nav-link" :to="{name: 'albums'}">
+        <Icon>mdi-album</Icon> Albums
+      </router-link>
+
+      <router-link class="nav-link" :to="{name: 'artists'}">
+        <Icon>mdi-artist</Icon> Artists
+      </router-link>
+
+      <router-link class="nav-item nav-link" :to="{name: 'genres'}">
+        <Icon>mdi-library-music</Icon> Genres
+      </router-link>
+
+      <PlaylistNav/>
+
+      
+<!-- 
+      <router-link class="nav-item nav-link" :to="{name: 'radio'}">
+        <Icon>mdi-radio</Icon> Radio
+      </router-link>
+
+      <router-link class="nav-item nav-link" :to="{name: 'settings'}">
+        <Icon>mdi-settings</Icon>Settings
+      </router-link> -->
+      <!-- <a href="#" class="nav-item nav-link" @click.prevent="logout">
+        <Icon>mdi-</Icon> Logout
+      </a> -->
+    </nav>
+  </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import PlaylistNav from "@/playlist/PlaylistNav.vue";
+import { mapState } from 'vuex';
+
+export default Vue.extend({
+  components: {
+    PlaylistNav,
+  },
+  props: {
+    show: Boolean
+  },
+  methods: {
+    logout() {
+      this.$auth.logout();
+      this.$router.go(0);
+    },
+  }
+});
+</script>

src/app/TopNav.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="d-flex align-items-center mb-2">
+    <button class="navbar-toggler text-white d-md-none" @click="toggleMenu">
+      <Icon>mdi-menu</Icon>
+    </button>
+
+    <div class="ml-auto"></div>
+
+    <SearchForm/>
+
+    <template v-if="username">
+      <b-dropdown variant="link" right :text="username">
+        <b-dropdown-item-button @click="logout">
+          <Icon>mdi-logout</Icon> Logout
+        </b-dropdown-item-button>
+      </b-dropdown>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import { mapMutations, mapState } from 'vuex';
+import SearchForm from '@/search/SearchForm.vue';
+
+  export default Vue.extend({
+    components: {
+      SearchForm,
+    },
+    computed: {
+      ...mapState(["username"])
+    },
+    methods: {
+      ...mapMutations([
+        'toggleMenu',
+      ]),
+      logout() {
+        this.$auth.logout();
+        this.$router.go(0);
+      }
+    }
+  });
+</script>

src/app/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>