added simple activity page

components/NavbarBrand.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="mx-auto navbar-brand py-0">
+    <img src="/img/icon.png" alt="Actifit" class="float-left mr-2" />
+    <div class="float-left d-none d-sm-block">
+      <h1 class="m-0 text-brand">Actifit Fitness Tracker</h1>
+      <h3 class="m-0 font-italic text-brand">Rewarding Fitness Activity</h3>
+    </div>
+  </div>
+</template>
+
+<style lang="sass">
+  .navbar-brand
+    img
+      width: 40px
+    h1
+      font-size: 14px
+    h3
+      font-size: 12px
+</style>

components/Report.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="col-6 col-sm-4 col-md-3 mb-4">
+    <div class="card p-2 report">
+      <a :href="'https://steemit.com' + report.url" target="_blank">
+        <h6 class="mb-0">{{ report.title }}</h6>
+        <small class="text-muted">{{ date }}</small>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['report'],
+    computed: {
+      date () {
+        let date = new Date(this.report.created)
+        let minutes = date.getMinutes();
+        return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' - ' + date.getHours() + ':' + (minutes < 10 ? '0' + minutes : minutes)
+      },
+    },
+    mounted () {
+      console.log(this.report)
+    }
+  }
+</script>
+
+<style lang="sass">
+  .report
+    height: 100%
+    a
+      color: #333
+      &:hover
+        text-decoration: none
+</style>

components/UserMenu.vue

@@ -4,16 +4,16 @@
       <li class="nav-item" v-if="!user">
         <a class="nav-link" :href="$steemconnect.getLoginURL()">Login</a>
       </li>
-      <li class="nav-item" v-if="user">
+      <li class="nav-item d-none d-sm-block" v-if="user">
         <span class="navbar-text py-0">Balance:<br><b>{{ formattedUserTokens }}</b></span>
       </li>
       <li class="nav-item dropdown" v-if="user">
         <a class="nav-link dropdown-toggle py-0" href="#" data-toggle="dropdown">
           <div class="user-avatar" :style="'background-image: url(https://steemitimages.com/u/' + user.account.name + '/avatar)'"></div>
         </a>
         <div class="dropdown-menu dropdown-menu-right">
-          <a class="dropdown-item" href="#" @click.prevent="$router.push('wallet')">Wallet</a>
-          <a class="dropdown-item" href="#">Activity</a>
+          <a class="dropdown-item" href="#" @click.prevent="$router.push('/wallet')">Wallet</a>
+          <a class="dropdown-item" href="#" @click.prevent="$router.push('/activity/' + user.account.name)">Activity</a>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="#" @click.prevent="$store.dispatch('logout')">Logout</a>
         </div>

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "nuxt": "^1.0.0",
+    "steem": "^0.7.1",
     "vue-scrollto": "^2.11.0",
     "vue-steemconnect": "0.0.4",
     "whatwg-fetch": "^2.0.4"

pages/activity/_username.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <nav class="navbar fixed-top navbar-expand navbar-light">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item">
+          <a class="nav-link" href="#" @click.prevent="$router.push('/')">
+            <i class="fas fa-arrow-left text-brand navbar-back"></i>
+          </a>
+        </li>
+      </ul>
+      <NavbarBrand />
+      <UserMenu />
+    </nav>
+
+    <div class="container pt-5 mt-5 pb-5">
+      <h2 class="text-center mb-5">Activity Reports</h2>
+      <div class="row">
+        <Report v-for="(report, index) in reports" :report="report" :key="index" />
+      </div>
+    </div>
+
+    <Footer />
+  </div>
+</template>
+
+<script>
+  import UserMenu from '~/components/UserMenu'
+  import NavbarBrand from '~/components/NavbarBrand'
+  import Report from '~/components/Report'
+  import Footer from '~/components/Footer'
+
+  import { mapGetters } from 'vuex'
+
+  export default {
+    components: {
+      UserMenu,
+      NavbarBrand,
+      Report,
+      Footer
+    },
+    computed: {
+      ...mapGetters(['reports'])
+    },
+    mounted () {
+      // login
+      this.$store.dispatch('login')
+
+      // fetch reports
+      this.$store.dispatch('fetchReports')
+    }
+  }
+</script>