💄: hide header on battleground page

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <header>
+    <header v-if="showHeader">
       <span>Nexus Timers</span>
     </header>
     <main>
@@ -10,28 +10,20 @@
 </template>
 
 <script>
-export default {
-  name: 'app'
-}
+  // The header will be shown if the path match this regex
+  const ROUTES_WITH_HEADER = /\/(battlegrounds)?$/
+
+  export default {
+    name: 'app',
+    computed: {
+      showHeader () {
+        return ROUTES_WITH_HEADER.test(this.$route.path)
+      }
+    }
+  }
 </script>
 
-
-<style lang="sass">
-  body
-    margin: 0
-
-  html
-    font-family: Avenir, Helvetica, Arial, sans-serif
-    -webkit-font-smoothing: antialiased
-    -moz-osx-font-smoothing: grayscale
-    color: $blizzard-font-color
-    text-shadow: 0 0 1rem #009cff
-    background-color: $blizzard-background-color
-
-  main
-
-    margin-top: 20px
-
+<style lang="sass" scoped>
   header
     margin: 0
     height: 56px
@@ -49,4 +41,20 @@ export default {
       box-sizing: border-box
       padding-top: 16px
 
+  main
+    margin-top: 20px
+</style>
+
+<style lang="sass">
+  body
+    margin: 0
+
+  html
+    font-family: Avenir, Helvetica, Arial, sans-serif
+    -webkit-font-smoothing: antialiased
+    -moz-osx-font-smoothing: grayscale
+    color: $blizzard-font-color
+    text-shadow: 0 0 1rem #009cff
+    background-color: $blizzard-background-color
+
 </style>