apply difference between mailbox and account

front/src/views/sidebar/accounts/Accounts.vue

@@ -0,0 +1,58 @@
+<template>
+    <div id="main">
+      <div id="userMenu">
+        <!-- deconnect -->
+      </div>
+      <span class="divider"></span>
+      <Account v-for="(account, index) in accounts" :key="index" :data="account"/>
+      <span class="divider"></span>
+
+      <AddAccountModal />
+      
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Account from './Account'
+import AddAccountModal from '../../modals/AddAccountModal'
+import store from '@/store/store'
+
+export default {
+  name: 'Accounts',
+  components: {
+    Account,
+    AddAccountModal
+  },
+  computed: {
+    ...mapState(['accounts'])
+  },
+  created() {
+    store.dispatch('fetchAccounts');
+  }
+}
+
+</script>
+
+<style scoped>
+#main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 5px;
+    background-color: #2A2A33;
+    color: white;
+}
+
+#userMenu {
+  width: 32px;
+  height: 32px;
+  background-color: yellow !important;
+
+}
+.divider {
+    border-top: 1px solid #bbb;
+    margin: 5px 0;
+    width: 90%;
+}
+</style>