From 97286b6f6aae8b2db1e9a4d56634d369facae25b Mon Sep 17 00:00:00 2001
From: Lycano <sebastien.bousquet91@laposte.net>
Date: Fri, 27 Mar 2026 10:12:59 +0100
Subject: [PATCH] commit matin

---
 header.php  |  1 +
 index.php   |  4 +++-
 main.css    | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 sidebar.php | 18 +++++++++++++++
 4 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 sidebar.php

diff --git a/header.php b/header.php
index 688d21f..bfe9a98 100644
--- a/header.php
+++ b/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>
\ No newline at end of file
diff --git a/index.php b/index.php
index a1f1f32..044abda 100644
--- a/index.php
+++ b/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>
diff --git a/main.css b/main.css
index 06db5b6..3749cf5 100644
--- a/main.css
+++ b/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
 */
diff --git a/sidebar.php b/sidebar.php
new file mode 100644
index 0000000..1393faf
--- /dev/null
+++ b/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>
\ No newline at end of file