- [x] Design de structure (layout navigation)

- [x] Header
	- [x] Menu-side
	- [x] Submenu-side

css/constants.scss

@@ -1,2 +1,4 @@
 $theme-color: #4662d4;
-$theme-color: #00A6EB;
+$theme-color: #00A6EB;
+
+$sub-menu-color: #5b5e63;

css/container.css

@@ -1,2 +1,2 @@
-#WRAPPER>#CONTAINER>.sub-menu-side{display:block;position:relative}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]{display:block;position:relative;padding:.3em 1.5em;border-radius:3px;background:url("../src/?static/sub-menu-side.svg") left 0.25em center no-repeat;background-size:1.1em;color:#5b5e63;text-shadow:1px 1px white;white-space:nowrap;transition:all .2s;cursor:pointer}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active{background-color:#d8deea;box-shadow:inset 0 0 4px #c8ced9}
+#WRAPPER>#CONTAINER>.sub-menu-side{display:block;position:relative}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]{display:block;position:relative;padding:.3em 1.5em;margin:1em 0;border-radius:3px;background:url("../src/?static/sub-menu-side.svg") left 0.25em center no-repeat;background-size:1.1em;color:#5b5e63;text-shadow:1px 1px white;white-space:nowrap;transition:all .2s;cursor:pointer}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg{display:inline-block;position:absolute;left:.25em;top:50%;width:1em;height:1em;transform:translateY(-50%)}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]>.svg>svg path{fill:#5b5e63 !important}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active{color:#121213;background-color:#d8deea;box-shadow:inset 0 0 4px #c8ced9}#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink]:hover>.svg>svg path,#WRAPPER>#CONTAINER>.sub-menu-side>span[data-sublink].active>.svg>svg path{fill:#121213 !important}
 /*# sourceMappingURL=container.css.map */

css/container.scss

@@ -1,3 +1,5 @@
+@import 'constants';
+
 #WRAPPER > #CONTAINER{
 
 	/**************************/
@@ -13,24 +15,49 @@
 			position: relative;
 
 			padding: .3em 1.5em;
+			margin: 1em 0;
 			
 			border-radius: 3px;
 
 			background: url('../src/?static/sub-menu-side.svg') left .25em center no-repeat;
 			background-size: 1.1em;
 			
-			color: #5b5e63;
+			color: $sub-menu-color;
 			text-shadow: 1px 1px white;
 			white-space: nowrap;
 
 			transition: all .2s;
 
-			cursor: pointer; 
+			cursor: pointer;
+
+			// Dimension/Position des svg (icones)
+			& > .svg > svg{
+				display: inline-block;
+				position: absolute;
+					left: .25em;
+					top: 50%;
+					width: 1em;
+					height: 1em;
+
+				transform: translateY(-50%);
+
+				// Coloration pour tous les elements du svg
+				& path{
+					fill: $sub-menu-color !important;
+				}
+			}
+			
 
 			&:hover,
 			&.active{
+				color: darken($sub-menu-color, 30);
 				background-color: #d8deea;
-				box-shadow: inset 0 0 4px #c8ced9; 
+				box-shadow: inset 0 0 4px #c8ced9;
+
+				& > .svg > svg path{
+					fill: darken($sub-menu-color, 30) !important;
+				}
+
 			}
 
 		}

src/static/sub-menu-side/create.svg

@@ -7,13 +7,13 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="32px"
+   height="32"
    version="1.1"
    viewBox="0 0 32 32"
-   width="32px"
+   width="32"
    id="svg3901"
    inkscape:version="0.48.4 r9939"
-   sodipodi:docname="18.svg">
+   sodipodi:docname="create.svg">
   <metadata
      id="metadata3914">
     <rdf:RDF>
@@ -22,7 +22,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -40,32 +40,33 @@
      id="namedview3912"
      showgrid="false"
      inkscape:zoom="20.85965"
