fix(ui): mobile nav menus, light-mode contrast for Combobox, AppHeader and globals
- Studio Navbar: add hamburger button + slide-out sidebar for mobile - Studio Combobox: replace dark-hardcoded colors with light/dark variants - Experience AppHeader: fix low-contrast borders/text/icons in light mode; mobile sidebar now uses bg-white/bg-gray-900 instead of glass-only - Experience globals.css: glass-card hover visible in light mode; scrollbar thumb visible in light mode (rgba black instead of white)
This commit is contained in:
@@ -60,7 +60,7 @@ body {
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
@apply border-white/20 bg-white/5;
|
||||
@apply border-black/10 dark:border-white/20 bg-black/5 dark:bg-white/5;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
@@ -106,10 +106,18 @@ body {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
@@ -23,7 +23,7 @@ export default function AppHeader() {
|
||||
const platformName = branding?.platform_name || branding?.name || 'Academia';
|
||||
|
||||
return (
|
||||
<header className="h-16 glass sticky top-0 z-[100] px-4 md:px-6 flex items-center justify-between backdrop-blur-xl bg-gray-50/70 dark:bg-black/40 border-b border-black/5 dark:border-white/5">
|
||||
<header className="h-16 glass sticky top-0 z-[100] px-4 md:px-6 flex items-center justify-between backdrop-blur-xl bg-gray-50/80 dark:bg-black/40 border-b border-black/8 dark:border-white/5">
|
||||
<Link href="/" className="flex items-center gap-2 md:gap-5 group" aria-label={`${platformName} - Dashboard`}>
|
||||
<div className={`rounded-lg md:rounded-xl bg-blue-600 flex items-center justify-center font-black text-white shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all overflow-hidden relative border border-white/5 ${branding?.logo_variant === 'wide' ? 'w-36 h-9 md:w-56 md:h-12 px-2 bg-white' : 'w-8 h-8 md:w-12 md:h-12'}`}>
|
||||
{branding?.logo_url ? (
|
||||
@@ -46,13 +46,13 @@ export default function AppHeader() {
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<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-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white">
|
||||
<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')}
|
||||
</Link>
|
||||
<Link href="/my-learning" className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-slate-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white">
|
||||
<Link href="/my-learning" 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.myLearning')}
|
||||
</Link>
|
||||
<Link href="/bookmarks" className="flex items-center gap-2 text-base font-black uppercase tracking-wider transition-colors text-slate-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white">
|
||||
<Link href="/bookmarks" 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.bookmarks')}
|
||||
</Link>
|
||||
|
||||
@@ -66,14 +66,14 @@ export default function AppHeader() {
|
||||
<div className="flex items-center gap-2 md:gap-4">
|
||||
<NotificationCenter />
|
||||
|
||||
<div className="hidden sm:flex items-center gap-2 border-l border-white/10 pl-4">
|
||||
<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" />
|
||||
<select
|
||||
id="language-selector"
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
aria-label={t('nav.selectLanguage') || 'Select Language'}
|
||||
className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-500 hover:text-white transition-colors focus:outline-none cursor-pointer"
|
||||
className="bg-transparent text-[10px] font-black uppercase tracking-widest text-gray-600 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors focus:outline-none cursor-pointer"
|
||||
>
|
||||
<option value="en" className="bg-white dark:bg-[#0f1115]">EN</option>
|
||||
<option value="es" className="bg-white dark:bg-[#0f1115]">ES</option>
|
||||
@@ -83,21 +83,21 @@ export default function AppHeader() {
|
||||
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 hover:bg-white/5 rounded-lg text-gray-400 hover:text-white transition-all border-l border-white/10 pl-4"
|
||||
className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-all border-l border-black/10 dark:border-white/10 pl-4"
|
||||
title={theme === 'dark' ? 'Modo Claro' : 'Modo Oscuro'}
|
||||
>
|
||||
{theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
|
||||
</button>
|
||||
|
||||
<div className="hidden md:flex items-center gap-4 pl-4 border-l border-white/10">
|
||||
<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-white/5 border border-white/10 flex items-center justify-center font-bold text-xs text-blue-400 group-hover/profile:border-blue-500/50 transition-colors">
|
||||
<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'}
|
||||
</div>
|
||||
</Link>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="p-2 hover:bg-red-500/10 rounded-full text-gray-400 hover:text-red-400 transition-colors"
|
||||
className="p-2 hover:bg-red-500/10 rounded-full text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
|
||||
title={t('nav.signOut')}
|
||||
aria-label={t('nav.signOut')}
|
||||
>
|
||||
@@ -120,46 +120,46 @@ export default function AppHeader() {
|
||||
{/* Mobile Sidebar Overlay */}
|
||||
{isMenuOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-[150] md:hidden bg-black/60 backdrop-blur-sm animate-in fade-in duration-300"
|
||||
className="fixed inset-0 z-[150] md:hidden bg-black/50 backdrop-blur-sm animate-in fade-in duration-300"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<div
|
||||
className="absolute right-0 top-0 bottom-0 w-64 glass border-l border-white/10 p-6 flex flex-col animate-in slide-in-from-right duration-300"
|
||||
className="absolute right-0 top-0 bottom-0 w-72 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-white/10 p-6 flex flex-col animate-in slide-in-from-right duration-300 shadow-2xl"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Menú móvil"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<span className="font-black text-xs uppercase tracking-[0.2em] text-gray-500">Menú</span>
|
||||
<span className="font-black text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">Menú</span>
|
||||
<button
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="p-2 hover:bg-white/5 rounded-lg"
|
||||
aria-label="Close menu"
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-white/5 rounded-lg text-gray-500 dark:text-gray-400 transition-colors"
|
||||
aria-label="Cerrar menú"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="flex flex-col gap-6 flex-1" aria-label="Mobile navigation">
|
||||
<nav className="flex flex-col gap-2 flex-1" aria-label="Mobile navigation">
|
||||
<Link
|
||||
href="/"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="text-sm font-black uppercase tracking-widest text-gray-300 hover:text-white border-l-2 border-transparent hover:border-blue-500 pl-4 transition-all"
|
||||
className="text-sm font-black uppercase tracking-widest text-slate-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white border-l-2 border-transparent hover:border-blue-500 pl-4 py-2 transition-all"
|
||||
>
|
||||
{t('nav.catalog')}
|
||||
</Link>
|
||||
<Link
|
||||
href="/my-learning"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="text-sm font-black uppercase tracking-widest text-gray-300 hover:text-white border-l-2 border-transparent hover:border-blue-500 pl-4 transition-all"
|
||||
className="text-sm font-black uppercase tracking-widest text-slate-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white border-l-2 border-transparent hover:border-blue-500 pl-4 py-2 transition-all"
|
||||
>
|
||||
{t('nav.myLearning')}
|
||||
</Link>
|
||||
<Link
|
||||
href="/bookmarks"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="text-sm font-black uppercase tracking-widest text-gray-300 hover:text-white border-l-2 border-transparent hover:border-blue-500 pl-4 transition-all"
|
||||
className="text-sm font-black uppercase tracking-widest text-slate-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-white border-l-2 border-transparent hover:border-blue-500 pl-4 py-2 transition-all"
|
||||
>
|
||||
{t('nav.bookmarks')}
|
||||
</Link>
|
||||
@@ -167,22 +167,22 @@ export default function AppHeader() {
|
||||
<Link
|
||||
href={`/profile/${user.id}`}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="text-sm font-black uppercase tracking-widest text-blue-400 hover:text-blue-300 border-l-2 border-transparent hover:border-blue-500 pl-4 transition-all"
|
||||
className="text-sm font-black uppercase tracking-widest text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 border-l-2 border-transparent hover:border-blue-500 pl-4 py-2 transition-all"
|
||||
>
|
||||
MI PORTAFOLIO
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<div className="pt-6 mt-6 border-t border-white/5 space-y-4">
|
||||
<div className="flex items-center justify-between px-4 py-2 rounded-xl bg-white/5">
|
||||
<div className="pt-6 mt-6 border-t border-gray-100 dark:border-white/5 space-y-4">
|
||||
<div className="flex items-center justify-between px-4 py-2 rounded-xl bg-gray-100 dark:bg-white/5">
|
||||
<div className="flex items-center gap-3">
|
||||
<Globe size={16} className="text-gray-500" aria-hidden="true" />
|
||||
<Globe size={16} className="text-gray-400" aria-hidden="true" />
|
||||
<select
|
||||
id="mobile-language-selector"
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
aria-label={t('nav.selectLanguage') || 'Select Language'}
|
||||
className="bg-transparent text-xs font-bold uppercase tracking-widest text-gray-300 focus:outline-none"
|
||||
className="bg-transparent text-xs font-bold uppercase tracking-widest text-gray-700 dark:text-gray-300 focus:outline-none"
|
||||
>
|
||||
<option value="en" className="bg-white dark:bg-[#0f1115]">English</option>
|
||||
<option value="es" className="bg-white dark:bg-[#0f1115]">Español</option>
|
||||
@@ -191,7 +191,7 @@ export default function AppHeader() {
|
||||
</div>
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 hover:bg-white/10 rounded-lg text-gray-400 transition-colors"
|
||||
className="p-2 hover:bg-gray-200 dark:hover:bg-white/10 rounded-lg text-gray-500 dark:text-gray-400 transition-colors"
|
||||
>
|
||||
{theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
|
||||
</button>
|
||||
@@ -199,20 +199,20 @@ export default function AppHeader() {
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="pt-6 border-t border-white/5 space-y-4">
|
||||
<div className="pt-6 border-t border-gray-100 dark:border-white/5 space-y-2">
|
||||
<Link
|
||||
href="/profile"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-white/5 transition-colors"
|
||||
className="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-gray-100 dark:hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center font-bold text-xs text-blue-400" aria-hidden="true">
|
||||
<div className="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-500/20 flex items-center justify-center font-bold text-xs text-blue-600 dark:text-blue-400" aria-hidden="true">
|
||||
{user?.full_name?.charAt(0) || 'U'}
|
||||
</div>
|
||||
<span className="text-sm font-bold">{user?.full_name || 'Mi Perfil'}</span>
|
||||
<span className="text-sm font-bold text-gray-800 dark:text-white">{user?.full_name || 'Mi Perfil'}</span>
|
||||
</Link>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-red-400 hover:bg-red-500/10 transition-colors"
|
||||
className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
<LogOut size={18} aria-hidden="true" />
|
||||
<span className="text-sm font-bold">{t('nav.signOut')}</span>
|
||||
|
||||
@@ -45,17 +45,17 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={isOpen}
|
||||
className="flex items-center justify-between w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 cursor-pointer hover:border-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50"
|
||||
className="flex items-center justify-between w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/10 rounded-lg px-4 py-2.5 cursor-pointer hover:border-gray-400 dark:hover:border-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50"
|
||||
>
|
||||
<span className={selectedOption ? "text-white" : "text-gray-500"}>
|
||||
<span className={selectedOption ? "text-gray-900 dark:text-white" : "text-gray-400 dark:text-gray-500"}>
|
||||
{selectedOption ? selectedOption.name : placeholder}
|
||||
</span>
|
||||
<ChevronDown size={18} className={`text-gray-500 transition-transform ${isOpen ? "rotate-180" : ""}`} aria-hidden="true" />
|
||||
<ChevronDown size={18} className={`text-gray-400 dark:text-gray-500 transition-transform ${isOpen ? "rotate-180" : ""}`} aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute top-full left-0 right-0 mt-2 z-[110] bg-[#1a1d23] border border-white/10 rounded-lg shadow-2xl overflow-hidden glass-card animate-in fade-in slide-in-from-top-2 duration-200">
|
||||
<div className="p-2 border-b border-white/5 bg-white/5">
|
||||
<div className="absolute top-full left-0 right-0 mt-2 z-[110] bg-white dark:bg-[#1a1d23] border border-gray-200 dark:border-white/10 rounded-lg shadow-2xl overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
|
||||
<div className="p-2 border-b border-gray-100 dark:border-white/5 bg-gray-50 dark:bg-white/5">
|
||||
<div className="relative">
|
||||
<Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" aria-hidden="true" />
|
||||
<input
|
||||
@@ -65,8 +65,8 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="true"
|
||||
aria-controls="combobox-options"
|
||||
className="w-full bg-black/20 border-none rounded-md pl-9 pr-4 py-2 text-sm focus:ring-0 placeholder:text-gray-600"
|
||||
placeholder="Search..."
|
||||
className="w-full bg-white dark:bg-black/20 border border-gray-200 dark:border-transparent rounded-md pl-9 pr-4 py-2 text-sm text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500/50"
|
||||
placeholder="Buscar..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
@@ -78,7 +78,7 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
|
||||
className="max-h-60 overflow-y-auto p-1 custom-scrollbar"
|
||||
>
|
||||
{filteredOptions.length === 0 ? (
|
||||
<div className="px-4 py-3 text-sm text-gray-500 text-center" role="option" aria-disabled="true">No results found</div>
|
||||
<div className="px-4 py-3 text-sm text-gray-500 dark:text-gray-500 text-center" role="option" aria-disabled="true">Sin resultados</div>
|
||||
) : (
|
||||
filteredOptions.map(option => (
|
||||
<div
|
||||
@@ -98,7 +98,9 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
|
||||
setSearch("");
|
||||
}
|
||||
}}
|
||||
className={`flex items-center justify-between px-3 py-2 rounded-md cursor-pointer transition-colors outline-none focus:bg-blue-600 focus:text-white ${value === option.id ? "bg-blue-600 text-white" : "hover:bg-white/5 text-gray-300"
|
||||
className={`flex items-center justify-between px-3 py-2 rounded-md cursor-pointer transition-colors outline-none focus:bg-blue-600 focus:text-white ${value === option.id
|
||||
? "bg-blue-600 text-white"
|
||||
: "hover:bg-gray-100 dark:hover:bg-white/5 text-gray-700 dark:text-gray-300"
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm font-medium">{option.name}</span>
|
||||
|
||||
@@ -4,7 +4,7 @@ import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { useTranslation } from '@/context/I18nContext';
|
||||
import { LayoutDashboard, ShieldCheck, LogOut, Settings, Globe, Library, BookOpen, Sun, Moon, ChevronDown, FileQuestion, Webhook, User } from 'lucide-react';
|
||||
import { LayoutDashboard, ShieldCheck, LogOut, Settings, Globe, Library, BookOpen, Sun, Moon, ChevronDown, FileQuestion, Webhook, User, Menu, X } from 'lucide-react';
|
||||
import { useBranding } from '@/context/BrandingContext';
|
||||
import { useTheme } from '@/context/ThemeContext';
|
||||
import { getImageUrl } from '@/lib/api';
|
||||
@@ -19,6 +19,10 @@ const NAV_LINK_ADMIN = "flex items-center gap-2 text-sm font-bold uppercase trac
|
||||
// Dropdown menu item
|
||||
const DROPDOWN_ITEM = "flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors";
|
||||
|
||||
// Mobile sidebar link
|
||||
const MOBILE_LINK = "flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold uppercase tracking-wide transition-colors text-slate-700 dark:text-gray-300 hover:bg-black/5 dark:hover:bg-white/5 hover:text-blue-600 dark:hover:text-blue-400";
|
||||
const MOBILE_LINK_ADMIN = "flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold uppercase tracking-wide transition-colors text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-500/10";
|
||||
|
||||
export function Navbar() {
|
||||
const { t, language, setLanguage } = useTranslation();
|
||||
const { user, logout } = useAuth();
|
||||
@@ -27,6 +31,7 @@ export function Navbar() {
|
||||
|
||||
const [coursesOpen, setCoursesOpen] = useState(false);
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
|
||||
const platformName = branding?.platform_name || branding?.name || 'Studio';
|
||||
|
||||
@@ -55,8 +60,8 @@ export function Navbar() {
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{/* Primary Navigation */}
|
||||
<div className="flex items-center gap-6">
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex items-center gap-6">
|
||||
<div className="flex items-center gap-5">
|
||||
|
||||
{/* Cursos Dropdown */}
|
||||
@@ -242,7 +247,135 @@ export function Navbar() {
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile: Hamburger button */}
|
||||
<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"
|
||||
aria-label="Abrir menú"
|
||||
aria-expanded={mobileOpen}
|
||||
>
|
||||
<Menu className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Sidebar Overlay */}
|
||||
{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)}
|
||||
>
|
||||
<div
|
||||
className="absolute right-0 top-0 bottom-0 w-72 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-white/10 flex flex-col animate-in slide-in-from-right duration-300 shadow-2xl"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Menú de navegación"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 dark:border-white/10">
|
||||
<span className="font-black text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">Menú</span>
|
||||
<button
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 text-gray-500 dark:text-gray-400 transition-colors"
|
||||
aria-label="Cerrar menú"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Nav links */}
|
||||
<nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1">
|
||||
<p className="px-4 pt-2 pb-1 text-[10px] font-black uppercase tracking-[0.15em] text-gray-400 dark:text-gray-600">Cursos</p>
|
||||
<Link href="/" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
|
||||
<LayoutDashboard className="w-4 h-4 shrink-0" /> Listar Cursos
|
||||
</Link>
|
||||
<Link href="/library/assets" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
|
||||
<Library className="w-4 h-4 shrink-0" /> Librería
|
||||
</Link>
|
||||
<Link href="/question-bank" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
|
||||
<FileQuestion className="w-4 h-4 shrink-0" /> Banco de Preguntas
|
||||
</Link>
|
||||
<Link href="/test-templates" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
|
||||
<FileQuestion className="w-4 h-4 shrink-0" /> Plantillas de Pruebas
|
||||
</Link>
|
||||
<Link href="/course-templates" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
|
||||
<BookOpen className="w-4 h-4 shrink-0" /> Plantillas de Curso
|
||||
</Link>
|
||||
|
||||
{user?.role === 'admin' && (
|
||||
<>
|
||||
<div className="my-2 border-t border-gray-100 dark:border-white/10" />
|
||||
<p className="px-4 pt-2 pb-1 text-[10px] font-black uppercase tracking-[0.15em] text-gray-400 dark:text-gray-600">Administración</p>
|
||||
{user.organization_id === '00000000-0000-0000-0000-000000000001' && (
|
||||
<Link href="/admin" className={MOBILE_LINK_ADMIN} onClick={() => setMobileOpen(false)}>
|
||||
<ShieldCheck className="w-4 h-4 shrink-0" /> Control Global
|
||||
</Link>
|
||||
)}
|
||||
<Link href="/settings/webhooks" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
|
||||
<Webhook className="w-4 h-4 shrink-0" /> Webhooks
|
||||
</Link>
|
||||
<Link href="/settings" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
|
||||
<Settings className="w-4 h-4 shrink-0" /> Configuración
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
{user?.role !== 'admin' && (
|
||||
<>
|
||||
<div className="my-2 border-t border-gray-100 dark:border-white/10" />
|
||||
<Link href="/settings" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
|
||||
<Settings className="w-4 h-4 shrink-0" /> Configuración
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
<Link href="/profile" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
|
||||
<User className="w-4 h-4 shrink-0" /> Perfil
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-5 py-4 border-t border-gray-100 dark:border-white/10 space-y-3">
|
||||
{user && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-bold text-gray-900 dark:text-white leading-tight">{user.full_name}</p>
|
||||
<p className="text-xs uppercase tracking-widest font-bold text-gray-400 dark:text-gray-500">{user.role}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { logout(); setMobileOpen(false); }}
|
||||
className="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-500/10 text-gray-400 hover:text-red-500 transition-colors"
|
||||
aria-label={t('nav.signOut') || 'Cerrar sesión'}
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="flex items-center gap-2 text-sm font-bold text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
{theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
||||
{theme === 'dark' ? 'Modo Claro' : 'Modo Oscuro'}
|
||||
</button>
|
||||
<div className="flex items-center gap-1.5 text-gray-500">
|
||||
<Globe className="w-3.5 h-3.5" />
|
||||
<select
|
||||
value={language}
|
||||
onChange={(e) => setLanguage(e.target.value)}
|
||||
aria-label="Idioma"
|
||||
className="bg-transparent text-xs font-bold uppercase tracking-widest focus:outline-none cursor-pointer"
|
||||
>
|
||||
<option value="en" className="bg-white dark:bg-gray-900">EN</option>
|
||||
<option value="es" className="bg-white dark:bg-gray-900">ES</option>
|
||||
<option value="pt" className="bg-white dark:bg-gray-900">PT</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user