Now can toggle the menu size (gstore.func.toggleMenuSize) @click on header icon

public_html/css/header.css

@@ -15,6 +15,12 @@
 	/* background-color: rgba(0,0,0,.7); */
 
 	color: #fff;
+
+	overflow: hidden;
+
+	cursor: pointer;
+
+	transition: all .2s ease-in-out;
 }
 
 /* Header Icon > Title */
@@ -136,4 +142,15 @@
 #header-notif .hnotif[data-count='']:before,
 #header-notif .hnotif[data-count='0']:before{
 	display: none;
+}
+
+
+
+
+/****************************/
+
+/* Minified Header */
+#WRAPPER.min #HEADER #header-icon{
+	width: calc( 3.5em - 3em );
+	background-position: center center;
 }

public_html/css/layout.css

@@ -68,4 +68,6 @@ body{
 	flex-direction: column;
 	justify-content: flex-start;
 	flex-wrap: nowrap;
+
+	transition: width .2s ease-in-out;
 }

public_html/css/menu.css

@@ -34,8 +34,8 @@
 
 	cursor: pointer;
 
-	transition: background-color .2s ease-in-out,
-				color 			 .2s ease-in-out;
+	transition: background-color .1s ease-in-out,
+				color 	         .2s ease-in-out;
 }
 
 #MENU .menu-item:hover,
@@ -47,3 +47,14 @@
 
 
 /****************************/
+
+/* Minified Menu */
+#WRAPPER.min #MENU{
+	width: calc( 3.5em - 1px );
+}
+
+
+#WRAPPER.min #MENU .menu-item-wrapper .menu-item{
+	background-position: center center;
+	background-size: 50%;
+}

view/main.js

@@ -33,7 +33,6 @@ new Vue({
 })
 
 
-
 /* (3) Set WebSocket channels
 ---------------------------------------------------------*/
 /* (1) Connection channel */
@@ -77,4 +76,6 @@ window.wsc_chat = window.wsc.channel('chat').listen(function(msg, err){
 	// {3} Manage notification //
 	window.gstore.data.notif[1].data = window.gstore.data.notif[1].data.concat( msg.msg );
 
-}).send({name: window._SERVER.session.name});
+}).send({name: window._SERVER.session.name});
+
+

view/vue-config.js

@@ -29,4 +29,11 @@ window.gstore.add('menu_item', {
 		icon: 'messages'
 	}
 });
-window.gstore.add('menu_item_active', 'dashboard');
+window.gstore.add('menu_item_active', 'dashboard');
+window.gstore.add('min_menu', true);
+
+
+// Functions
+window.gstore.add('func', {
+	toggleMenuSize: function(){ window.gstore.data.min_menu=!window.gstore.data.min_menu; }
+});

view/vue/header.vue

@@ -1,6 +1,6 @@
 <template>
 
-	<div id='HEADER'>
+	<div id='HEADER' @click='gstore.func.toggleMenuSize'>
 
 		<!-- Header Icon+Title -->
 		<div id='header-icon'>

view/vue/menu.vue

@@ -4,7 +4,9 @@
 
 		<div v-for='(item, index) in gstore.menu_item' class='menu-item-wrapper'>
 
-			<div :class="(index == gstore.menu_item_active) ? 'menu-item active' : 'menu-item'" @click='navigate_menu(index)' :style='"background-image: url(/image/menu/" + item.icon + ".svg@aaaaaa"'>{{ item.label }}</div>
+			<div :class="(index == gstore.menu_item_active) ? 'menu-item active' : 'menu-item'" @click='navigate_menu(index)' :style='"background-image: url(/image/menu/" + item.icon + ".svg@aaaaaa"'>
+			<span v-show='!gstore.min_menu'>{{ item.label }}</span>
+			</div>
 
 		</div>
 

view/vue/wrapper.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="WRAPPER">
+	<div id="WRAPPER" :class='gstore.min_menu ? "min" : ""'>
 
 		<!-- Header -->
 		<header-comp></header-comp>
@@ -25,7 +25,8 @@ import menu_vue   from './menu.vue';
 export default {
 	name: 'wrapper',
 	data(){ return {
-		msg: 'Main vue component'
+		msg: 'Main vue component',
+		gstore: window.gstore.data
 	}; },
 	components: {
 		'HeaderComp': header_vue,