fix(auth-ui): hide private navigation links until user logs in

web/experience/src/components/AppHeader.tsx

@@ -10,7 +10,7 @@ import NotificationCenter from "./NotificationCenter";
 import { useState } from "react";
 import { useTheme } from "@/context/ThemeContext";
 
-import { lmsApi, getImageUrl } from "@/lib/api";
+import { getImageUrl } from "@/lib/api";
 
 export default function AppHeader() {
     const { t, language, setLanguage } = useTranslation();
@@ -46,6 +46,7 @@ export default function AppHeader() {
             </Link>
 
             <div className="flex items-center gap-4">
+                {user && (
                     <nav className="hidden md:flex items-center gap-8 mr-4" aria-label="Navegación principal">
                         <Link href="/" className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-slate-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white">
                             {t('nav.catalog')}
@@ -57,15 +58,14 @@ export default function AppHeader() {
                             {t('nav.bookmarks')}
                         </Link>
 
-                    {user && (
                         <Link href={`/profile/${user.id}`} className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
                             MI PORTAFOLIO
                         </Link>
-                    )}
                     </nav>
+                )}
 
                 <div className="flex items-center gap-2 md:gap-4">
-                    <NotificationCenter />
+                    {user && <NotificationCenter />}
 
                     <div className="hidden sm:flex items-center gap-2 border-l border-black/10 dark:border-white/10 pl-4">
                         <Globe size={14} className="text-gray-500" aria-hidden="true" />
@@ -90,10 +90,11 @@ export default function AppHeader() {
                         {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
                     </button>
 
+                    {user ? (
                         <div className="hidden md:flex items-center gap-4 pl-4 border-l border-black/10 dark:border-white/10">
                             <Link href="/profile" className="flex items-center gap-2 group/profile">
                                 <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-white/5 border border-gray-300 dark:border-white/10 flex items-center justify-center font-bold text-xs text-blue-600 dark:text-blue-400 group-hover/profile:border-blue-500/50 transition-colors">
-                                {user?.full_name?.charAt(0) || 'U'}
+                                    {user.full_name?.charAt(0) || 'U'}
                                 </div>
                             </Link>
                             <button
@@ -105,8 +106,12 @@ export default function AppHeader() {
                                 <LogOut size={16} />
                             </button>
                         </div>
+                    ) : (
+                        <Link href="/auth/login" className="hidden md:inline-flex text-sm font-bold text-blue-600 hover:text-blue-500 transition-colors">Sign In</Link>
+                    )}
 
                     {/* Mobile Menu Button */}
+                    {user && (
                         <button
                             onClick={() => setIsMenuOpen(!isMenuOpen)}
                             className="md:hidden p-2 hover:bg-white/5 rounded-lg text-gray-400 transition-colors"
@@ -115,6 +120,7 @@ export default function AppHeader() {
                         >
                             {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
                         </button>
+                    )}
                 </div>
             </div>
             </header>

web/studio/src/components/Navbar.tsx

@@ -63,6 +63,7 @@ export function Navbar() {
 
                 {/* Desktop Navigation */}
                 <div className="hidden md:flex items-center gap-6">
+                    {user && (
                     <div className="flex items-center gap-5">
 
                         {/* Cursos Dropdown */}
@@ -195,8 +196,9 @@ export function Navbar() {
                             </Link>
                         )}
                     </div>
+                    )}
 
-                    <div className="h-6 w-px bg-black/10 dark:bg-white/10 mx-1" />
+                    {user && <div className="h-6 w-px bg-black/10 dark:bg-white/10 mx-1" />}
 
                     {/* Theme Toggle */}
                     <button
@@ -250,6 +252,7 @@ export function Navbar() {
                 </div>
 
                 {/* Mobile: Hamburger button */}
+                {user && (
                     <button
                         onClick={() => setMobileOpen(true)}
                         className="md:hidden p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 text-slate-600 dark:text-gray-400 transition-colors"
@@ -258,13 +261,14 @@ export function Navbar() {
                     >
                         <Menu className="w-5 h-5" />
                     </button>
+                )}
             </div>
 
             </nav>
 
                 {/* Mobile Sidebar Overlay — fuera del <nav> para evitar que el
                     backdrop-filter cree un stacking context que confine el fixed */}
-                {mobileOpen && (
+                {user && mobileOpen && (
                 <div
                     className="fixed inset-0 z-[150] md:hidden bg-black/50 backdrop-blur-sm animate-in fade-in duration-200"
                     onClick={() => setMobileOpen(false)}