From 012c4a711ce8903faa38ea33e9d78f82c606ae4f Mon Sep 17 00:00:00 2001
From: Lextrait <lextraitthibault@hotmail.fr>
Date: Thu, 22 Nov 2018 01:18:16 +0100
Subject: [PATCH] Ajout de css pour navbar

---
 pima/resources/views/profil.blade.php   | 43 +++++++++++--
 pima/resources/views/template.blade.php | 82 ++++++++++++++++++++++---
 2 files changed, 112 insertions(+), 13 deletions(-)

diff --git a/pima/resources/views/profil.blade.php b/pima/resources/views/profil.blade.php
index 95f2eb9..c76505f 100644
--- a/pima/resources/views/profil.blade.php
+++ b/pima/resources/views/profil.blade.php
@@ -8,15 +8,21 @@ Profil
 
 <!--Header des pages-->
 	<header>
-		<!--Pop le header-->
+		<nav class="topnav">
+			<ul>
+				<li><a href="#coordonnees">Coordonnées</a></li>
+				<li><a href="#liste_outils">Liste d'outils</a></li>
+				<li><a href="#edit">Édition</a></li>
+			</ul>
+		</nav>
 	</header>
        
 	<!--Blabla avant découpe -->
-    Ici blablabla
-        <hr/>
-		<!--Navigation-->
+
+	<!--Navigation-->
+	
 		<section>
-			<nav class="side">
+			<nav id="nav" class="side">
 				<ul>
 					<li><a href="#coordonnees">Coordonnées</a></li>
 					<li><a href="#liste_outils">Liste d'outils</a></li>
@@ -29,11 +35,29 @@ Profil
         	<h1 id="coordonnees">Les coordonnées</h1>
             	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
 
+Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
+
+Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
+
+Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
+
 Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
 </p>
             <h1 id="liste_outils">Les outils</h1>
             	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
 
+Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
+
+Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
+
+Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
+
 Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
 </p>
             <h1 id="edit">Les edit</h1>
@@ -41,6 +65,15 @@ Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. A
 Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
 
+Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
+
+Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
+
+Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
+
 Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
 			<!-- Pop les pages à la suite, IL FAUT METTRE DES TITRES STYLES <h1 id=" . "> avec coordonnees, liste_outils et edit -->
 		</article>
diff --git a/pima/resources/views/template.blade.php b/pima/resources/views/template.blade.php
index 632172e..348c993 100644
--- a/pima/resources/views/template.blade.php
+++ b/pima/resources/views/template.blade.php
@@ -39,6 +39,66 @@ body {
 	padding: 0px 0px 2px 30px;
 }
 
+
+/* Concerne la barre de navigation de haut de page */
+
+
+.topnav{
+	font-size: 30px;
+    height: 50px;
+	width:100%;
+	position: fixed;
+	margin-bottom: 20px;
+	padding-bottom: 5px;
+	border-bottom: 5px solid grey;
+}
+
+
+.topnav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+
+.topnav li {
+    float: right;
+}
+
+.topnav a {
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+.topnav a:visited{
+	color:white;
+    background-color: #686868;
+    text-decoration: none;
+    padding: 0px 10px 0px 10px;
+}
+
+.topnav a:link{
+	color:white;
+    background-color: #686868;
+    text-decoration: none;
+    padding: 0px 10px 0px 10px;
+}
+
+.topnav a:hover{
+	color:white;
+    background-color: #a8a6a6;
+    text-decoration: none;
+    padding: 0px 10px 0px 10px;
+}
+
+/* Barre de navigation de côté style Profil */
+
 nav.side{
 	font-size: 30px;
     float: left;
@@ -46,14 +106,9 @@ nav.side{
     padding: 20px;
     height: 100px;
     margin-right: 20px;
-}
-
-article{
-	float: right;
-	width: 75%;
-	margin-left: 10px;
-	padding-left: 15px;
-	border-left: 5px solid grey
+	position: fixed;
+	overflow: auto;
+	height:100%;
 }
 
 nav.side a:link {
@@ -84,6 +139,17 @@ nav.side a:hover {
     text-decoration: none;
     padding: 0px 10px 0px 10px;
 }
+
+/* Le contenu des pages */
+
+article{
+	float: right;
+	width: 80%;
+	margin-left: 10px;
+	margin-top: 60px;
+	padding-left: 15px;
+	border-left: 5px solid grey
+}
 </style>
     <title>@yield('titre')</title>
 </head>
-- 
GitLab