David Fencl
108 lines
4.0 KiB
TypeScript
108 lines
4.0 KiB
TypeScript
import { useState } from 'react';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import { FiDroplet, FiStar, FiMap, FiSettings, FiChevronLeft, FiChevronRight, FiDatabase } from 'react-icons/fi';
|
|
import { type Language, t } from '../translations';
|
|
import { useFavorites } from '../hooks/useFavorites';
|
|
|
|
interface Props {
|
|
language: Language;
|
|
onOpenSettings: () => void;
|
|
isMobileMenuOpen?: boolean;
|
|
onCloseMobileMenu?: () => void;
|
|
}
|
|
|
|
const Sidebar = ({ language, onOpenSettings, isMobileMenuOpen, onCloseMobileMenu }: Props) => {
|
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const dict = t[language].sidebar;
|
|
const { favorites } = useFavorites();
|
|
|
|
const isOverview = location.pathname === '/';
|
|
const isFavoritesPage = location.pathname === '/favorites';
|
|
const isMap = location.pathname === '/map';
|
|
|
|
const handleNavigate = (path: string) => {
|
|
navigate(path);
|
|
if (onCloseMobileMenu) onCloseMobileMenu();
|
|
};
|
|
|
|
return (
|
|
<div className={`sidebar ${isCollapsed ? 'collapsed' : ''} ${isMobileMenuOpen ? 'mobile-open' : ''}`}>
|
|
<div className="sidebar-logo">
|
|
<FiDroplet size={28} color="var(--color-cyan)" />
|
|
<div className="sidebar-text">
|
|
<span style={{ fontWeight: 'bold', letterSpacing: '0.5px', fontSize: '1.1rem' }}>HLADINATOR</span>
|
|
<small>v1.0</small>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Toggle Button */}
|
|
<div style={{ display: 'flex', justifyContent: isCollapsed ? 'center' : 'flex-end', marginBottom: '1.5rem', marginTop: isCollapsed ? '1rem' : '-0.5rem' }}>
|
|
<button
|
|
onClick={() => setIsCollapsed(!isCollapsed)}
|
|
style={{
|
|
background: 'var(--bg-card)', border: '1px solid var(--border-color)', color: 'var(--text-main)',
|
|
borderRadius: '50%', width: '32px', height: '32px', display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
cursor: 'pointer', zIndex: 10, boxShadow: '0 2px 5px rgba(0,0,0,0.2)'
|
|
}}
|
|
>
|
|
{isCollapsed ? <FiChevronRight size={18} /> : <FiChevronLeft size={18} />}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="nav-links">
|
|
{/* Favourites */}
|
|
<div className={`nav-item ${isFavoritesPage ? 'active' : ''}`} onClick={() => handleNavigate('/favorites')} style={{ position: 'relative' }}>
|
|
<div style={{ position: 'relative', display: 'flex' }}>
|
|
<FiStar fill={favorites.length > 0 ? '#f59e0b' : 'none'} color={favorites.length > 0 ? '#f59e0b' : 'currentColor'} />
|
|
{favorites.length > 0 && (
|
|
<span style={{
|
|
position: 'absolute',
|
|
top: '-8px',
|
|
right: '-12px',
|
|
backgroundColor: '#f59e0b',
|
|
color: '#000',
|
|
borderRadius: '999px',
|
|
fontSize: '0.65rem',
|
|
fontWeight: 'bold',
|
|
minWidth: '16px',
|
|
height: '16px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: '0 4px',
|
|
border: '2px solid var(--bg-card)'
|
|
}}>
|
|
{favorites.length}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="sidebar-text">{dict.favorites}</span>
|
|
</div>
|
|
|
|
{/* Lakes & Reservoirs */}
|
|
<div className={`nav-item ${isOverview ? 'active' : ''}`} onClick={() => handleNavigate('/')}>
|
|
<FiDatabase />
|
|
<span className="sidebar-text">{dict.lakes}</span>
|
|
</div>
|
|
|
|
{/* Map */}
|
|
<div className={`nav-item ${isMap ? 'active' : ''}`} onClick={() => handleNavigate('/map')}>
|
|
<FiMap />
|
|
<span className="sidebar-text">{dict.map}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="sidebar-footer">
|
|
<div className="nav-item" onClick={onOpenSettings}>
|
|
<FiSettings />
|
|
<span className="sidebar-text">{dict.settings}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|