add exemple routing and store

front/src/views/About.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>About</h1>
+</template>

front/src/views/Home.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>home</h1>
+</template>

front/src/views/avatars/BaseAvatar.vue

@@ -0,0 +1,20 @@
+<template>
+    <img :src="require('../../assets/'+ url)" >
+</template>
+
+<script>
+
+export default {
+  name: 'BaseAvatar',
+  props: {
+    url: String
+  }
+}
+</script>
+
+<style scoped>
+img {
+    width: 32px;
+    height: 32px;
+}
+</style>

front/src/views/room/Header.vue

@@ -0,0 +1,26 @@
+<template>
+    <div id="main">
+        header -> sender
+                    -> thread
+                    -> single click open side
+                    -> double click open plain
+        is thread
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Header',
+  components: {
+  }
+}
+</script>
+
+<style scoped>
+#main {
+    background-color: blue;
+    width: 100%;
+    height: 51px;
+}
+</style>

front/src/views/room/RoomView.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <Header></Header>
+        <div>
+           
+            Room
+            is thread
+        </div>
+
+    </div>
+</template>
+
+<script>
+import Header from './Header.vue'
+
+export default {
+  name: 'RoomView',
+  components: {
+    Header
+  }
+}
+</script>
+
+<style scoped>
+div {
+    background-color: #1D1D23;
+    color: white;
+    width: 100%;
+}
+</style>
+

front/src/views/sidebar/Sidebar.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <Folders />
+        <Users id="users"/>
+    </div>
+</template>
+
+<script>
+import Folders from './folders/Folders';
+import Users from './users/Users.vue';
+
+export default {
+  name: 'Sidebar',
+  components: {
+    Folders,
+    Users,
+  }
+}
+</script>
+
+<style scoped>
+div {
+  display: flex;
+  height: 100%;
+}
+
+#users {
+  max-width: 300px;
+  min-width: 250px;
+}
+
+/* todo setup max size */
+
+</style>

front/src/views/sidebar/folders/Account.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>

front/src/views/sidebar/folders/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/folders/Folder.vue

@@ -0,0 +1,35 @@
+<template>
+    <div id="main" @click="setActiveMailbox(data.id)">
+        {{ data.mail }}
+    </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+
+export default {
+  name: 'Folder',
+  components: {
+  },
+  props: {
+    data: {mail: String, id: Number}
+  },
+  methods: {
+    ...mapMutations(['setActiveMailbox'])
+  }
+}
+</script>
+
+<style scoped>
+#main {
+  max-width: 32px;
+  white-space: normal;
+  word-wrap: break-word;
+  padding: 0px;
+  cursor: pointer;
+}
+
+div:hover {
+  background-color: aqua !important;
+}
+</style>

front/src/views/sidebar/folders/Folders.vue

@@ -0,0 +1,47 @@
+<template>
+    <div id="main">
+        <div id="userMenu">
+          <!-- deconnect -->
+        </div>
+        <span class="divider"></span>
+        <Folder :data="{'id': -1, 'mail': 'all'}"/>
+        <Folder v-for="(mailbox, index) in mailboxes" :key="index" :data="mailbox"/>
+        <span class="divider"></span>
+        <!-- <h5>Folders: </h5> -->
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Folder from './Folder.vue'
+
+export default {
+  name: 'Folders',
+  components: {
+    Folder
+  },
+  computed: {
+    ...mapState(['mailboxes'])
+  }
+}
+</script>
+
+<style scoped>
+#main {
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+    background-color: #2A2A33;
+}
+
+#userMenu {
+  width: 32px;
+  height: 32px;
+  background-color: yellow !important;
+
+}
+.divider {
+    border-top: 1px solid #bbb;
+    margin: 3px 0;
+}
+</style>

front/src/views/sidebar/users/User.vue

@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <div id="user">
+            <BaseAvatar url="vue.png"/>
+            <div id="content">
+                <div id="sender">{{ sender }}</div>
+                <div id="object">{{ object }}</div>
+            </div>
+        </div>
+        <ThreadList />
+    </div>
+</template>
+
+<script>
+import BaseAvatar from '../../avatars/BaseAvatar.vue'
+import ThreadList from './threads/ThreadList.vue'
+
+export default {
+  name: 'User',
+  props: {
+    sender: String,
+    object: String
+  },
+  components: {
+    BaseAvatar,
+    ThreadList
+  }
+}
+</script>
+
+<style scoped>
+#user {
+    box-sizing: border-box;
+    contain: content;
+    display: flex;
+    margin-bottom: 4px;
+    margin: 4px;
+    padding: 4px;
+    cursor: pointer;
+}
+
+#user:hover {
+    background-color: #41474f;;
+    border-radius: 8px;
+}
+
+#content {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    height: 32px;
+    justify-content: center;
+    margin-left: 8px;
+    min-width: 0;
+}
+
+#sender {
+    font-size: 1.4rem;
+    line-height: 1.8rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+    color: white;
+}
+
+#object {
+    color: #a9b2bc;
+    line-height: 1.8rem;
+    font-size: 1.3rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
+}
+
+</style>

front/src/views/sidebar/users/Users.vue

@@ -0,0 +1,32 @@
+<template>
+    <div>
+      <User v-for="(room, index) in folderRooms()" :key="index" :sender="room.users" :object="room.object" />
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import User from './User'
+
+export default {
+  name: 'Users',
+  props: {
+
+  },
+  components: {
+    User
+  },
+  computed: {
+    ...mapGetters(['folderRooms'])
+  }
+}
+</script>
+
+<style scoped>
+div {
+  display: flex;
+  flex-direction: column;
+  background-color: #24242B;
+}
+
+</style>

front/src/views/sidebar/users/threads/ThreadList.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ThreadList',
+  props: {
+  },
+ 
+}
+</script>
+
+<style scoped>
+</style>