Nav Overhaul + splitting out player list

package.json

@@ -50,9 +50,9 @@
     "rules": {}
   },
   "prettier": {
-    "tabWidth":4,
-    "semi":true,
-    "singleQuote":true
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -1,9 +1,10 @@
 <template>
     <v-app>
         <app-navigation></app-navigation>
-
-        <v-main transition="slide-x-transition">
-            <router-view></router-view>
+        <v-main>
+            <transition name="fade" mode="out-in">
+                <router-view />
+            </transition>
         </v-main>
     </v-app>
 </template>
@@ -21,4 +22,16 @@ export default {
 };
 </script>
 
-<style></style>
+<style>
+.fade-enter-active,
+.fade-leave-active {
+    transition-duration: 0.2s;
+    transition-property: opacity;
+    transition-timing-function: ease;
+}
+
+.fade-enter,
+.fade-leave-active {
+    opacity: 0;
+}
+</style>

src/components/AppNavigation.vue

@@ -1,53 +1,44 @@
 <template>
     <span>
-        <v-navigation-drawer
-            app
-            v-model="drawer"
-            class="light-blue darken-4"
-            dark
-            disable-resize-watcher
-        >
-            <v-list>
-                <v-list-item
-                    v-for="(item, index) in items"
-                    :key="index"
-                    :to="item.to"
-                    link
-                    @click="drawer = !drawer"
-                >
-                    <v-list-item-title>
-                        {{ item.title }}
-                    </v-list-item-title>
-                    <v-divider :key="`divider-${index}`"></v-divider>
-                </v-list-item>
-            </v-list>
+        <v-navigation-drawer v-model="drawer" app color="light-blue darken-4" dark disable-resize-watcher>
+        <v-list>
+            <v-list-item
+            v-for="(item, index) in buttons"
+            :key="index"
+            :to="item.to"
+            @click="drawer=!drawer"
+            >
+            <v-list-item-icon>
+                <v-icon large color="white">{{ item.icon }}</v-icon>
+            </v-list-item-icon>
+            <v-list-item-content v-text="item.title" />
+            </v-list-item>
+        </v-list>
         </v-navigation-drawer>
         <v-app-bar app color="light-blue darken-4" dark>
-            <v-app-bar-nav-icon
-                v-if="!drawer"
-                @click="drawer = !drawer"
-            ></v-app-bar-nav-icon>
-            <router-link to="/">
-                <v-toolbar-title>{{ appTitle }}</v-toolbar-title>
-            </router-link>
+            <v-app-bar-nav-icon @click="drawer=!drawer" />
+            <v-toolbar-title>{{ appTitle }}</v-toolbar-title>
         </v-app-bar>
     </span>
 </template>
 
 <script>
+import store from '@/store/index.js';
+
 export default {
     name: 'AppNavigation',
-    data() {
+    data: () => {
         return {
-            appTitle: 'Crusaders Baseball',
             drawer: false,
-            items: [
-                { title: 'Home', to: '/' },
-                { title: 'Roster', to: '/roster' },
-                { title: 'Drills', to: '/drills' },
-                { title: 'Join', to: '/3' }
+            buttons: [
+                { title: 'Roster', to: '/roster', icon: 'mdi-account-group' },
+                { title: 'Drills', to: '/drills', icon: 'mdi-baseball' },
+                { title: 'Depth Chart', to: '/deptchart', icon: 'mdi-baseball-diamond' }
             ]
         };
+    },
+    computed: {
+        appTitle: () => store.state.appTitle
     }
 };
 </script>

src/components/PlayerList.vue

@@ -0,0 +1,41 @@
+<template>
+    <v-card class="rosterList">
+        <v-list>
+            <v-list-item-group v-model="playerId"
+                color="primary"
+            >
+                <v-list-item v-for="(player, index) in roster" :key="index" @click="playerSelected(index)">
+                    <v-list-item-content>
+                        <v-list-item-title>{{ player }}</v-list-item-title>
+                    </v-list-item-content>
+                </v-list-item>
+            </v-list-item-group>
+        </v-list>
+    </v-card>
+</template>
+
+<script>
+import store from '@/store/index.js';
+
+export default {
+    name: 'PlayerList',
+    data: () => {
+        return { playerId: store.state.selectedPlayer };
+    },
+    computed: {
+        roster: () => store.state.roster
+    },
+    methods: {
+        playerSelected: (playerId) => {
+            store.commit('selectPlayer', playerId)
+        }
+    }
+};
+</script>
+
+<style scoped>
+.rosterList {
+    width: 20%;
+    height: 90%;
+}
+</style>

src/router/index.js

@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Roster from '@/views/Roster';
-import Home from '@/views/Home';
 
 Vue.use(VueRouter);
 
@@ -11,7 +10,6 @@ const routes = [
     {
         path: '/',
         name: 'home',
-        component: Home
     },
     {
         path: '/roster',
@@ -22,7 +20,7 @@ const routes = [
         path: '/drills',
         name: 'drills',
         beforeEnter: () => {
-            if (!win) {
+            if (!win || win.closed) {
                 win = window.open('https://baseball-tutorials.com');
             } else {
                 win.focus();

src/store/index.js

@@ -5,6 +5,8 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
     state: {
+        appTitle: 'Crusaders Baseball 2021',
+        selectedPlayer: null,
         roster: [
             'Thomas Dunphy',
             'Caleb Wilson',
@@ -21,10 +23,14 @@ export default new Vuex.Store({
             'Rok Urankar',
             'Andrew Smith',
             'Aganze Nkere'
-
         ]
     },
-    mutations: {},
+    mutations: {
+        selectPlayer(state, id)
+        {
+            state.selectedPlayer = id;
+        }
+    },
     actions: {},
     modules: {}
 });

src/views/Roster.vue

@@ -1,20 +1,6 @@
 <template>
     <v-container class="d-flex flex-row align-left">
-        <v-card class="rosterList">
-            <v-list>
-                <v-list-item-group v-model="selectedPlayer" color="primary">
-                    <v-list-item
-                        v-for="(player, index) in roster"
-                        :key="index"
-                        @click="selectedPlayer = index"
-                    >
-                        <v-list-item-content>
-                            <v-list-item-title>{{ player }}</v-list-item-title>
-                        </v-list-item-content>
-                    </v-list-item>
-                </v-list-item-group>
-            </v-list>
-        </v-card>
+        <player-list v-model="selectedPlayer" />
         <v-spacer></v-spacer>
         <v-card class="detail">
             <h1>{{ roster[selectedPlayer] }}</h1>
@@ -24,25 +10,20 @@
 
 <script>
 import store from '@/store/index.js';
+import PlayerList from '@/components/PlayerList';
 
 export default {
-    name: 'Template',
-    data: () => {
-        return { selectedPlayer: 1 };
-    },
+    name: 'Roster',
+    components: { PlayerList },
     computed: {
-        roster: () => store.state.roster
+        roster: () => store.state.roster,
+        selectedPlayer: () => store.state.selectedPlayer
     }
 };
 </script>
 
 <style scoped>
-.rosterList {
-    width: 20%;
-    height: 90%;
-}
-.detail
-{
+.detail {
     width: 75%;
     min-height: 75%;
     text-align: center;