Remove side menu in favor of unified settings page

package.json

@@ -32,7 +32,6 @@
         "vue": "^2.5.2",
         "vue-analytics": "^5.16.0",
         "vue-axios": "^2.1.1",
-        "vue-burger-menu": "^1.0.9",
         "vue-content-placeholders": "^0.2.1",
         "vue-dragscroll": "^1.5.0",
         "vue-gallery": "^1.5.0",

src/components/NavHeader/NavHeader.vue

@@ -8,96 +8,44 @@
             GAMEBRARY
         </router-link>
 
-        <button
+        <div class="share">
-            @click="showShareModal"
+            <button
-            v-if="showShareUrl"
+                @click="showShareModal"
-            title="Share"
+                v-if="showShareUrl"
-            class="small share"
+                title="Share"
-        >
+            >
-            <i class="fas fa-share-alt" />
+                <i class="fas fa-share-alt" />
-        </button>
+            </button>
 
-        <slide width="300">
+            <router-link
-            <main>
+                v-if="showSettings"
-                <section class="profile">
+                tag="button"
-                    <gravatar :email="user.email" />
+                :to="{ name: 'settings' }"
-
+            >
-                    <div class="info">
+                <i class="fas fa-cog" />
-                        <strong>{{ user.displayName }}</strong>
+            </router-link>
-                        {{ user.email }}
+        </div>
-                    </div>
-                </section>
-
-                <section class="actions">
-                    <router-link :to="{ name: 'home' }">
-                        <i class="fas fa-home" />
-                        Home
-                    </router-link>
-
-                    <router-link :to="{ name: 'platforms' }" v-if="platform">
-                        <i class="fas fa-exchange-alt" />
-                        Change platform
-                    </router-link>
-
-                    <router-link :to="{ name: 'settings' }">
-                        <i class="fas fa-cog" />
-                        Settings
-                    </router-link>
-
-                    <a href="https://www.paypal.me/RomanCervantes/5" target="_blank">
-                        <i class="fas fa-donate" />
-                        Donate
-                    </a>
-
-                    <a href="https://github.com/romancmx/gamebrary/issues" target="_blank">
-                        <i class="fas fa-bug" />
-                        Report bugs
-                    </a>
-
-                    <a href="https://goo.gl/forms/r0juBCsZaUtJ03qb2" target="_blank">
-                        <i class="fas fa-comments" />
-                        Submit feedback
-                    </a>
-
-                    <a @click="signOut">
-                        <i class="fas fa-sign-out-alt" />
-                        Sign out
-                    </a>
-
-                    <p>&copy; 2018 Gamebrary</p>
-                </section>
-            </main>
-        </slide>
     </nav>
 </template>
 
 <script>
-import Gravatar from 'vue-gravatar';
 import firebase from 'firebase/app';
 import 'firebase/auth';
 import { swal, $error } from '@/shared/modals';
