WIP

BudgetApp/Components/Layout/NavMenu.razor

@@ -1,6 +1,7 @@
 @inject AccountService AccountService
 @inject AuthenticationStateProvider AuthStateProvider
 @inject AppState AppState
+@inject NavigationManager Navigation
 @implements IDisposable
 @rendermode InteractiveServer
 
@@ -57,7 +58,7 @@
             <div class="balances-header">Balances</div>
             @foreach (var account in accounts)
             {
-                <div class="balance-item">
+                <div class="balance-item" style="cursor: pointer;" @onclick="NavigateToAccounts">
                     <div class="balance-color" style="background-color: @account.Color;"></div>
                     <div class="balance-details">
                         <span class="balance-name">@account.Name</span>
@@ -103,5 +104,10 @@
     {
         AppState.OnAccountsChanged -= HandleAccountsChanged;
     }
+
+    private void NavigateToAccounts()
+    {
+        Navigation.NavigateTo("accounts");
+    }
 }
 

BudgetApp/Components/Layout/NavMenu.razor.css

@@ -141,6 +141,12 @@
     align-items: center;
     gap: 0.5rem;
     padding: 0.35rem 0;
+    border-radius: 4px;
+    transition: background-color 0.15s;
+}
+
+.balance-item:hover {
+    background-color: rgba(255, 255, 255, 0.1);
 }
 
 .balance-color {