[added] side-menu + works with dynamic room buffer

public_html/index.html

@@ -14,6 +14,7 @@
 			<link type='text/css' rel='stylesheet' href='./css/global.css'>
 			<link type='text/css' rel='stylesheet' href='./css/menu.css'>
 			<link type='text/css' rel='stylesheet' href='./css/dialog.css'>
+			<link type='text/css' rel='stylesheet' href='./css/side-menu.css'>
 			<link type='text/css' rel='stylesheet' href='./css/container.css'>
 			<link type='text/css' rel='stylesheet' href='./css/pop-up.css'>
 

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

webpack/scss/constants.scss

@@ -1,9 +1,10 @@
 
 /* (1) Dimensions */
-$menu-width:    4.3em;
+$menu-width:      4.3em;
-$dialog-width:  15.2em;
+$dialog-width:    15.2em;
-$header-height: 3em;
+$header-height:   3em;
-$input-height:  5em;
+$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

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;

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;
+		}
+	}
+
+}

webpack/vue/auth/side-menu.vue

@@ -0,0 +1,26 @@
+<template>
+
+
+
+	<div class='side-menu'>
+
+		<div class='user' v-for='user of gs.content.cbuf.users'
+			:data-online='gs.content.rbuf.members.indexOf(user.uid) > -1 ?1:0'>
+			<div class='icon' :style='`background-image: url("https://picsum.photos/150/?random&nonce=${user.uid}");`'></div>
+			<div class='username'>{{ user.username }}</div>
+		</div>
+
+	</div>
+
+
+
+</template><script>
+export default {
+
+	name: 'side-menu-',
+
+	data(){ return { gs: gs.get }; }
+
+}
+
+</script>

webpack/vue/auth/wrapper.vue

@@ -13,6 +13,13 @@
 		<!-- Container -->
 		<router-view></router-view>
 
+		<!-- Side menu (ONLINE/OFFLINE) -->
+		<side-menu-comp></side-menu-comp>
+
+
+
+
+
 		<!-- Pop-up Filter Background -->
 		<div id='popup-filter-background' v-show='gs.popup.filter' @click='gs.popup.hide()'></div>
 
@@ -151,8 +158,9 @@
 
 </template><script>
 
-	import menu_vue   from './menu.vue'
+	import menu_vue     from './menu.vue'
-	import dialog_vue from './dialog.vue'
+	import dialog_vue   from './dialog.vue'
+	import sidemenu_vue from './side-menu.vue'
 
 	export default {
 
@@ -161,8 +169,9 @@
 		data(){ return { gs: gs.get }; },
 
 		components: {
-			'MenuComp':   menu_vue,
+			'MenuComp':     menu_vue,
-			'DialogComp': dialog_vue
+			'DialogComp':   dialog_vue,
+			'SideMenuComp': sidemenu_vue
 		}
 
 	}