main components

front/package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -32,7 +33,7 @@
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
-    "rules": {}
+    "rules": {"vue/multi-word-component-names": "off"}
   },
   "browserslist": [
     "> 1%",

front/public/index.html

@@ -14,4 +14,18 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
+  <style>
+    :root {
+      font-size: 10px;
+    }
+    body {
+      position: fixed;
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      display: block;
+      font-family: Inter,Twemoji,Apple Color Emoji,Segoe UI Emoji,Arial,Helvetica,sans-serif,STIXGeneral,Noto Color Emoji;
+      font-size: 1.5rem;
+    }
+  </style>
 </html>

front/src/App.vue

@@ -1,23 +1,25 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
+  <Sidebar />
+  <RoomView />
 </template>
 
 <script>
+import Sidebar from './components/sidebar/Sidebar';
+import RoomView from './components/room/RoomView';
 
 export default {
   name: 'App',
   components: {
+    Sidebar,
+    RoomView
   }
 }
 </script>
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  display: flex;
-  -webkit-font-smoothing: antialiased;
+  height: 100%;
-  -moz-osx-font-smoothing: grayscale;
+  width: 100%;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

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>

front/src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import App from './App.vue'
 
 const routes = [
@@ -6,12 +7,12 @@ const routes = [
 //   { path: '/about', component: About },
 ]
 
-const router = VueRouter.createRouter({
+const router = createRouter({
-  history: VueRouter.createWebHashHistory(),
+  history: createWebHashHistory(),
   routes
 });
 
-const app = Vue.createApp({});
+const app = createApp({});
 app.use(router);
 
 app.mount('#app');