From 85d4f1156e7338fde13f5dc1418d17d1636a39e2 Mon Sep 17 00:00:00 2001
From: vitordiniz25 <vitordiniz25@gmail.com>
Date: Wed, 1 Nov 2023 13:05:16 -0300
Subject: [PATCH] :bulb:(#180): adicionando icones na logica de dropdown

---
 package-lock.json               |  9 +++++++
 package.json                    |  1 +
 src/components/navbar/Navbar.js | 43 +++++++++++++++++++++++----------
 yarn.lock                       | 12 ++++++++-
 4 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1a578b15..ff9c86e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.47.0",
+        "react-icons": "^4.11.0",
         "react-router-dom": "^6.17.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4",
@@ -17750,6 +17751,14 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 86fd4424..1c211082 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
+    "react-icons": "^4.11.0",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4",
diff --git a/src/components/navbar/Navbar.js b/src/components/navbar/Navbar.js
index 03cf4010..557968bf 100644
--- a/src/components/navbar/Navbar.js
+++ b/src/components/navbar/Navbar.js
@@ -1,9 +1,22 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom"; // Importe o Link
 import "../../style/components/navbar.css";
 import logo from "../../assets/logo 3.svg";
 
+import { FiChevronDown } from "react-icons/fi";
+
 const Navbar = () => {
+  const [userDropdownOpen, setUserDropdownOpen] = useState(false);
+  const [printerDropdownOpen, setPrinterDropdownOpen] = useState(false);
+
+  const toggleUserDropdown = () => {
+    setUserDropdownOpen(!userDropdownOpen)
+  }
+
+  const togglePrinterDropdown = () => {
+    setPrinterDropdownOpen(!printerDropdownOpen)
+  }
+
   return (
     <div className="container-navbar">
       <img alt="" src={logo}></img>
@@ -21,22 +34,26 @@ const Navbar = () => {
       </div>
 
       <div className="dropdown-navbar-users">
-        <button className="users-navbar">
-          Usuários
-          <div className="dropdown-users-navbar">
-            <Link to="/cadastro">Cadastro de usuário</Link>
-            <Link to="#">Edição de usuário</Link>
-          </div>
+        <button className="users-navbar" onClick={toggleUserDropdown}>
+          Usuários <FiChevronDown />
+          {userDropdownOpen && (
+            <div className="dropdown-users-navbar">
+              <Link to="/cadastro">Cadastro de usuário</Link>
+              <Link to="#">Edição de usuário</Link>
+            </div>
+          )}
         </button>
       </div>
 
       <div className="dropdown-navbar-printers">
-        <button className="printers-navbar">
-          Impressoras
-          <div className="dropdown-printers-navbar">
-            <Link to="#">Cadastro de impressora</Link>
-            <Link to="#">Edição de impressora</Link>
-          </div>
+        <button className="printers-navbar" onClick={togglePrinterDropdown}>
+          Impressoras <FiChevronDown />
+          {printerDropdownOpen && (
+            <div className="dropdown-printers-navbar">
+              <Link to="#">Cadastro de impressora</Link>
+              <Link to="#">Edição de impressora</Link>
+            </div>
+          )}
         </button>
       </div>
     </div>
diff --git a/yarn.lock b/yarn.lock
index 8c799079..9e5b1bf8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5016,6 +5016,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@^2.3.2, fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.1, function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
@@ -8179,6 +8184,11 @@ react-hook-form@^7.0.0, react-hook-form@^7.47.0:
   resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.47.0.tgz"
   integrity sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg==
 
+react-icons@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz"
+  integrity sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==
+
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
@@ -8291,7 +8301,7 @@ react-test-renderer@^18.2.0:
     react-shallow-renderer "^16.15.0"
     scheduler "^0.23.0"
 
-"react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17 || ^18", react@^18.0.0, react@^18.2.0, "react@>= 16", react@>=16.8:
+react@*, "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17 || ^18", react@^18.0.0, react@^18.2.0, "react@>= 16", react@>=16.8:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==