From 1ad2c41a8eb57d3334ae63c968c00e1086247501 Mon Sep 17 00:00:00 2001
From: Julie Blanc <contact@julie-blanc.fr>
Date: Mon, 12 Jan 2026 18:06:17 +0100
Subject: [PATCH] reparation dropdown

---
 assets/css/site-header.css          | 13 ++--
 assets/css/site-nav.css             | 92 +++++++++++++++++++++++++++++
 assets/icons/arrow-right.svg        |  1 -
 assets/icons/search.svg             |  3 -
 assets/style.css                    |  2 +
 components/icons/arrow-dropdown.svg |  1 +
 components/site-nav.html            |  6 +-
 7 files changed, 105 insertions(+), 13 deletions(-)
 create mode 100644 assets/css/site-nav.css
 delete mode 100755 assets/icons/arrow-right.svg
 delete mode 100755 assets/icons/search.svg
 create mode 100644 components/icons/arrow-dropdown.svg

diff --git a/assets/css/site-header.css b/assets/css/site-header.css
index 6b1e079..6471377 100755
--- a/assets/css/site-header.css
+++ b/assets/css/site-header.css
@@ -88,7 +88,12 @@
 /*       nav      */
 /*----------------*/
 
-#site-nav a {
+
+/*----------------*/
+/*       nav      */
+/*----------------*/
+
+/* #site-nav a {
     text-decoration: none;
     color: var(--color-txt);
 }
@@ -115,12 +120,8 @@
 
 #site-nav .nav-level-1_li{
     font-weight: 500;
-    /* padding-right: 30px; */
 }
 
-/* .nav-level-1_li.li-dropdown:hover{
-    border-bottom: solid 1px black;
-} */
 
 #site-nav li:hover {
     cursor: pointer;
@@ -158,4 +159,4 @@ ul li:hover > ul,
     font-size: 1.2em;
     line-height: 0;
 
-}
+} */
diff --git a/assets/css/site-nav.css b/assets/css/site-nav.css
new file mode 100644
index 0000000..2f6ef40
--- /dev/null
+++ b/assets/css/site-nav.css
@@ -0,0 +1,92 @@
+
+#site-nav a {
+    text-decoration: none;
+    color: currentColor;
+}
+
+#site-nav li{
+    font-weight: 500;
+    color: var(--color-txt);
+}
+
+.arrow{
+
+    --size: 12px;
+    height: var(--size);
+    width: var(--size);
+    position: relative; 
+    top: 2px;
+    display: inline-block;
+ 
+    svg{
+        height: var(--size);
+        width: var(--size);
+        transform: rotate(0deg);
+        transform-origin: center;
+        transition: transform .2s ease-in-out;
+        fill: var(--color-txt);
+    }
+    
+    
+}
+
+#site-nav .nav-level-1_ul{
+    display: flex;
+    gap: calc(var(--padding-inner)*2);
+
+}
+#site-nav .nav-level-1_li {
+    display: block;
+    /* float: left; */
+    padding: var(--padding-inner);
+    position: relative;
+    text-decoration: none;
+
+    &:hover{
+        color: var(--color);
+        .arrow svg{
+            transform: rotate(90deg);
+            fill: var(--color);
+        }
+
+    }
+}
+
+
+
+#site-nav li:hover {
+    cursor: pointer;
+}
+
+.nav-level-2_ul {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    display: none;
+    border-top: 1px solid var(--color);
+    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
+    margin-top: var(--padding-inner); 
+    min-width: 24ch;
+
+}
+
+.nav-level-1_ul li:hover > .nav-level-2_ul,
+.nav-level-2_ul:hover {
+    visibility: visible;
+    opacity: 1;
+    display: block;
+}
+.nav-level-2_li{
+    width: 100%;
+    padding: calc(var(--padding-inner)*0.75) var(--padding-inner);
+    
+}
+.nav-level-2_li:hover{
+    background-color: var(--color-light);
+}
+
+
+
+
+
diff --git a/assets/icons/arrow-right.svg b/assets/icons/arrow-right.svg
deleted file mode 100755
index 9018efb..0000000
--- a/assets/icons/arrow-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z" fill-rule="nonzero"/></svg>
\ No newline at end of file
diff --git a/assets/icons/search.svg b/assets/icons/search.svg
deleted file mode 100755
index 3318054..0000000
--- a/assets/icons/search.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
-  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
-</svg>
\ No newline at end of file
diff --git a/assets/style.css b/assets/style.css
index 93004b2..b9c1738 100755
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,8 +1,10 @@
 @import "css/var.css"; 
 @import "css/base.css";
 @import "css/site-header.css";
+@import "css/site-nav.css";
 @import "css/site-footer.css";
 
+
 @import "css/buttons.css";
 
 @import "css/home.css";
\ No newline at end of file
diff --git a/components/icons/arrow-dropdown.svg b/components/icons/arrow-dropdown.svg
new file mode 100644
index 0000000..79f54d7
--- /dev/null
+++ b/components/icons/arrow-dropdown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z"/></svg>
\ No newline at end of file
diff --git a/components/site-nav.html b/components/site-nav.html
index 7080857..3701882 100644
--- a/components/site-nav.html
+++ b/components/site-nav.html
@@ -4,21 +4,21 @@
                 <a class="nav-level-1_link" href="#">À propos</a>
             </li>
             <li class="nav-level-1_li li-dropdown">
-                <a class="nav-level-1_link" href="#">Base de connaissance</a>
+                <a class="nav-level-1_link" href="#">Base de connaissance <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
                 <ul class="nav-level-2_ul">
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Explorer les espèces</a></li>
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Contribuer à la base de connaissance</a></li>
                 </ul>
             </li>
             <li class="nav-level-1_li li-dropdown">
-                <a class="nav-level-1_link" href="#">Livrets</a>
+                <a class="nav-level-1_link" href="#">Livrets <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
                  <ul class="nav-level-2_ul">
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Créer un livret</a></li>
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Consulter les livrets</a></li>
                 </ul>
             </li>
             <li class="nav-level-1_li li-dropdown">
-                <a class="nav-level-1_link" href="#">Ateliers</a>
+                <a class="nav-level-1_link" href="#">Ateliers <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></a>
                  <ul class="nav-level-2_ul">
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Organiser un atelier</a></li>
                     <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Kits pédagogiques</a></li>