commit matin

header.php

@@ -10,5 +10,6 @@
             <li><a id="unTest" class="nav-element" href="bing.com">Bing</a></li>
             <li><a id="login" class= "nav-element" href="login.php">Login</a></li>
         </ul>
+        <input type="text" class="search-form search-form-recette" placeholder="Rechercher une recette ...">
     </nav>
 </header>

index.php

@@ -11,7 +11,9 @@
     <?php include "header.php"?>
 
     <div class="main-body">
-        <div class="sidebar"> une sidebar</div>
+        <div class="sidebar">
+            <?php include "sidebar.php" ?>
+        </div>
         <div class="content">
             <?php include "recette.php"?>
         </div>

main.css

@@ -93,10 +93,58 @@ body {
 }
 
 .sidebar {
-    background-color: aquamarine;
+    background-color: #caecd6;
     border: 1px solid rgba(0,0,0,.125);
-    border-radius: 10px;
+    border-radius: 6px;
     width: 128px;
+    display: flex;
+    flex-direction: column;
+}
+
+.selected {
+    flex: 1;
+}
+
+.unselected {
+    flex: 4;
+}
+
+#sidebar-search {
+    flex: 1;
+}
+
+.search-form-tag {
+    width: 85%;
+}
+
+.search-form-recette {
+    width: 100%;
+    height: 25px;
+}
+
+.search-form {
+    border: 1px solid black;
+    border-radius: 20px;
+}
+
+nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.tag {
+    border: 1px solid black;
+    border-radius: 10px;
+    width: 95%;
+}
+
+.tag-selected {
+    background-color: #ffa04d;
+}
+
+.tag-unselected {
+    background-color: white;
 }
 
 
@@ -139,16 +187,27 @@ body {
     }
 }
 
-@media screen and (max-width : 600px) {
+@media screen and (max-width : 800px) {
     .recettes {
         grid-template-columns: repeat(1, 1fr);
     }
 
+}
+
+@media screen and (max-width : 600px) {
+
     .sidebar {
         display: none;
     }
 }
 
+ul {
+    list-style-type: none;
+    margin-left: 0px;
+    text-align: center;
+    padding : 0px;
+}
+
 /* Classe recette icone :
     C'est la classe de chaques éléments de notre liste de recette
 */

sidebar.php

@@ -0,0 +1,18 @@
+<h4>Filtres</h4>
+<div class="selected">
+    <ul>
+        <li class="tag tag-selected">Tag 1</li>
+        <li class="tag tag-selected">Tag 2</li>
+    </ul>
+</div>
+<form id="sidebar-search" action="none">
+    <input type="text" class="search-form search-form-tag" name="search-tag" placeholder="Rechercher..." >
+</form>
+<div class="unselected">
+    <ul>
+        <li class="tag tag-unselected">Tag 1</li>
+        <li class="tag tag-unselected">Tag 2</li>
+        <li class="tag tag-unselected">Tag 3</li>
+        <li class="tag tag-unselected">Tag 4</li>
+    </ul>
+</div>