main components

front/src/components/room/RoomView.vue

@@ -0,0 +1,23 @@
+<template>
+    <div>
+        Room
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'RoomView',
+  components: {
+  }
+}
+</script>
+
+<style scoped>
+div {
+    flex-grow: 1;
+    background-color: #1D1D23;
+    color: white;
+}
+</style>
+

front/src/components/sidebar/Sidebar.vue

@@ -0,0 +1,33 @@
+<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;
+}
+
+/* todo setup max size */
+
+</style>

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

@@ -0,0 +1,40 @@
+<template>
+    <div id="main">
+        <div id="userMenu">
+        
+        </div>
+        <span class="divider"></span>
+        <!-- <h5>Accounts: </h5> -->
+        <span class="divider"></span>
+        <!-- <h5>Folders: </h5> -->
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Folders',
+  components: {
+  }
+}
+</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/components/sidebar/users/User.vue

@@ -0,0 +1,76 @@
+<template>
+    <div id="main">
+        <BaseAvatar url="vue.png"/>
+        <div id="content">
+            <div id="sender">{{ sender }}</div>
+            <div id="object">{{ object }}</div>
+        </div>
+    </div>
+    <ThreadList />
+    <div>
+    </div>
+</template>
+
+<script>
+import BaseAvatar from '../../views/avatars/BaseAvatar.vue'
+import ThreadList from './threads/ThreadList.vue'
+
+export default {
+  name: 'User',
+  props: {
+    sender: String,
+    object: String
+  },
+  components: {
+    BaseAvatar,
+    ThreadList
+  }
+}
+</script>
+
+<style scoped>
+#main {
+    box-sizing: border-box;
+    contain: content;
+    display: flex;
+    margin-bottom: 4px;
+    margin: 4px;
+    padding: 4px;
+}
+
+#main: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/components/sidebar/users/Users.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+      <User sender="Clemence" object="Proident sunt voluptate enim nisi duis fugiat veniam consequat do irure irure irure id. "/>
+    </div>
+</template>
+
+<script>
+import User from './User'
+
+export default {
+  name: 'Users',
+  props: {
+
+  },
+  components: {
+    User
+  }
+}
+</script>
+
+<style scoped>
+div {
+  display: flex;
+  flex-direction: column;
+  background-color: #24242B;
+}
+
+</style>

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

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

front/src/components/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>