feat(page): added /counter page

components/PageWithHeader.vue

@@ -22,6 +22,9 @@ export default class PageWithHeader extends Vue {
 .pwh {
   background-color: rgb(245 245 247);
   margin: -12px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 
   .pwh-header {
     color: #ffffff;
@@ -32,7 +35,11 @@ export default class PageWithHeader extends Vue {
   }
 
   .pwh-content {
+    flex-grow: 1;
     padding: 26px;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
   }
 }
 </style>

layouts/default.vue

@@ -139,22 +139,28 @@
         </div>
 
         <v-list>
-          <v-list-item
-            v-for="(item, i) in navigation"
-            :key="i"
-            :to="item.to"
-            link
-            router
-            exact
-          >
-            <v-list-item-action>
-              <v-icon>{{ item.icon }}</v-icon>
-            </v-list-item-action>
+          <div v-for="(section, i) in navigation" :key="i">
+            <v-subheader v-if="section.title">
+              {{ section.title }}
+            </v-subheader>
 
-            <v-list-item-content>
-              <v-list-item-title>{{ item.text }}</v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
+            <v-list-item
+              v-for="(item, j) in section.items"
+              :key="j"
+              :to="item.to"
+              link
+              router
+              exact
+            >
+              <v-list-item-action>
+                <v-icon>{{ item.icon }}</v-icon>
+              </v-list-item-action>
+
+              <v-list-item-content>
+                <v-list-item-title>{{ item.text }}</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+          </div>
         </v-list>
 
         <v-footer absolute padless class="custom-footer">
@@ -193,12 +199,11 @@
 
 <script lang="ts">
 import {Component, Vue} from 'nuxt-property-decorator'
-import {mdiHeart, mdiHome, mdiInformation, mdiShape} from '@mdi/js'
+import {mdiCounter, mdiHeart, mdiHome, mdiInformation, mdiShape} from '@mdi/js'
 import {version} from '~/package.json'
 
 @Component
 export default class Default extends Vue {
-  drawer = false
   appVersion = 'v' + version
   commitSHA = process.env.gitCommitSHA
   icons = {
@@ -207,21 +212,44 @@ export default class Default extends Vue {
 
   navigation = [
     {
-      text: 'Home',
-      icon: mdiHome,
-      to: '/'
-    },
-    {
-      text: 'Les catoch\'',
-      icon: mdiShape,
-      to: '/categories'
+      title: false,
+      items: [
+        {
+          text: 'Home',
+          icon: mdiHome,
+          to: '/'
+        },
+        {
+          text: 'Les catoch\'',
+          icon: mdiShape,
+          to: '/categories'
+        },
+        {
+          text: 'A propos',
+          icon: mdiInformation,
+          to: '/about'
+        }
+      ]
     },
     {
-      text: 'A propos',
-      icon: mdiInformation,
-      to: '/about'
+      title: 'Divers',
+      items: [
+        {
+          text: 'Counter',
+          icon: mdiCounter,
+          to: '/counter'
+        }
+      ]
     }
   ]
+
+  get drawer() {
+    return this.$store.state.sidenav.open
+  }
+
+  set drawer(value: boolean) {
+    this.$store.commit('sidenav/set', value)
+  }
 }
 </script>
 

pages/counter.vue

@@ -0,0 +1,103 @@
+<template>
+  <PageWithHeader>
+    <template slot="header">
+      <v-row no-gutters justify="center" align="center">
+        <v-btn icon dark large @click="$store.commit('sidenav/open')">
+          <v-icon large>
+            {{ icons.mdiMenu }}
+          </v-icon>
+        </v-btn>
+        <v-spacer />
+        <h1 class="text-center">
+          Compteur
+        </h1>
+        <v-spacer />
+        <v-btn icon dark large @click="count = 0">
+          <v-icon large>
+            {{ icons.mdiRefresh }}
+          </v-icon>
+        </v-btn>
+      </v-row>
+    </template>
+
+    <template slot="content">
+      <div class="count">
+        {{ count }}
+      </div>
+      <v-spacer />
+      <div class="btn-wrapper">
+        <v-btn block class="btn btn-increment" @click="increment">
+          +1
+        </v-btn>
+        <v-btn block class="btn btn-decrement" @click="decrement">
+          -1
+        </v-btn>
+      </div>
+    </template>
+  </PageWithHeader>
+</template>
+
+<script lang="ts">
+import {Component, Vue, Watch} from 'nuxt-property-decorator'
+import {mdiRefresh, mdiMenu} from '@mdi/js'
+import PageWithHeader from '~/components/PageWithHeader.vue'
+
+@Component({components: {PageWithHeader}})
+export default class Counter extends Vue {
+  count = 0
+  icons = {
+    mdiRefresh,
+    mdiMenu
+  }
+
+  created() {
+    if (process.browser) {
+      this.count = localStorage.count ?? 0
+    }
+  }
+
+  increment() {
+    this.count++
+    this.vibrate()
+  }
+
+  decrement() {
+    this.count--
+    this.vibrate()
+  }
+
+  vibrate() {
+    window?.navigator?.vibrate?.(200)
+  }
+
+  @Watch('count')
+  storeValue() {
+    localStorage.count = this.count
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.count {
+  text-align: center;
+  margin: 40px 0 0;
+  font-size: 100px;
+}
+
+.btn-wrapper {
+  .btn {
+    background-color: #ffffff;
+    font-size: 25px;
+    color: #3c3c3c;
+
+    &-increment {
+      margin-bottom: 16px;
+      height: 30vh !important;
+    }
+
+    &-decrement {
+      height: 50px !important;
+    }
+  }
+}
+</style>

store/sidenav.ts

@@ -0,0 +1,18 @@
+export const state = () => ({
+  open: false
+})
+
+export const mutations = {
+  toggle(state: {open: boolean}) {
+    state.open = !state.open
+  },
+  open(state: {open: boolean}) {
+    state.open = true
+  },
+  close(state: {open: boolean}) {
+    state.open = false
+  },
+  set(state: {open: boolean}, value:boolean) {
+    state.open = value
+  }
+}