perf: Avoid redundant getTotalItems() calls in Navigation component

User Story

As a shopper,
I want the cart item count badge in the navigation bar to update instantly and efficiently,
so that navigating the site feels snappy regardless of cart size.

Problem

In Navigation.tsx, getTotalItems() is called twice per render — once for the conditional check and once to display the value. Each call iterates the full cart items array via Array.reduce().

// Current — two reduce() calls per render
{getTotalItems() > 0 && (
  <span>
    {getTotalItems()}   {/* second call */}
  </span>
)}

Acceptance Criteria

• getTotalItems() is called at most once per render in the Navigation component (store result in a variable)
• The cart badge displays the correct total item count
• If the total is 0, the badge remains hidden (same as current behavior)
• No change to visible behavior for the user

Note: This issue is low complexity and a good candidate for a first contribution. It can be implemented in parallel with the other performance issues.

Files

• frontend/src/components/Navigation.tsx

Open frontend/src/components/Navigation.tsx and inspect how getTotalItems() is used during rendering. Store the result so the conditional and badge use one calculation, then verify the badge still shows the correct total and stays hidden when the total is 0.