From a2fd5d12e3f12cdab1f9313f4864cbc47aaf5735 Mon Sep 17 00:00:00 2001
From: Welton Moura <weltonmoura@live.com>
Date: Tue, 14 Jan 2025 21:34:08 -0300
Subject: [PATCH] feat: seta down do dropdown girar no hover

---
 gestaoRaul/templates/base.html                 |  4 ++--
 gestaoRaul/templates/static/base.css           | 18 ++++++++++++++++--
 .../templates/static/midia/icons/down.svg      |  7 +++++++
 3 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 gestaoRaul/templates/static/midia/icons/down.svg

diff --git a/gestaoRaul/templates/base.html b/gestaoRaul/templates/base.html
index 7cd9cc5..d9573bf 100644
--- a/gestaoRaul/templates/base.html
+++ b/gestaoRaul/templates/base.html
@@ -38,7 +38,7 @@
                     <li class="nav-item"><a href="{% url 'mapMesas' %}" class="nav-link">Mapa</a></li>
                     
                     <div class="dropdown">
-                        <li class="nav-item">Cadastros</li>
+                        <li class="nav-item">Cadastros<img  class="img-drop" src="{% static 'midia/icons/down.svg' %}"></li>
                         <div class="dropdown-content">
                           <a href="{% url 'products' %}" class="nav-link">Produtos</a>
                           <a href="{% url 'categories' %}" class="nav-link">Categorias</a>
@@ -71,7 +71,7 @@
 
 
                     <div class="dropdown">
-                        <li class="nav-item">Cadastros </li>
+                        <li class="nav-item">Cadastros<img class="img-drop" src="{% static 'midia/icons/down.svg' %}" style="width: 35px;"> </li>
                             <div class="dropdown-content">
                             <a href="{% url 'products' %}" class="nav-link"> Produtos</a>
                             <a href="{% url 'categories' %}" class="nav-link"> Categorias</a>
diff --git a/gestaoRaul/templates/static/base.css b/gestaoRaul/templates/static/base.css
index b68b97b..bacb379 100644
--- a/gestaoRaul/templates/static/base.css
+++ b/gestaoRaul/templates/static/base.css
@@ -88,6 +88,7 @@ text-align: center;
     position: relative;
     display: inline-block;
     color: #fff;
+    cursor: pointer;
   }
   
   .dropdown-content {
@@ -97,6 +98,7 @@ text-align: center;
     background-color: #313238;
     min-width: 160px;
     box-shadow: 0px 3px 10px #464646;
+    transition: display 0.9s ease-in-out
   }
   
   .dropdown-content a {
@@ -109,9 +111,21 @@ text-align: center;
   .dropdown-content a:hover {
     background-color: #7a7a7a;
     border-radius: 5px;
-}
+    }
+
+  .img-drop {
+    width: 35px;
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .dropdown:hover .img-drop {
+    transform: rotate(180deg);
+  }
   
-  .dropdown:hover .dropdown-content {display: block;}
+  .dropdown:hover .dropdown-content {
+      display: block;
+}
+
   
   /* .dropdown:hover .dropbtn {background-color: #3e8e41;} */
 
diff --git a/gestaoRaul/templates/static/midia/icons/down.svg b/gestaoRaul/templates/static/midia/icons/down.svg
new file mode 100644
index 0000000..d3f307d
--- /dev/null
+++ b/gestaoRaul/templates/static/midia/icons/down.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="88px" height="88px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M8 10L12 14L16 10" stroke="#f7f7f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>
\ No newline at end of file