230419/my_closet
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

telemovel!

Browse Source
This commit is contained in:
Vitor Moreira
2026-05-21 09:01:10 +01:00
parent 2608eff482
commit 81c0b534b7
1 changed files with 43 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/App.jsx
View File

@@ -36,7 +36,7 @@ export default function App() {
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [imageUrlDraft, setImageUrlDraft] = useState(''); const [imageUrlDraft, setImageUrlDraft] = useState('');
const [itemColors, setItemColors] = useState([]); const [itemColors, setItemColors] = useState([]);
const [sidebarOpen, setSidebarOpen] = useState(true); const [sidebarOpen, setSidebarOpen] = useState(window.innerWidth > 768);
const [authMode, setAuthMode] = useState('login'); const [authMode, setAuthMode] = useState('login');
const [authError, setAuthError] = useState(''); const [authError, setAuthError] = useState('');
const [showForgotPasswordModal, setShowForgotPasswordModal] = useState(false); const [showForgotPasswordModal, setShowForgotPasswordModal] = useState(false);
@@ -245,6 +245,19 @@ export default function App() {
setItemSections(editingItem?.sections || []); setItemSections(editingItem?.sections || []);
}, [editingItem]); }, [editingItem]);
// Lidar com redimensionamento de ecrã para o sidebar
useEffect(() => {
const handleResize = () => {
if (window.innerWidth < 768) {
setSidebarOpen(false);
} else {
setSidebarOpen(true);
}
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
useEffect(() => { useEffect(() => {
setLookSections(editingLook?.sections || []); setLookSections(editingLook?.sections || []);
}, [editingLook]); }, [editingLook]);
@@ -1325,7 +1338,10 @@ export default function App() {
].map(item => ( ].map(item => (
<button <button
key={item.id} key={item.id}
onClick={() => setView(item.id)} onClick={() => {
setView(item.id);
if (window.innerWidth < 768) setSidebarOpen(false);
}}
className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl transition-all font-black text-[11px] uppercase tracking-widest ${view === item.id ? 'bg-primary-600 text-white shadow-2xl shadow-primary-600/30 scale-105' : 'opacity-40 hover:opacity-100 hover:bg-primary-500/5'}`} className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl transition-all font-black text-[11px] uppercase tracking-widest ${view === item.id ? 'bg-primary-600 text-white shadow-2xl shadow-primary-600/30 scale-105' : 'opacity-40 hover:opacity-100 hover:bg-primary-500/5'}`}
> >
<item.icon size={20} /> <item.icon size={20} />
@@ -1363,16 +1379,24 @@ export default function App() {
</div> </div>
</aside> </aside>
{/* Sidebar Overlay for Mobile */}
{sidebarOpen && (
<div
className="fixed inset-0 bg-black/50 z-[90] md:hidden backdrop-blur-sm"
onClick={() => setSidebarOpen(false)}
/>
)}
{/* Área Principal */} {/* Área Principal */}
<main className="flex-1 flex flex-col h-screen overflow-hidden"> <main className="flex-1 flex flex-col h-screen overflow-hidden">
{/* Header Superior */} {/* Header Superior */}
<header className={`h-24 shrink-0 flex items-center justify-between px-8 md:px-12 transition-all border-b border-inherit ${darkMode ? 'bg-gray-950/50' : 'bg-white/50'} backdrop-blur-xl`}> <header className={`h-20 md:h-24 shrink-0 flex items-center justify-between px-4 md:px-12 transition-all border-b border-inherit ${darkMode ? 'bg-gray-950/50' : 'bg-white/50'} backdrop-blur-xl`}>
<div className="flex items-center gap-6"> <div className="flex items-center gap-3 md:gap-6">
<button onClick={() => setSidebarOpen(!sidebarOpen)} className={`p-3 rounded-2xl transition-all border ${darkMode ? 'bg-gray-800 border-gray-700' : 'bg-gray-50 border-gray-200'}`}> <button onClick={() => setSidebarOpen(!sidebarOpen)} className={`p-2 md:p-3 rounded-xl md:rounded-2xl transition-all border ${darkMode ? 'bg-gray-800 border-gray-700' : 'bg-gray-50 border-gray-200'}`}>
{sidebarOpen ? <PanelLeftClose size={24} /> : <PanelLeftOpen size={24} />} {sidebarOpen ? <PanelLeftClose size={20} className="md:w-6 md:h-6" /> : <PanelLeftOpen size={20} className="md:w-6 md:h-6" />}
</button> </button>
<h2 className="text-3xl font-black tracking-tighter"> <h2 className="text-xl md:text-3xl font-black tracking-tighter truncate max-w-[150px] md:max-w-none">
{view === 'dashboard' && t('overview')} {view === 'dashboard' && t('overview')}
{view === 'closet' && t('myCloset')} {view === 'closet' && t('myCloset')}
{view === 'wishlist' && (t('wishlist') || 'Carrinho')} {view === 'wishlist' && (t('wishlist') || 'Carrinho')}
@@ -1385,28 +1409,28 @@ export default function App() {
</h2> </h2>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-2 md:gap-4">
<button onClick={() => setShowDailyOutfitModal(true)} className="p-3 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-2xl hover:scale-105 active:scale-95 transition-all"> <button onClick={() => setShowDailyOutfitModal(true)} className="p-2 md:p-3 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-xl md:rounded-2xl hover:scale-105 active:scale-95 transition-all">
<Sparkles size={20} /> <Sparkles size={20} className="w-5 h-5 md:w-6 md:h-6" />
</button> </button>
<div className="flex bg-gray-100 dark:bg-gray-800 p-1.5 rounded-2xl"> <div className="hidden sm:flex bg-gray-100 dark:bg-gray-800 p-1.5 rounded-xl md:rounded-2xl">
<button onClick={() => handleDarkModeToggle(false)} className={`p-2 rounded-xl ${!darkMode ? 'bg-white shadow-md text-primary-600' : 'text-gray-500'}`}><Sun size={18} /></button> <button onClick={() => handleDarkModeToggle(false)} className={`p-1.5 md:p-2 rounded-lg md:rounded-xl ${!darkMode ? 'bg-white shadow-md text-primary-600' : 'text-gray-500'}`}><Sun size={16} className="md:w-[18px] md:h-[18px]" /></button>
<button onClick={() => handleDarkModeToggle(true)} className={`p-2 rounded-xl ${darkMode ? 'bg-gray-900 shadow-md text-primary-400' : 'text-gray-500'}`}><Moon size={18} /></button> <button onClick={() => handleDarkModeToggle(true)} className={`p-1.5 md:p-2 rounded-lg md:rounded-xl ${darkMode ? 'bg-gray-900 shadow-md text-primary-400' : 'text-gray-500'}`}><Moon size={16} className="md:w-[18px] md:h-[18px]" /></button>
</div> </div>
<button onClick={() => setShowNotificationsModal(true)} className="relative p-4 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-2xl hover:scale-105 active:scale-95 transition-all"> <button onClick={() => setShowNotificationsModal(true)} className="relative p-2 md:p-4 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-xl md:rounded-2xl hover:scale-105 active:scale-95 transition-all">
<Bell size={24} /> <Bell size={20} className="w-5 h-5 md:w-6 md:h-6" />
{notifications.filter(n => !n.read).length > 0 && ( {notifications.filter(n => !n.read).length > 0 && (
<span className="absolute top-2 right-2 w-3 h-3 bg-red-500 rounded-full border-2 border-white dark:border-gray-800"></span> <span className="absolute top-1 md:top-2 right-1 md:right-2 w-2.5 h-2.5 md:w-3 md:h-3 bg-red-500 rounded-full border-2 border-white dark:border-gray-800"></span>
)} )}
</button> </button>
<button onClick={() => { setEditingItem(null); setImageUrlDraft(''); setView('add'); setEditingLook(null); setSelectedForLook([]); }} className="p-4 bg-primary-600 text-white rounded-2xl shadow-xl shadow-primary-600/30 hover:scale-105 active:scale-95 transition-all"> <button onClick={() => { setEditingItem(null); setImageUrlDraft(''); setView('add'); setEditingLook(null); setSelectedForLook([]); }} className="p-2 md:p-4 bg-primary-600 text-white rounded-xl md:rounded-2xl shadow-xl shadow-primary-600/30 hover:scale-105 active:scale-95 transition-all">
<Plus size={24} /> <Plus size={20} className="w-5 h-5 md:w-6 md:h-6" />
</button> </button>
</div> </div>
</header> </header>
{/* Conteúdo Dinâmico */} {/* Conteúdo Dinâmico */}
<div className="flex-1 overflow-y-auto p-8 md:p-12 space-y-12"> <div className="flex-1 overflow-y-auto p-4 md:p-12 space-y-8 md:space-y-12">
{/* DASHBOARD */} {/* DASHBOARD */}
{view === 'dashboard' && ( {view === 'dashboard' && (