-     inkscape:cx="12.887181"
+     inkscape:cx="12.418431"
-     inkscape:cy="17.571155"
+     inkscape:cy="17.102405"
      inkscape:window-x="0"
      inkscape:window-y="24"
      inkscape:window-maximized="1"
      inkscape:current-layer="icon-150-tag-checked"
-     inkscape:snap-page="true" />
+     inkscape:snap-page="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
   <desc
      id="desc3905" />
   <defs
      id="defs3907" />
   <g
-     fill="none"
-     fill-rule="evenodd"
      id="Page-1"
-     stroke="none"
+     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
-     stroke-width="1"
+     transform="translate(-0.46875,0.46875)">
-     style="fill:#000000;fill-opacity:1">
     <g
-       fill="#157EFB"
        id="icon-150-tag-checked"
        style="fill:#000000;fill-opacity:1">
       <path
          style="fill:#000000;fill-opacity:1"
-         d="M 16 0.46875 C 7.4289025 0.46875 0.46875 7.4289035 0.46875 16 C 0.46875 24.571097 7.4289025 31.53125 16 31.53125 C 24.571096 31.53125 31.53125 24.571097 31.53125 16 C 31.53125 7.4289035 24.571096 0.46875 16 0.46875 z M 22.6875 9.53125 L 24.75 11.59375 L 13.875 22.46875 L 7.25 15.84375 L 9.3125 13.75 L 13.875 18.34375 L 22.6875 9.53125 z "
+         d="m 16.46875,-0.46875 c -8.8297825,0 -16,7.1702185 -16,16 0,8.829782 7.1702175,16 16,16 8.829781,0 16,-7.170218 16,-16 0,-8.8297815 -7.170219,-16 -16,-16 z m 6.889336,9.3360161 2.124749,2.1247489 -11.20322,11.203219 -6.8249495,-6.82495 2.1247485,-2.156941 4.700201,4.732394 9.078471,-9.0784709 z"
-         id="path4447" />
+         id="path4447"
+         inkscape:connector-curvature="0" />
     </g>
   </g>
 </svg>

src/static/sub-menu-side/edit.svg

@@ -1 +1,58 @@
-<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M6 34.5v7.5h7.5l22.13-22.13-7.5-7.5-22.13 22.13zm35.41-20.41c.78-.78.78-2.05 0-2.83l-4.67-4.67c-.78-.78-2.05-.78-2.83 0l-3.66 3.66 7.5 7.5 3.66-3.66z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="32"
+   viewBox="0 0 32 32"
+   width="32"
+   id="svg2985"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="edit.svg">
+  <metadata
+     id="metadata2995">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs2993" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     id="namedview2991"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="4.9166667"
+     inkscape:cx="16"
+     inkscape:cy="16"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2985" />
+  <path
+     d="M 0,25.332407 V 32 H 6.667593 L 26.341436,12.326157 19.673843,5.6585637 0,25.332407 z M 31.479928,7.1876647 c 0.693429,-0.6934299 0.693429,-1.822475 0,-2.5159039 L 27.328239,0.52007175 c -0.693429,-0.693429 -1.822474,-0.693429 -2.515904,0 L 21.55855,3.7738568 28.226143,10.44145 31.479928,7.1876647 z"
+     id="path2987"
+     inkscape:connector-curvature="0" />
+</svg>

src/static/sub-menu-side/filter.svg

