New Client: working navigation (#8131)

* initial work

* new client: working navigation and tasks showing up

* finish header menu and add avatar component

* fix sprites in new client

* initial header version

* initial styling for top menu

* more progress on the header menu

* almost complete menu and avatar

* correctly apply active class for /social and /help

* fix header colors and simplify css

* switch from Roboto to native fonts

* remove small avatar and add viewport

* fixes

* fix user menu with and progress bars

* fix avatar rendeting

* move bars colors to theme

* add site overrides

* fix tests

* shrinkwrap

* fix sprites path

* another try at fixing the sprites path

* another try at fixing the sprites path

website/client/components/userTasks.vue

@@ -0,0 +1,28 @@
+<template lang="pug">
+.row
+  .sixteen.wide.column
+      p You have {{tasksCount}} tasks!
+  .four.wide.column(v-for="taskType in tasksTypes")
+    h3 {{taskType}}s ()
+    ul
+      li(v-for="task in tasks", v-if="task.type === taskType", :key="task.id")
+        span {{task.text}}
+</template>
+
+<script>
+import { mapState } from '../store';
+
+export default {
+  data () {
+    return {
+      tasksTypes: ['habit', 'daily', 'todo', 'reward'],
+    };
+  },
+  computed: {
+    ...mapState(['tasks']),
+    ...mapState({
+      tasksCount: (state) => state.tasks.length,
+    }),
+  },
+};
+</script>