David Fencl
77 lines
2.8 KiB
TypeScript
77 lines
2.8 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';
|
|
|
|
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 isOverview = location.pathname === '/';
|
|
const isMap = location.pathname === '/map';
|
|
const isDetail = !isOverview && !isMap;
|
|
|
|
const handleNavigate = (path: string) => {
|
|
navigate(path);
|
|
if (onCloseMobileMenu) onCloseMobileMenu();
|
|
};
|
|
|
|
return (
|
|
<div className={`sidebar ${isCollapsed ? 'collapsed' : ''} ${isMobileMenuOpen ? 'mobile-open' : ''}`}>
|
|
<div className="sidebar-logo" style={{ position: 'relative' }}>
|
|
<FiDroplet />
|
|
<div className="sidebar-text">
|
|
<span>HLADINATOR</span>
|
|
<small>v1.0</small>
|
|
</div>
|
|
|
|
{/* Toggle Button */}
|
|
<button
|
|
onClick={() => setIsCollapsed(!isCollapsed)}
|
|
style={{
|
|
position: 'absolute', right: isCollapsed ? '-16px' : '-16px', top: '50%', transform: 'translateY(-50%)',
|
|
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">
|
|
<div className={`nav-item ${isDetail ? 'active' : ''}`} onClick={() => handleNavigate('/lipno-1')}>
|
|
<FiStar />
|
|
<span className="sidebar-text">{dict.favorites}</span>
|
|
</div>
|
|
<div className={`nav-item ${isOverview ? 'active' : ''}`} onClick={() => handleNavigate('/')}>
|
|
<FiDatabase />
|
|
<span className="sidebar-text">{dict.lakes}</span>
|
|
</div>
|
|
<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;
|