# Problem Statement: QSP-39314 — App Header Logo Click Navigates to Overview

## Summary

Make the app header (logo + name) clickable so it navigates the user to `/overview` using client-side routing. This is a standard UX convention and aligns with the Dynatrace AppHeader experience standard. The implementation uses the Strato `AppHeader.Logo` polymorphic `as` prop with React Router's `Link` component.

## Acceptance Criteria

- [ ] AC-1: Clicking the app header (logo/name) from any page navigates to `/overview`.
- [ ] AC-2: Navigation uses client-side routing — no full page reload occurs.
- [ ] AC-3: The app header shows a pointer cursor on hover, indicating it is clickable.

## Key Decisions

| # | Decision | Rationale |
|---|---|---|
| D-1 | If the user is already on `/overview`, clicking the logo is a no-op. | User preference — avoids unnecessary re-renders when already on the home page. |
| D-2 | Use `Link` (from `react-router-dom`), not `NavLink`. | The logo is not a navigation tab — it should not show active-state styling (underline). `Link` provides client-side routing without active matching. |
| D-3 | Remove `<AppHeader.AppIcon />` child and use self-closing `<AppHeader.Logo />`. | Strato automatically includes the app icon and name when no children are provided. The routing examples from Strato all use the self-closing pattern. Cleaner and follows Strato convention. |

## Implementation Plan

### Step 1: Update `Header.tsx`

- **File**: `src/app/components/Header.tsx`
- **Changes**:
  1. Add `import { Link } from 'react-router-dom'`.
  2. Change `<AppHeader.Logo data-testid='nav-item-home'>` to `<AppHeader.Logo as={Link} to='/overview' data-testid='nav-item-home' />` (self-closing, no `<AppHeader.AppIcon />` child).
- **Verification**: `npm run typecheck`, `npm run lint`.

