add Home view and ListGroupItem component to display main menu items

app/src/App.vue

@@ -14,7 +14,9 @@
             </b-navbar>
         </header>
 
+        <main>
             <router-view/>
+        </main>
 
         <footer>
             <nav>
@@ -34,6 +36,8 @@
 
 header {
     border-bottom: 1px solid #eee;
+    margin-top: 1rem;
+    margin-bottom: 2rem;
 
     .navbar {
         padding: 1rem;
@@ -56,6 +60,7 @@ footer {
     padding: 1rem 0;
     border-top: 1px solid #eee;
     font-size: 0.875rem;
+    margin-top: 2rem;
 
     li {
         &:not(:first-child) a::before {

app/src/components/ListGroupItem.vue

@@ -0,0 +1,41 @@
+<template>
+    <b-list-group-item v-bind:href="uri">
+        <span v-bind:class="'fa fa-fw fa-' + icon" aria-hidden="true"></span>
+        <h2><slot></slot></h2>
+        <span class="fa fa-fw fa-chevron-right ml-auto"></span>
+    </b-list-group-item>
+</template>
+
+<script>
+export default {
+    props: {
+        uri: String,
+        icon: String,
+    }
+}
+</script>
+
+<style lang="scss">
+    .list-group-item {
+        padding: 0;
+        display: flex;
+        align-items: center;
+    }
+    .list-group-item-action {
+        color: #333;
+    }
+    h2 {
+        font-size: 1.25rem;
+        font-weight: 400;
+        margin: 0;
+    }
+    span.fa {
+        font-size: 1.5rem;
+        width: 3rem;
+        line-height: 3rem;
+
+        &.fa-chevron-right {
+            font-size: 1rem;
+        }
+    }
+</style>

app/src/views/Home.vue

@@ -1,11 +1,37 @@
 <template>
     <div class="home">
-    <img alt="Yunohost logo" src="../assets/logo.png">
+        <b-list-group>
+            <list-group-item
+                v-for="item in menu"
+                v-bind:key="item.id"
+                v-bind:uri="item.uri"
+                v-bind:icon="item.icon"
+            >{{ $t(item.translation) }}</list-group-item>
+        </b-list-group>
     </div>
 </template>
 
 <script>
+import ListGroupItem from '@/components/ListGroupItem'
+
 export default {
     name: 'Home',
+    data: () => {
+        return {
+            menu: [
+                {id: 0, uri: '/users', icon: 'users', translation: 'users'},
+                {id: 1, uri: '/domains', icon: 'globe', translation: 'domains'},
+                {id: 2, uri: '/apps', icon: 'cubes', translation: 'applications'},
+                {id: 3, uri: '/update', icon: 'refresh', translation: 'system_update'},
+                {id: 4, uri: '/services', icon: 'cog', translation: 'services'},
+                {id: 5, uri: '/tools', icon: 'wrench', translation: 'tools'},
+                {id: 6, uri: '/diagnosis', icon: 'stethoscope', translation: 'diagnosis'},
+                {id: 7, uri: '/backup', icon: 'archive', translation: 'backup'},
+            ]
+        }
+    },
+    components: {
+        ListGroupItem
+    }
 }
 </script>