Update navBar.tsx

Author: YuriMascarenhasLourenco

src/app/components/navBar.tsx

@@ -22,21 +22,21 @@ export const NavBar = () => {
     logout();
     router.push("/");
   };
-  const handleSubmit = async(e: React.FormEvent) => {
+
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
       console.log("Buscando produto:", findItem);
       const response = await api.get<productType>(`/product/name/${findItem}`);
       console.log("Resposta da API:", response.data);
       const product = response.data;
       console.log("Produto encontrado:", product);
-      // Redireciona para a rota de resultados com o ID do produto como query parameter
       setFindItem("");
       router.push(`/search?productId=${product.id}`);
-  } catch (error) {
+    } catch (error) {
       console.error("Erro ao buscar produto:", error);
-  }
-  }
+    }
+  };
 
   // Fecha dropdowns ao clicar fora
   const userMenuRef = useRef<HTMLDivElement>(null);
@@ -74,44 +74,45 @@ export const NavBar = () => {
 
       <div className="flex items-center w-80">
         <form action="" onSubmit={handleSubmit} className="flex w-full">
-        <input
-          type="text"
-          className="rounded-md w-80 text-black"
-          placeholder="  what is your desire today?"
-          value={findItem}
-          onChange={(e) => setFindItem(e.target.value)}
-        />
-        <button className="rounded-md text-white text-lg w-12 flex items-center justify-center">
-          <CiSearch />
-        </button>
+          <input
+            type="text"
+            className="rounded-md w-80 text-black"
+            placeholder="  what is your desire today?"
+            value={findItem}
+            onChange={(e) => setFindItem(e.target.value)}
+          />
+          <button className="rounded-md text-white text-lg w-12 flex items-center justify-center">
+            <CiSearch />
+          </button>
         </form>
-       
       </div>
 
       <div className="flex gap-4">
         {user ? (
           <div className="flex gap-4 items-center">
             {/* Dropdown Management */}
-            <div className="relative" ref={managementMenuRef}>
-              <button
-                onClick={() => setOpenManagementMenu(!openManagementMenu)}
-                className="uppercase font-bold text-sm h-12 flex items-center"
-              >
-                Management
-              </button>
-              {openManagementMenu && (
-                <div className="absolute right-0 mt-2 w-40 rounded-xl shadow-lg bg-white text-black ring-1 ring-black/5 z-50">
-                  <ul className="py-2 text-sm">
-                    <li className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
-                      <Link href="/admin/newProduct">New Product</Link>
-                    </li>
-                    <li className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
-                      <Link href="/admin/stocks">Stocks</Link>
-                    </li>
-                  </ul>
-                </div>
-              )}
-            </div>
+            {user.role === "admin" && (
+              <div className="relative" ref={managementMenuRef}>
+                <button
+                  onClick={() => setOpenManagementMenu(!openManagementMenu)}
+                  className="uppercase font-bold text-sm h-12 flex items-center"
+                >
+                  Management
+                </button>
+                {openManagementMenu && (
+                  <div className="absolute right-0 mt-2 w-40 rounded-xl shadow-lg bg-white text-black ring-1 ring-black/5 z-50">
+                    <ul className="py-2 text-sm">
+                      <li className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
+                        <Link href="/admin/newProduct">New Product</Link>
+                      </li>
+                      <li className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
+                        <Link href="/admin/stocks">Stocks</Link>
+                      </li>
+                    </ul>
+                  </div>
+                )}
+              </div>
+            )}
 
             {/* Dropdown User */}
             <div className="relative" ref={userMenuRef}>
@@ -156,4 +157,4 @@ export const NavBar = () => {
       </div>
     </nav>
   );
-};
+};