diff --git a/build/router/controller/svg.php b/build/router/controller/svg.php
new file mode 100644
index 0000000..ac308c1
--- /dev/null
+++ b/build/router/controller/svg.php
@@ -0,0 +1,60 @@
+ Calling URI
+ *
+ */
+ public function __construct($url){
+ $this->path = $url['path'];
+ $this->color = substr($url['color'], 1);
+ }
+
+
+ /* Colorate svg
+ *
+ */
+ public function color(){
+ header('Content-Type: image/svg+xml');
+
+ // On crée la partie ajoutée
+ $stylesheet = "\n";
+
+ // On récupère le fichier
+ $file = file_get_contents(__PUBLIC__.'/'.$this->path);
+
+ // On ajoute le style
+ $file = str_replace('', $stylesheet, $file);
+
+ echo $file;
+
+ }
+
+ /* POST-CALL
+ *
+ */
+ public function __destruct(){
+
+ }
+
+
+
+ }
diff --git a/config/routes.json b/config/routes.json
index 4351cc3..43f90d5 100644
--- a/config/routes.json
+++ b/config/routes.json
@@ -20,6 +20,15 @@
}
},
+ "/{path}{color}": {
+ "methods": ["GET"],
+ "controller": "svg:color",
+ "arguments": {
+ "path": ".+\\.svg",
+ "color": "@[a-fA-F0-9]{6}"
+ }
+ },
+
"/{page}/{uri}": {
"methods": ["GET"],
"controller": "page:load",
diff --git a/public_html/asset/svg/fiche.svg b/public_html/asset/svg/fiche.svg
new file mode 100644
index 0000000..6a06f61
--- /dev/null
+++ b/public_html/asset/svg/fiche.svg
@@ -0,0 +1,53 @@
+
+
diff --git a/public_html/asset/svg/home.svg b/public_html/asset/svg/home.svg
new file mode 100644
index 0000000..0005696
--- /dev/null
+++ b/public_html/asset/svg/home.svg
@@ -0,0 +1,54 @@
+
+
diff --git a/public_html/asset/svg/manage.svg b/public_html/asset/svg/manage.svg
new file mode 100644
index 0000000..f83dcf4
--- /dev/null
+++ b/public_html/asset/svg/manage.svg
@@ -0,0 +1,47 @@
+
+
\ No newline at end of file
diff --git a/webpack/scss/layout.scss b/webpack/scss/layout.scss
index f68bb4f..8e2eb9a 100644
--- a/webpack/scss/layout.scss
+++ b/webpack/scss/layout.scss
@@ -11,7 +11,7 @@ body{
width: 100%;
height: 100%;
- background: #ccc;
+ background: #fefeff;
font-size: 16px;
font-family: 'Open Sans';
diff --git a/webpack/scss/menu.scss b/webpack/scss/menu.scss
index e69de29..870048e 100644
--- a/webpack/scss/menu.scss
+++ b/webpack/scss/menu.scss
@@ -0,0 +1,78 @@
+$menu-bg: #163042;
+
+#side-menu{
+
+ /* (1) Container
+ ---------------------------------------------------------*/
+ display: flex;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 4.5em;
+ height: 100%;
+
+ background-color: $menu-bg;
+
+ // flex properties
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+
+ /* (2) Items
+ ---------------------------------------------------------*/
+ .item{
+ display: block;
+ width: 3.5em;
+ height: 3.5em;
+
+ border-radius: 3px / 3px;
+
+ // box-shadow: inset 0 0 5px darken($menu-bg, 6%);
+
+ background: url('/asset/svg/home.svg') center center no-repeat;
+ background-size: 50%;
+
+ border: 1px solid lighten($menu-bg, 5%);
+
+ transition: all .2s ease-in-out;
+
+ cursor: pointer;
+
+ /* (1) Set icons */
+ &[data-icon='home']{ background-image: url('/asset/svg/home.svg'); }
+ &[data-icon='manage']{ background-image: url('/asset/svg/manage.svg'); }
+ &[data-icon='fiche']{ background-image: url('/asset/svg/fiche.svg'); }
+ &[data-icon='login']{ background-image: url('/asset/svg/login.svg'); }
+ &[data-icon='logout']{ background-image: url('/asset/svg/logout.svg'); }
+
+ /* (2) On mouseover */
+ &:hover{
+ border: 1px solid lighten($menu-bg, 20%);
+ // box-shadow: inset 0 0 5px darken($menu-bg, 60%);
+ }
+
+ /* (3) Label */
+ span{
+
+ display: none;
+ // display: block;
+ position: absolute;
+ margin-top: calc( 3.5em / 4 );
+ left: calc( 100% + .5em );
+
+ padding: .3em .7em;
+
+ background-color: $menu-bg;
+
+ color: #fff;
+
+ border-radius: 3px / 3px;
+
+ }
+
+ /* (4) Display label on item hover */
+ &:hover span{ display: block; }
+
+ }
+
+}
\ No newline at end of file
diff --git a/webpack/vue/menu.vue b/webpack/vue/menu.vue
index 9b34c64..4b6044d 100644
--- a/webpack/vue/menu.vue
+++ b/webpack/vue/menu.vue
@@ -1,12 +1,13 @@
-