feat: update water level metrics and optimize sidebar UI layout

src/App.css

@@ -7,12 +7,12 @@
 }
 
 .sidebar {
-  width: 250px;
+  width: 190px;
   background-color: var(--bg-card);
   border-right: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
-  padding: 1.5rem 1rem;
+  padding: 1.5rem 0.75rem;
   transition: width 0.3s ease;
   overflow: hidden;
 }
@@ -75,8 +75,8 @@
 .nav-item {
   display: flex;
   align-items: center;
-  gap: 1rem;
-  padding: 0.75rem 1rem;
+  gap: 0.75rem;
+  padding: 0.75rem 0.5rem;
   border-radius: 0.5rem;
   color: var(--text-muted);
   font-size: 0.95rem;
@@ -86,6 +86,11 @@
   white-space: nowrap;
 }
 
+.nav-item svg {
+  flex-shrink: 0;
+  min-width: 20px;
+}
+
 .nav-item:hover {
   background-color: rgba(255, 255, 255, 0.03);
   color: var(--text-main);