-import { Slide } from 'vue-burger-menu';
 import { mapState } from 'vuex';
 
 export default {
-    components: {
-        Gravatar,
-        Slide,
-    },
-
     computed: {
         ...mapState(['user', 'platform', 'settings']),
 
-        platformLogo() {
-            return this.platform.useAlt
-                ? `/static/img/platforms/${this.platform.code}-alt.svg`
-                : `/static/img/platforms/${this.platform.code}.svg`;
-        },
-
         isHome() {
             return this.$route.name === 'home';
         },
 
+        showSettings() {
+            return this.$route.name !== 'settings';
+        },
+
         showShareUrl() {
             return this.$route.name === 'home' && this.platform;
         },
@@ -107,23 +55,11 @@ export default {
                 ? 'http://localhost:3000'
                 : 'https://gamebrary.com';
 
-            // eslint-disable-next-line
             return `${url}/#/s/${this.user.uid}/${this.platform.code}`;
         },
     },
 
     methods: {
-        signOut() {
-            firebase.auth().signOut()
-                .then(() => {
-                    this.$store.commit('CLEAR_SESSION');
-                    this.$router.push({ name: 'home' });
-                })
-                .catch((error) => {
-                    $error(error);
-                });
-        },
-
         showShareModal() {
             swal({
                 titleText: 'Share your list',
@@ -155,8 +91,12 @@ export default {
 
         .share {
             position: fixed;
-            top: $gp / 2;
+            top: 0;
-            right: $gp / 2;
+            right: 0;
+
+            button {
+                height: $navHeight;
+            }
         }
 
         &.dark {
@@ -179,31 +119,6 @@ export default {
         }
     }
 
-    .profile {
-        display: flex;
-        align-items: center;
-
-        .info {
-            display: flex;
-            flex-direction: column;
-            margin-left: $gp;
-            color: $color-dark-gray;
-        }
-
-        img {
-            width: 40px;
-            height: 40px;
-            border-radius: 100%;
-            border: 2px solid $color-white;
-            box-shadow: 0 0 2px 0px $color-dark-gray;
-
-            @media($small) {
-                width: 40px;
-                height: 40px;
-            }
-        }
-    }
-
     main {
         height: 100vh;
         border-right: 2px solid $color-light-gray;
@@ -228,16 +143,6 @@ export default {
             display: flex;
         }
     }
-
-    .bm-overlay {
-        nav > div {
-            background: #0008;
-            position: fixed;
-            width: 100%;
-            height: 100%;
-            z-index: 3;
-        }
-    }
 </style>
 
 <style lang="scss" rel="stylesheet/scss">

src/pages/Settings/Settings.vue

@@ -1,7 +1,18 @@
 <template lang="html">
     <div class="settings" v-if="user" :class="{ dark: settings && settings.nightMode }">
         <section>
-            <h4>Settings</h4>
+            <h3>Settings</h3>
+        </section>
+
+        <section>
+            <div class="profile">
+                <gravatar :email="user.email" />
+
+                <div class="info">
+                    <strong>{{ user.displayName }}</strong>
+                    {{ user.email }}
+                </div>
+            </div>
         </section>
 
         <section>
@@ -35,11 +46,40 @@
         </section>
 
         <section>
+            <button class="hollow small info logout" @click="signOut">
+                <i class="fas fa-sign-out-alt" />
+                Sign out
+            </button>
+
             <button @click="promptDelete" class="error hollow small">
                 <i class="fas fa-exclamation-triangle" />
                 Delete Account
             </button>
         </section>
+
+        <section>
+            <a href="https://www.paypal.me/RomanCervantes/5" class="link small" target="_blank">
+                <i class="fas fa-donate" />
+                Donate
+            </a>
+
+            <a href="https://github.com/romancmx/gamebrary/issues" class="link small" target="_blank">
+                <i class="fas fa-bug" />
+                Report bugs
+            </a>
+
+            <a href="https://goo.gl/forms/r0juBCsZaUtJ03qb2" class="link small" target="_blank">
+                <i class="fas fa-comments" />
+                Submit feedback
+            </a>
+        </section>
+
+        <div class="copyright">
+            <p>
+                <i class="far fa-copyright" /> 2018 Gamebrary.
+                <i class="fas fa-code" /> with <i class="fas fa-heart" /> by
+            <a href="https://twitter.com/romancm" target="_blank">@romancm</a></p>
+        </div>
     </div>
 </template>
 
@@ -141,6 +181,17 @@ export default {
                 });
         },
 
+        signOut() {
+            firebase.auth().signOut()
+                .then(() => {
+                    this.$store.commit('CLEAR_SESSION');
+                    this.$router.push({ name: 'home' });
+                })
+                .catch((error) => {
+                    $error(error);
+                });
+        },
+
         save: debounce(
             // eslint-disable-next-line
             function() {
@@ -162,13 +213,41 @@ export default {
 
     .settings {
         background: $color-white;
+        color: $color-dark-gray;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
         min-height: calc(100vh - #{$navHeight});
 
+        .profile {
+            display: flex;
+            align-items: center;
+
+            .info {
+                display: flex;
+                flex-direction: column;
+                margin-left: $gp;
+                color: $color-dark-gray;
+            }
+
+            img {
+                width: 40px;
+                height: 40px;
+                border-radius: 100%;
+                border: 2px solid $color-white;
+                box-shadow: 0 0 2px 0px $color-dark-gray;
+
+                @media($small) {
+                    width: 40px;
+                    height: 40px;
+                }
+            }
+        }
+
         section {
             width: 600px;
             margin: 0 auto;
             max-width: 100%;
-            color: $color-dark-gray;
             border-bottom: 1px solid #f0f0f0;
             padding: $gp;
             display: flex;
@@ -192,6 +271,10 @@ export default {
             }
         }
 
+        .logout {
+            margin-right: $gp;
+        }
+
         .share-link {
             max-width: 340px;
             margin: 0;
@@ -206,4 +289,20 @@ export default {
             }
         }
     }
+
+    .copyright {
+        text-align: center;
+        margin-top: auto;
+        padding: $gp;
+
+        p {
+            margin: $gp / 3 0;
+        }
+
+        a {
+            color: $color-dark-gray;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    }
 </style>