[webpack.header][scss.header] created default version management (only template) for header

webpack/scss/constants.scss

@@ -32,7 +32,7 @@ $menu-width: #{$menu-item-width + 1em};
 
 // Header
 $header-bg: #fff;
-$header-height: 3em;
+$header-height: 4em;
 
 
 $c404-bubble-width: 40vh;

webpack/scss/header.scss

@@ -14,8 +14,121 @@
 
 	// flex properties
 	flex-direction: row;
-	justify-content: space-around;
+	justify-content: space-between;
 	align-items: center;
 
 	z-index: 150;
+
+
+	/* (1) Version management */
+	& > div.versions{
+
+		/* (1.1) Version status */
+		& > div.current{
+			display: block;
+			position: relative;
+
+			margin-left: 1em;
+
+			padding: .5em 1em;
+
+			padding-left: 2em;
+
+			border: 1px solid #ddd;
+			border-radius: 3px;
+			box-shadow: 0 2px 2px #fff;
+
+			transition: box-shadow .2s ease-in-out;
+
+			cursor: pointer;
+
+			// hover animation
+			&:hover{ box-shadow: 0 2px 2px darken(#fff,10%); }
+
+			// color state
+			&:before{
+				content: '';
+
+				display: block;
+				position: absolute;
+					top: calc( 50% - .7em/2 );
+					left: calc( 1em/2 + .7em/2 );
+					width: .7em;
+					height: .7em;
+
+				border-radius: 50%;
+
+				background-color: $form-invalid-color;
+			}
+
+			&[data-id='0']:before{
+				background-color: $form-valid-color;
+			}
+
+
+		}
+
+		/* (1.2) Version dialog (to switch to another) */
+		& > div.version-dialog{
+			display: block;
+			position: absolute;
+				top: #{$header-height + .5em};
+				left: 1em;
+
+			// padding: 1em .5em;
+
+			border: 1px solid #ddd;
+			border-radius: 3px;
+
+			background-color: #fff;
+
+			box-shadow: 0 2px 2px #ddd;
+
+			overflow: hidden;
+
+
+			/* (1.2.1) version items */
+			& > span{
+				display: block;
+				position: relative;
+
+				padding: .5em 1em;
+				padding-left: 2em;
+
+				background-color: #fff;
+
+				transition: background-color .2s ease-in-out;
+
+				cursor: pointer;
+
+				// hover animation
+				&:hover{ background-color: darken(#fff, 5%); }
+
+				// color state
+				&:before{
+					content: '';
+
+					display: block;
+					position: absolute;
+						top: calc( 50% - .7em/2 );
+						left: calc( 1em/2 + .7em/2 );
+						width: .7em;
+						height: .7em;
+
+					border-radius: 50%;
+
+					background-color: $form-invalid-color;
+				}
+
+				&[data-id='0']:before{
+					background-color: $form-valid-color;
+				}
+
+			}
+		}
+
+	}
+
+
+
 }

webpack/vue/header.vue

@@ -2,10 +2,17 @@
 
 	<div id='HEADER'>
 
-		<!-- Header Icon+Title -->
+		<!-- Version management -->
-		<div id='header-icon'>
+		<div class='versions'>
-			<div class='header-title'>{{ gstore.header_title }}</div>
+
+			<div class='current' @click='version_dialog=!version_dialog' :data-id='current_version_id'>{{ versions[current_version_id].date || 'version à jour' }}</div>
+			<div class='version-dialog' v-show='version_dialog'>
+				<span data-id='0' @click='version_dialog=false; current_version_id=0'>version à jour</span>
+				<span v-for='v in (1,versions.length-1)' @click='version_dialog=false; current_version_id=v' :data-id='v'>{{ versions[v].date }}</span>
+			</div>
+
 		</div>
+			<!-- <div class='header-title'>{{ gstore.header_title }}</div> -->
 
 	</div>
 
@@ -18,7 +25,15 @@ export default {
 	data(){
 	    return {
 	        gstore:			gstore.get,
-			is_connected:	_SERVER.session.connected
+			is_connected:	_SERVER.session.connected,
+
+			version_dialog: false,
+			current_version_id: 0,
+			versions: [
+				{ date: null         },
+				{ date: '01-02-2017' },
+				{ date: '23-03-2017' }
+			]
 	    };
 	}
 }