feat: implement Open-Meteo weather integration with backfill scripts and updated lake data models.

src/components/Sidebar.tsx

@@ -1,20 +1,30 @@
 import { useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
 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' | 'map';
-  onNavigate: (view: 'overview' | 'detail' | 'map') => void;
   isMobileMenuOpen?: boolean;
   onCloseMobileMenu?: () => void;
 }
 
-const Sidebar = ({ language, onOpenSettings, activeView, onNavigate, isMobileMenuOpen, onCloseMobileMenu }: Props) => {
+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' }}>
@@ -39,15 +49,15 @@ const Sidebar = ({ language, onOpenSettings, activeView, onNavigate, isMobileMen
       </div>
       
       <div className="nav-links">
-        <div className={`nav-item ${activeView === 'detail' ? 'active' : ''}`} onClick={() => onNavigate('detail')}>
+        <div className={`nav-item ${isDetail ? 'active' : ''}`} onClick={() => handleNavigate('/lipno-1')}>
           <FiStar />
           <span className="sidebar-text">{dict.favorites}</span>
         </div>
-        <div className={`nav-item ${activeView === 'overview' ? 'active' : ''}`} onClick={() => onNavigate('overview')}>
+        <div className={`nav-item ${isOverview ? 'active' : ''}`} onClick={() => handleNavigate('/')}>
           <FiMenu />
           <span className="sidebar-text">{dict.lakes}</span>
         </div>
-        <div className={`nav-item ${activeView === 'map' ? 'active' : ''}`} onClick={() => onNavigate('map')}>
+        <div className={`nav-item ${isMap ? 'active' : ''}`} onClick={() => handleNavigate('/map')}>
           <FiMap />
           <span className="sidebar-text">{dict.map}</span>
         </div>