diff --git a/public_html/index.html b/public_html/index.html
index b1d1499..50b42b6 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -14,6 +14,7 @@
+
diff --git a/webpack/lib/room-controller.js b/webpack/lib/room-controller.js
index 9df7f3b..1d97654 100644
--- a/webpack/lib/room-controller.js
+++ b/webpack/lib/room-controller.js
@@ -118,7 +118,8 @@ export default class RoomController{
id: r.rid,
name: r.name,
type: r.type,
- messages: r.messages
+ messages: r.messages,
+ members: r.members
});
// {7} redirect if first element
diff --git a/webpack/scss/constants.scss b/webpack/scss/constants.scss
index 01b3a90..5ee3e03 100644
--- a/webpack/scss/constants.scss
+++ b/webpack/scss/constants.scss
@@ -1,9 +1,10 @@
/* (1) Dimensions */
-$menu-width: 4.3em;
-$dialog-width: 15.2em;
-$header-height: 3em;
-$input-height: 5em;
+$menu-width: 4.3em;
+$dialog-width: 15.2em;
+$header-height: 3em;
+$input-height: 5em;
+$side-menu-width: 14em;
/* (2) Main colors */
$menu-bg: #202225;
@@ -13,6 +14,7 @@ $container-bg: #36393e;
$header-bg: #36393f;
$main: #7289da;
$input-bg: #36393f;
+$side-menu-bg: #2f3136;
/* (1) Header specific
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index f8492c0..e0fa869 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -61,7 +61,7 @@
position: absolute;
top: calc( #{$header-height} + #{$bb-offset} );
left: 0;
- width: 100%;
+ width: calc( 100% - #{$side-menu-width} );
height: calc( 100% - #{$header-height} - #{$bb-offset} );
background-color: $input-bg;
diff --git a/webpack/scss/side-menu.scss b/webpack/scss/side-menu.scss
new file mode 100644
index 0000000..b251705
--- /dev/null
+++ b/webpack/scss/side-menu.scss
@@ -0,0 +1,95 @@
+@import 'constants';
+
+#WRAPPER > div.side-menu{
+
+ display: flex;
+ position: absolute;
+ top: $header-height;
+ left: calc( 100% - #{$side-menu-width} );
+ width: $side-menu-width;
+ height: calc( 100% - #{$header-height} );
+
+ background-color: $side-menu-bg;
+
+ flex-flow: row wrap;
+ justify-content: flex-start;
+ align-items: center;
+ align-content: flex-start;
+
+ & > div.user{
+
+ flex: 80%;
+
+ display: flex;
+ position: relative;
+
+ margin: .2em 1em;
+ padding: .5em 1em;
+
+ border-radius: 5px;
+
+ background-color: transparent;
+
+ flex-flow: row nowrap;
+ justify-content: flex-start;
+ align-items: center;
+
+ transition: background-color .1s ease-in-out;
+
+ overflow: hidden;
+
+ cursor: pointer;
+
+ &:hover{ background-color: #36393f; }
+
+ & > div.icon{
+
+ display: block;
+ position: relative;
+ width: 2em;
+ height: 2em;
+
+ margin-right: .5em;
+
+ border-radius: 50% / 50%;
+
+ background-color: #fff;
+
+ cursor: pointer;
+
+ transition: opacity .2s ease-in-out;
+ background: url() center center no-repeat;
+ background-size: cover;
+
+
+ // icon "pastille"
+ &:after{
+ content: '';
+
+ display: block;
+ position: absolute;
+ top: calc( 100% - .9em + .1em );
+ left: calc( 100% - .9em + .1em );
+ width: .7em;
+ height: .7em;
+
+ border-radius: 50% / 50%;
+ border: .2em solid #{$side-menu-bg};
+
+ background-color: #eb7719;
+
+ transition: background-color .1s ease-in-out;
+ }
+
+ }
+ // icon border invisible even on hover
+ &:hover > div.icon:after{
+ border-color: #36393f;
+ }
+
+ &[data-online='1'] > div.icon:after{
+ background-color: #19eb69;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/webpack/vue/auth/side-menu.vue b/webpack/vue/auth/side-menu.vue
new file mode 100644
index 0000000..2064de5
--- /dev/null
+++ b/webpack/vue/auth/side-menu.vue
@@ -0,0 +1,26 @@
+
+
+
+
+