💡(#180): adicionando icones na logica de dropdown

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",

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>

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==