apply difference between mailbox and account

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

@@ -0,0 +1,48 @@
+<template>
+    <div class="container" @click="setactiveAccount(data.id)" :class="activeAccount == data.id && 'active'">
+        {{ data.email }}
+    </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from 'vuex'
+
+export default {
+  name: 'Account',
+  components: {
+  },
+  props: {
+    data: {mail: String, id: Number}
+  },
+  computed: {
+    ...mapState(['activeAccount'])
+  },
+  methods: {
+    ...mapMutations(['setactiveAccount'])
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  max-width: 32px;
+  white-space: normal;
+  word-wrap: break-word;
+  padding: 5px;
+  margin: 1px 0;
+  cursor: pointer;
+  border-radius: 8px;
+  border: 2px solid transparent;
+}
+
+.container:hover {
+  background-color: aqua !important;
+}
+
+.active {
+  border: 2px solid white;
+  opacity: 0.9;
+}
+
+
+</style>

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>

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

@@ -0,0 +1,18 @@
+<template>
+    <div id="main">
+        jij
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'All',
+  components: {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,23 @@
+<template>
+    <div id="main">
+        <div id="userMenu">
+          <!-- deconnect -->
+        </div>
+        <span class="divider"></span>
+        <!-- <h5>Accounts: </h5> -->
+        <span class="divider"></span>
+        <!-- <h5>Folders: </h5> -->
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Account',
+  components: {
+  }
+}
+</script>
+
+<style scoped>
+</style>