feat: Initial commit - Hladinator (Water Reservoir Dashboard)

- Setup React project with Vite and TypeScript - Built dynamic UI supporting Dark/Light mode and CS/EN localization - Added Lakes Overview grid with mock data for 40+ reservoirs - Created interactive Recharts charts for water levels and flow rates - Designed fully responsive premium mobile layout with custom SVG KPIs - Developed TypeScript scraper scripts to fetch reservoir data
2026-06-05 21:36:38 +02:00
parent ac43c24f20
commit a5bd4985d1
22 changed files with 4369 additions and 958 deletions
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { FiDroplet, FiStar, FiMap, FiSettings, FiMenu, FiChevronLeft, FiChevronRight } from 'react-icons/fi';
+import { type Language, t } from '../translations';
+
+interface Props {
+  language: Language;
+  onOpenSettings: () => void;
+  activeView: 'overview' | 'detail';
+  onNavigate: (view: 'overview' | 'detail') => void;
+  isMobileMenuOpen?: boolean;
+  onCloseMobileMenu?: () => void;
+}
+
+const Sidebar = ({ language, onOpenSettings, activeView, onNavigate, isMobileMenuOpen, onCloseMobileMenu }: Props) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const dict = t[language].sidebar;
+
+  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 ${activeView === 'detail' ? 'active' : ''}`} onClick={() => onNavigate('detail')}>
+          <FiStar />
+          <span className="sidebar-text">{dict.favorites}</span>
+        </div>
+        <div className={`nav-item ${activeView === 'overview' ? 'active' : ''}`} onClick={() => onNavigate('overview')}>
+          <FiMenu />
+          <span className="sidebar-text">{dict.lakes}</span>
+        </div>
+        <div className="nav-item">
+          <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;