@@ -1 +1,80 @@
-<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="100px" id="Capa_1" style="enable-background:new 0 0 96 100;" version="1.1" viewBox="0 0 96 100" width="96px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M94.456,2.028c-0.544-1.577-2.248-2.408-3.804-1.859c-1.557,0.549-2.379,2.272-1.837,3.849   c4.599,13.351-4.53,23.317-11.485,28.657l-2.817-4.072c-0.942-1.361-3.058-2.495-4.699-2.52l-15.777,0.072   c-1.64-0.026-4.085,0.735-5.43,1.689L2.123,60.786c-2.251,1.596-2.799,4.736-1.223,7.016L22.027,98.34   c1.577,2.28,4.111,2.007,6.362,0.412l46.483-32.941c1.345-0.955,2.885-3.02,3.426-4.59l4.94-15.731   c0.538-1.571,0.21-3.969-0.733-5.331l-1.717-2.481C90.139,30.451,99.841,17.665,94.456,2.028z M72.829,48.808   c-3.603,2.552-8.569,1.665-11.091-1.98c-2.523-3.648-1.648-8.672,1.957-11.227c2.859-2.027,6.573-1.879,9.246,0.088   c-1.346,0.82-2.269,1.292-2.445,1.376c-1.49,0.712-2.127,2.512-1.426,4.02c0.51,1.095,1.584,1.736,2.705,1.736   c0.426,0,0.859-0.094,1.271-0.29c0.958-0.457,1.989-1.009,3.064-1.652C76.595,43.845,75.426,46.968,72.829,48.808z"/></g><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="32"
+   id="Capa_1"
+   version="1.1"
+   viewBox="0 0 32 32"
+   width="32"
+   xml:space="preserve"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="filter.svg"><metadata
+     id="metadata3036"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs3034" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     id="namedview3032"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-page="true"
+     inkscape:zoom="13.350176"
+     inkscape:cx="25.628151"
+     inkscape:cy="7.9389858"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Capa_1" /><g
+     id="g2998"
+     transform="matrix(0.32000075,0,0,0.32000075,0.63991432,5.5033384e-5)"><path
+       d="M 94.456,2.028 C 93.912,0.451 92.208,-0.38 90.652,0.169 89.095,0.718 88.273,2.441 88.815,4.018 93.414,17.369 84.285,27.335 77.33,32.675 l -2.817,-4.072 c -0.942,-1.361 -3.058,-2.495 -4.699,-2.52 l -15.777,0.072 c -1.64,-0.026 -4.085,0.735 -5.43,1.689 L 2.123,60.786 C -0.128,62.382 -0.676,65.522 0.9,67.802 L 22.027,98.34 c 1.577,2.28 4.111,2.007 6.362,0.412 L 74.872,65.811 c 1.345,-0.955 2.885,-3.02 3.426,-4.59 l 4.94,-15.731 c 0.538,-1.571 0.21,-3.969 -0.733,-5.331 L 80.788,37.678 C 90.139,30.451 99.841,17.665 94.456,2.028 z m -21.627,46.78 c -3.603,2.552 -8.569,1.665 -11.091,-1.98 -2.523,-3.648 -1.648,-8.672 1.957,-11.227 2.859,-2.027 6.573,-1.879 9.246,0.088 -1.346,0.82 -2.269,1.292 -2.445,1.376 -1.49,0.712 -2.127,2.512 -1.426,4.02 0.51,1.095 1.584,1.736 2.705,1.736 0.426,0 0.859,-0.094 1.271,-0.29 0.958,-0.457 1.989,-1.009 3.064,-1.652 0.485,2.966 -0.684,6.089 -3.281,7.929 z"
+       id="path3000"
+       inkscape:connector-curvature="0" /></g><g
+     id="g3002"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3004"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3006"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3008"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3010"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3012"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3014"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3016"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3018"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3020"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3022"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3024"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3026"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3028"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /><g
+     id="g3030"
+     transform="matrix(0.32000075,0,0,0.32000075,-5.8043383e-5,5.4933711e-5)" /></svg>

src/static/sub-menu-side/remove.svg

