Corrigido navegação mobile, exclusão visual de notificações lidas e exibição da foto do perfil do aluno no NavBar

src/App.tsx

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

src/components/Navbar.tsx

@@ -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 
+          {navLinks}
-            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>
         </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>
   );
 }