feat: update water level metrics and optimize sidebar UI layout

src/components/Sidebar.tsx

@@ -29,18 +29,19 @@ const Sidebar = ({ language, onOpenSettings, isMobileMenuOpen, onCloseMobileMenu
 
   return (
     <div className={`sidebar ${isCollapsed ? 'collapsed' : ''} ${isMobileMenuOpen ? 'mobile-open' : ''}`}>
-      <div className="sidebar-logo" style={{ position: 'relative' }}>
-        <FiDroplet />
+      <div className="sidebar-logo">
+        <FiDroplet size={28} color="var(--color-cyan)" />
         <div className="sidebar-text">
-          <span>HLADINATOR</span>
+          <span style={{ fontWeight: 'bold', letterSpacing: '0.5px', fontSize: '1.1rem' }}>HLADINATOR</span>
           <small>v1.0</small>
         </div>
-        
-        {/* Toggle Button */}
+      </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={{
-            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)'