@@ -1 +1,61 @@
-<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M12 38c0 2.21 1.79 4 4 4h16c2.21 0 4-1.79 4-4v-24h-24v24zm26-30h-7l-2-2h-10l-2 2h-7v4h28v-4z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="32"
+   viewBox="0 0 32 32"
+   width="32"
+   id="svg3038"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="remove.svg">
+  <metadata
+     id="metadata3048">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs3046" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     id="namedview3044"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-page="true"
+     inkscape:zoom="6.9532165"
+     inkscape:cx="18.730911"
+     inkscape:cy="24.73708"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3038" />
+  <path
+     d="M 5.3333332,28.444444 C 5.3333332,30.408889 6.9244442,32 8.8888882,32 H 23.111112 c 1.964444,0 3.555555,-1.591111 3.555555,-3.555556 V 7.111111 H 5.3333332 v 21.333333 z"
+     id="path3038" />
+  <path
+     d="M 28.444445,1.777778 H 22.222223 L 20.444445,0 H 11.555556 L 9.7777778,1.777778 H 3.5555552 V 5.333333 H 28.444445 V 1.777778 z"
+     id="path3040" />
+</svg>

src/static/sub-menu-side/search.svg

@@ -1 +1,50 @@
-<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 500 500" height="500px" id="Layer_1" version="1.1" viewBox="0 0 500 500" width="500px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path clip-rule="evenodd" d="M306.39,154.09c19.628,4.543,35.244,21.259,39.787,39.523  c1.551,8.54,8.998,14.989,17.904,14.989c9.991,0,18.168-8.175,18.168-18.17c0-13.083-10.991-32.98-25.985-47.881  c-14.719-14.537-32.252-24.802-46.695-24.802c-9.991,0-18.172,8.45-18.172,18.446C291.396,145.094,297.847,152.546,306.39,154.09z   M56.629,392.312c-14.09,14.08-14.09,36.979,0,51.059c14.08,14.092,36.981,14.092,50.965,0l104.392-104.303  c24.347,15.181,53.062,23.991,83.953,23.991c87.857,0,158.995-71.142,158.995-158.999c0-87.854-71.138-158.995-158.995-158.995  c-87.856,0-158.995,71.141-158.995,158.995c0,30.802,8.819,59.606,23.992,83.953L56.629,392.312z M182.371,204.06  c0-62.687,50.875-113.568,113.568-113.568s113.569,50.881,113.569,113.568c0,62.694-50.876,113.569-113.569,113.569  S182.371,266.754,182.371,204.06z" fill="#010101" fill-rule="evenodd"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   enable-background="new 0 0 500 500"
+   height="32.000198"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 32 32.000198"
+   width="32"
+   xml:space="preserve"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="search.svg"><metadata
+     id="metadata3057"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs3055" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     id="namedview3053"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="0.472"
+     inkscape:cx="203.9385"
+     inkscape:cy="203.94"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><path
+     clip-rule="evenodd"
+     d="m 20.374351,8.53274 c 1.536166,0.35555 2.758337,1.66381 3.11389,3.09323 0.121388,0.66837 0.70422,1.1731 1.401239,1.1731 0.781936,0 1.421901,-0.63981 1.421901,-1.42206 0,-1.02393 -0.8602,-2.58115 -2.033691,-3.74736 -1.151967,-1.13772 -2.52417,-1.9411 -3.654537,-1.9411 -0.781936,0 -1.422214,0.66133 -1.422214,1.44365 -7.8e-5,0.69647 0.504803,1.2797 1.173412,1.40054 z M 0.827055,27.17695 c -1.10274,1.10195 -1.10274,2.89412 0,3.99608 1.101957,1.10289 2.894281,1.10289 3.988725,0 l 8.170136,-8.16317 c 1.905494,1.18812 4.152845,1.87763 6.570498,1.87763 C 26.432455,24.88749 32,19.31963 32,12.44359 32,5.56778 26.432455,0 19.556414,0 12.680452,0 7.112829,5.56778 7.112829,12.44359 c 0,2.41069 0.69021,4.665 1.87771,6.5705 l -8.163484,8.16286 z m 9.841073,-14.73336 c 0,-4.90614 3.981681,-8.88829 8.888286,-8.88829 4.906606,0 8.888365,3.98215 8.888365,8.88829 0,4.90668 -3.981759,8.88837 -8.888365,8.88837 -4.906605,0 -8.888286,-3.98169 -8.888286,-8.88837 z"
+     id="path3051"
+     inkscape:connector-curvature="0"
+     style="fill:#010101;fill-rule:evenodd" /></svg>

