From 07fbc7d0094a615527f0b1197c88dbfada84ebae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Tue, 8 Sep 2026 10:31:21 -0300
Subject: [PATCH] feat: move account navigation into user menu

---
 components/Navbar.tsx | 43 ++++++++++++++++---------------------------
 1 file changed, 16 insertions(+), 27 deletions(-)

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 11de325..25e8901 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { User as UserIcon, LogOut, Search, Folder, BookOpenCheck } from 'lucide-react';
+import { User as UserIcon, LogOut, Search, Folder, BookOpenCheck, ChevronDown, ShieldCheck, Settings } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
 import { LoginModal } from './LoginModal';
 import { SearchModal } from './SearchModal';
@@ -15,6 +15,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onPlay }) => {
   const [scrolled, setScrolled] = useState(false);
   const [showLoginModal, setShowLoginModal] = useState(false);
   const [showSearchModal, setShowSearchModal] = useState(false);
+  const [showAccountMenu, setShowAccountMenu] = useState(false);
   const { user, logout } = useAuth();
   const navigate = useNavigate();
   const location = useLocation();
@@ -34,6 +35,10 @@ export const Navbar: React.FC<NavbarProps> = ({ onPlay }) => {
 
   const isMaterialsPage = location.pathname === '/materiais';
   const isHomePage = location.pathname === '/';
+  const goTo = (path: string) => {
+    setShowAccountMenu(false);
+    navigate(path);
+  };
 
   return (
     <>
@@ -100,37 +105,21 @@ export const Navbar: React.FC<NavbarProps> = ({ onPlay }) => {
               </button>
             ) : (
               <div className="flex items-center gap-3">
-                {user.role === 'student' && <button onClick={() => navigate('/meu-aprendizado')} className={`hidden sm:inline-flex items-center gap-2 text-sm font-semibold px-4 py-2.5 rounded-[980px] transition-colors ${location.pathname === '/meu-aprendizado' ? 'bg-orange-500/20 text-orange-400 border border-orange-500/30' : 'text-gray-300 hover:text-white bg-white/5 hover:bg-white/10'}`}><BookOpenCheck className="w-4 h-4" /> Meu aprendizado</button>}
-                {user.role === 'superadmin' ? (
-                  <button
-                    onClick={() => navigate('/admin')}
-                    className={`text-sm font-semibold px-5 py-2.5 rounded-[980px] transition-colors ${
-                      location.pathname === '/admin'
-                        ? 'bg-orange-500/20 text-orange-400 border border-orange-500/30'
-                        : 'text-gray-300 hover:text-white bg-white/5 hover:bg-white/10'
-                    }`}
-                  >
-                    Painel Administrativo
+                <div className="relative">
+                  <button onClick={() => setShowAccountMenu((current) => !current)} className="flex items-center gap-2 rounded-[980px] px-3 py-2 text-sm text-gray-300 hover:bg-white/10 hover:text-white transition-colors" aria-expanded={showAccountMenu} aria-haspopup="menu">
+                    <span className="hidden md:block">Olá, <strong className="font-semibold text-white">{user.name.split(' ')[0]}</strong></span>
+                    <ChevronDown className={`h-4 w-4 transition-transform ${showAccountMenu ? 'rotate-180' : ''}`} />
                   </button>
-                ) : user.role === 'professor' && (
-                  <button 
-                    onClick={() => navigate('/gerenciar')}
-                    className={`text-sm font-semibold px-5 py-2.5 rounded-[980px] transition-colors ${
-                      location.pathname === '/gerenciar' 
-                        ? 'bg-orange-500/20 text-orange-400 border border-orange-500/30' 
-                        : 'text-gray-300 hover:text-white bg-white/5 hover:bg-white/10'
-                    }`}
-                  >
-                    Painel do Instrutor
-                  </button>
-                )}
+                  {showAccountMenu && <div role="menu" className="absolute right-0 top-full mt-2 w-56 overflow-hidden rounded-xl border border-white/10 bg-zinc-950 p-1.5 shadow-2xl shadow-black/60">
+                    {user.role === 'student' && <button role="menuitem" onClick={() => goTo('/meu-aprendizado')} className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2.5 text-left text-sm text-gray-200 hover:bg-white/10"><BookOpenCheck className="h-4 w-4 text-orange-400" /> Meu aprendizado</button>}
+                    {user.role === 'professor' && <button role="menuitem" onClick={() => goTo('/gerenciar')} className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2.5 text-left text-sm text-gray-200 hover:bg-white/10"><Settings className="h-4 w-4 text-orange-400" /> Painel do instrutor</button>}
+                    {user.role === 'superadmin' && <><button role="menuitem" onClick={() => goTo('/admin')} className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2.5 text-left text-sm text-gray-200 hover:bg-white/10"><ShieldCheck className="h-4 w-4 text-orange-400" /> Painel administrativo</button><button role="menuitem" onClick={() => goTo('/gerenciar')} className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2.5 text-left text-sm text-gray-200 hover:bg-white/10"><Settings className="h-4 w-4 text-orange-400" /> Gerenciar cursos</button></>}
+                  </div>}
+                </div>
 
                 <div className="h-4 w-[1px] bg-white/20 hidden sm:block"></div>
 
                 <div className="flex items-center gap-2.5">
-                  <span className="text-sm text-gray-300 hidden md:block">
-                    Olá, <strong className="text-white font-semibold">{user.name.split(' ')[0]}</strong>
-                  </span>
                   <button 
                     onClick={handleLogout}
                     className="flex items-center gap-2 bg-red-500/10 hover:bg-red-500/20 active:scale-95 transition-all duration-300 px-4 py-2 rounded-[980px] border border-red-500/20 group text-xs font-semibold text-red-400"