Implements #14

  * Tabs properly display active state
  * Tabs properly display disabled state
  * Initial state is set based on configured & signed in states

client/components/indieHeader.vue

 <template>
   <header>
     <div class='profile' :style='headerStyles'>
+
       <!-- Profile image -->
       <img class='profile-image' v-if='profileImage' :src='profileImage' alt='Profile image'>
 
@@ -15,24 +16,79 @@
     <!-- Main navigation -->
     <nav class='tabs is-centered' style='background-color: white;'>
       <ul>
-        <li class='is-active'><nuxt-link to='/'>Me</nuxt-link></li>
-        <li><nuxt-link to='/everyone' :disabled='!configured'>Everyone</nuxt-link></li>
-        <li><nuxt-link to='/search'>Search</nuxt-link></li>
-        <li><nuxt-link to='/settings'>Settings</nuxt-link></li>
-        <li><nuxt-link to='/more'>…</nuxt-link></li>
+        <li :class='classesForRoute("/")'>
+          <nuxt-link to='/'>Me</nuxt-link>
+        </li>
+        <li :class='classesForRoute("/everyone")'>
+          <nuxt-link to='/everyone'>Everyone</nuxt-link>
+        </li>
+        <li :class='classesForRoute("/search")'>
+          <nuxt-link to='/search'>Search</nuxt-link>
+        </li>
+        <li :class='classesForRoute("/settings")' v-show='signedIn || !configured'>
+          <nuxt-link to='/settings'>Settings</nuxt-link>
+        </li>
+        <li :class='classesForRoute("/more")' v-show='signedIn || !configured'>
+          <nuxt-link to='/more'>…</nuxt-link>
+        </li>
       </ul>
     </nav>
+
   </header>
 </template>
 
 <script>
+
 export default {
+  mounted () {
+    // Set the route to Settings if the site is not configured.
+    if (!this.configured) {
+      this.$router.push('settings')
+      return
+    }
+
+    //
+    // Check that a path that requires person to be signed in isn’t
+    // accessed. Note: this is a stopgap. We should be authenticating
+    // on the server not here.
+    //
+    // TODO: Issue #22
+    // https://source.ind.ie/indienet/site/issues/22
+    //
+    if (!this.signedIn) {
+      const route = this.$router.history.current.path
+      console.log(route)
+      if (route === '/settings' || route === '/more') {
+        this.$router.push('/')
+      }
+      return
+    }
+  },
+  data () {
+    return {
+      currentRoute: null
+    }
+  },
   computed: {
+    disablingCriteriaForRoutes () {
+      return {
+        '/': !this.configured,                // i.e., always enabled
+        '/everyone': !this.configured,
+        '/search': !this.configured,
+        '/settings': false,
+        '/more': !this.configured
+      }
+    },
+
+    // Vuex Store
+
     name () { return this.$store.state.name },
     bio () { return this.$store.state.bio },
     profileImage () { return this.$store.state.profileImage },
     signedIn () { return this.$store.state.signedIn },
     configured () { return this.$store.state.configured },
+
+    // Live header theming.
     headerStyles () {
       let styles = {
         backgroundColor: this.$store.state.backgroundColour
@@ -43,7 +99,28 @@ export default {
       return styles
     }
   },
+  watch: {
+    $route: function () {
+      console.log(`Header: Route changed to ${this.$route.path}.`)
+    }
+  },
   methods: {
+    // Returns the correct tab class object for the passed route based on the
+    // current route of the page that the header is rendering in.
+    classesForRoute (route) {
+      const classObject = {}
+
+      // Is this the active tab?
+      if (route === this.$route.path) classObject['is-active'] = true
+
+      // Is this tab disabled?
+      const disableTab = this.disablingCriteriaForRoutes[route]
+      if (disableTab) classObject['disabled'] = true
+
+      return classObject
+    },
+
+    // Signals that the follow button has been pressed.
     followButtonPress () {
       this.$emit('followButtonPress')
     }
@@ -129,4 +206,18 @@ nav.tabs {
 .tabs li {
   margin-bottom: 0;
 }
+
+/*
+  We cannot set both cursor: not-allowed and pointer-events: none on the same
+  element (the cursor does not show). So, instead, we set the cursor on the
+  parent li and turn off pointer events to disable the link for disabled tabs.
+*/
+.tabs li.disabled {
+  cursor:not-allowed;
+}
+
+.tabs li.disabled > a {
+  color: lightgray;
+  pointer-events:none;
+}
 </style>

client/store/index.js

@@ -4,7 +4,7 @@ const siteConfiguration = require('../assets/data.json')
 
 // Mock: sign-in state
 siteConfiguration.signedIn = true
-siteConfiguration.configured = true
+siteConfiguration.configured = false
 
 export const state = () => (siteConfiguration)