src/static/sub-menu-side/view.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="32"
+   id="Layer_1"
+   version="1.1"
+   viewBox="0 0 32 32"
+   width="32"
+   xml:space="preserve"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="view.svg"><metadata
+     id="metadata9"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs7" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     id="namedview5"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-page="true"
+     inkscape:zoom="14.75"
+     inkscape:cx="-2.881357"
+     inkscape:cy="6"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><path
+     d="m 16,12 c 0,2.208 -1.792,4 -4,4 0,2.208 1.792,4 4,4 2.208,0 4,-1.792 4,-4 0,-2.208 -1.792,-4 -4,-4 z M 16,4 C 7.7959999,4 -3.031995e-8,13.296 -3.031995e-8,16 -3.031995e-8,18.704 7.7959999,28 16,28 24.204,28 32,18.704 32,16 32,13.296 24.204,4 16,4 z m 0,20 C 11.582,24 7.9999999,20.418 7.9999999,16 7.9999999,11.582 11.582,8 16,8 c 4.418,0 8,3.582 8,8 0,4.418 -3.582,8 -8,8 z"
+     id="path3"
+     inkscape:connector-curvature="0" /></svg>

todo.md

@@ -10,14 +10,15 @@
 # EN COURS #
 ############
 	
-- [.] Design de structure (layout)
+- [x] Design de structure (layout navigation)
 	- [x] Header
 	- [x] Menu-side
-	- [.] Submenu-side
+	- [x] Submenu-side
 
 - [.] Gestion JS de la navigation
 	- [x] Gestion de liens+URL du menu
 	- [ ] Gestion des liens+URL du submenu
+		- [ ] onload du xhr, on lance le script sur le DOM
 
 ########
 # FAIT #

view/machines.php

@@ -1,11 +1,36 @@
 <!-- [1] Gestion du sous-menu de gauche -->
 
 <nav class='sub-menu-side'>
-	<span data-sublink='displayall' data-desc='Tout afficher'><?php include '/src/static/sub-menu-side/create.svg'; ?></span>
+	<span data-sublink='displayall'>
-	<span data-sublink='create'     data-desc='Creation'     ><?php include '/src/static/sub-menu-side/create.svg'; ?></span>
+		<span class='svg'><?php include 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/view/st/sub-menu-side'; ?></span>
-	<span data-sublink='remove'     data-desc='Suppression'  ><?php include '/src/static/sub-menu-side/create.svg'; ?></span>
+		<span>Tout afficher</span>
-	<span data-sublink='filter'     data-desc='Filtrer'      ><?php include '/src/static/sub-menu-side/create.svg'; ?></span>
+	</span>
-	<span data-sublink='search'     data-desc='Recherche'    ><?php include '/src/static/sub-menu-side/create.svg'; ?></span>
+
+	<span data-sublink='create'    >
+		<span class='svg'><?php include 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/create/st/sub-menu-side'; ?></span>
+		<span>Creation</span>
+	</span>
+
+	<span data-sublink='remove'    >
+		<span class='svg'><?php include 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/remove/st/sub-menu-side'; ?></span>
+		<span>Suppression</span>
+	</span>
+
+	<span data-sublink='edit'    >
+		<span class='svg'><?php include 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/edit/st/sub-menu-side'; ?></span>
+		<span>Modification</span>
+	</span>
+
+	<span data-sublink='filter'    >
+		<span class='svg'><?php include 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/filter/st/sub-menu-side'; ?></span>
+		<span>Filtrer</span>
+	</span>
+
+	<span data-sublink='search'    >
+		<span class='svg'><?php include 'http://'.$_SERVER['HTTP_HOST'].'/f/svg/search/st/sub-menu-side'; ?></span>
+		<span>Recherche</span>
+	</span>
+
 </nav>
 
 <section>