sidney
/
microtecflix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Corrigido navegação mobile, exclusão visual de notificações lidas e exibição da foto do perfil do aluno no NavBar
Build and Deploy (Gitea) / build-and-deploy (push) Successful in 1m0s Details

This commit is contained in:
Sidney Gomes 2026-07-25 19:24:02 -03:00
parent 036bb98eb7
commit 3708444f51
2 changed files with 46 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.tsx
View File

@ -22,6 +22,7 @@ export default function App() {
email: string;
role: 'admin' | 'student';
subscriptionStatus: SubscriptionStatus;
avatarUrl?: string;
} | null>(null);
// App routing

68
src/components/Navbar.tsx
View File

@ -8,6 +8,7 @@ interface NavbarProps {
email: string;
role: 'admin' | 'student';
subscriptionStatus: SubscriptionStatus;
avatarUrl?: string;
} | null;
activeView: string;
setView: (view: string) => void;
@ -99,8 +100,33 @@ export default function Navbar({ user, activeView, setView, onLogout, settings }
}
};
const navLinks = (
<>
<button
onClick={() => setView('home')}
className={`font-semibold transition-colors hover:text-[#E50914] whitespace-nowrap flex-shrink-0 ${activeView === 'home' || activeView === 'course-view' ? 'text-white' : 'text-zinc-400'}`}
>
Cursos
</button>
<button
onClick={() => setView('subscription')}
className={`font-semibold transition-colors hover:text-[#E50914] flex items-center space-x-1.5 whitespace-nowrap flex-shrink-0 ${activeView === 'subscription' ? 'text-white' : 'text-zinc-400'}`}
>
<DollarSign className="w-4 h-4 text-[#E50914]" />
<span>Minha Assinatura</span>
</button>
<button
onClick={() => setView('certificates')}
className={`font-semibold transition-colors hover:text-[#E50914] flex items-center space-x-1.5 whitespace-nowrap flex-shrink-0 ${activeView === 'certificates' ? 'text-white' : 'text-zinc-400'}`}
>
<GraduationCap className="w-4 h-4 text-[#E50914]" />
<span>Meus Certificados</span>
</button>
</>
);
return (
<nav className="sticky top-0 z-50 glass-navbar px-4 py-3 md:px-8 flex items-center justify-between">
<nav className="sticky top-0 z-50 glass-navbar px-4 py-3 md:px-8 flex flex-wrap items-center justify-between gap-y-3">
<div className="flex items-center space-x-8">
{/* LOGO */}
<div className="flex flex-col">
@ -124,26 +150,7 @@ export default function Navbar({ user, activeView, setView, onLogout, settings }
{/* NAVIGATION LINKS */}
<div className="hidden md:flex items-center space-x-3 lg:space-x-6 text-sm flex-shrink-0">
<button
onClick={() => setView('home')}
className={`font-semibold transition-colors hover:text-[#E50914] whitespace-nowrap flex-shrink-0 ${activeView === 'home' || activeView === 'course-view' ? 'text-white' : 'text-zinc-400'}`}
>
Cursos
</button>
<button
onClick={() => setView('subscription')}
className={`font-semibold transition-colors hover:text-[#E50914] flex items-center space-x-1.5 whitespace-nowrap flex-shrink-0 ${activeView === 'subscription' ? 'text-white' : 'text-zinc-400'}`}
>
<DollarSign className="w-4 h-4 text-[#E50914]" />
<span>Minha Assinatura</span>
</button>
<button
onClick={() => setView('certificates')}
className={`font-semibold transition-colors hover:text-[#E50914] flex items-center space-x-1.5 whitespace-nowrap flex-shrink-0 ${activeView === 'certificates' ? 'text-white' : 'text-zinc-400'}`}
>
<GraduationCap className="w-4 h-4 text-[#E50914]" />
<span>Meus Certificados</span>
</button>
{navLinks}
</div>
</div>
@ -180,22 +187,20 @@ export default function Navbar({ user, activeView, setView, onLogout, settings }
<h4 className="text-xs font-bold text-white uppercase tracking-wider">Notificações</h4>
</div>
<div className="max-h-64 overflow-y-auto">
{notifications.length === 0 ? (
{notifications.filter(n => !n.read).length === 0 ? (
<div className="p-4 text-center text-zinc-500 text-xs">Nenhuma notificação no momento.</div>
) : (
notifications.map(n => (
notifications.filter(n => !n.read).map(n => (
<div
key={n.id}
className={`p-3 border-b border-white/5 text-xs transition-colors ${n.read ? 'bg-transparent text-zinc-400' : 'bg-white/5 text-white'}`}
className={`p-3 border-b border-white/5 text-xs transition-colors bg-white/5 text-white`}
>
<p>{n.message}</p>
<div className="flex items-center justify-between mt-2">
<span className="text-[10px] text-zinc-500">{new Date(n.createdAt).toLocaleDateString('pt-BR')}</span>
{!n.read && (
<button onClick={() => markAsRead(n.id)} className="text-[10px] text-[#E50914] hover:text-white flex items-center gap-1">
<Check className="w-3 h-3" /> Lida
</button>
)}
</div>
</div>
))
@ -214,9 +219,13 @@ export default function Navbar({ user, activeView, setView, onLogout, settings }
<div className="relative" ref={profileRef}>
<button
onClick={() => setShowProfileMenu(!showProfileMenu)}
className="w-10 h-10 rounded-full bg-zinc-800 flex items-center justify-center text-zinc-300 hover:bg-zinc-700 transition-colors border border-white/10"
className="w-10 h-10 rounded-full bg-zinc-800 flex items-center justify-center text-zinc-300 hover:bg-zinc-700 transition-colors border border-white/10 overflow-hidden"
>
{user.avatarUrl ? (
<img src={user.avatarUrl} alt="Avatar" className="w-full h-full object-cover" />
) : (
<User className="w-5 h-5" />
)}
</button>
{showProfileMenu && (
@ -255,6 +264,11 @@ export default function Navbar({ user, activeView, setView, onLogout, settings }
</div>
</div>
</div>
{/* MOBILE NAVIGATION LINKS */}
<div className="flex md:hidden items-center space-x-6 text-sm overflow-x-auto w-full pt-3 pb-1 border-t border-white/10 scrollbar-hide">
{navLinks}
</div>
</nav>
);
}