blyzer/compor-academy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: move account navigation into user menu

Browse Source
This commit is contained in:
Cauê Faleiros
2026-09-08 10:31:21 -03:00
parent 37ce8e8afb
commit 07fbc7d009
1 changed files with 16 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/Navbar.tsx
View File

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