# UI Components and Layout

The application uses a modular component architecture, leveraging the **MudBlazor** library for UI elements.

## Reusable Components (`Components` project)

Shared components are located in the `Components` project, categorized by their function:

- **Display**: Components for visualizing data (e.g., `EntityIcon`, `StatDisplay`).
- **Inputs**: Specialized input fields for game data.
- **Layout**: Reusable layout sections like `FooterComponent`.
- **Navigation**: Components like `SearchButtonComponent` and `NavigationTracker`.
- **Feedback**: UI elements for user interactions like `ConfirmationDialog`.

## Key Layout Files

- **App.razor**: Configures the Blazor router and hosts global "Portals". Portals are components that stay active across all pages (e.g., `EntityDialogPortal`, `ToastPortal`).
- **PageLayout.razor**: The standard layout for all pages. It includes:
  - `MudAppBar`: The top navigation bar.
  - `MudDrawer`: A side navigation menu (primarily for mobile/small screens).
  - `MudMainContent`: The area where page-specific content is rendered.

## Design Patterns

- **Portals**: Used for dialogs and notifications to ensure they are rendered correctly in the DOM hierarchy regardless of which page is active. They listen to events from their corresponding services (e.g., `EntityDialogService`).
- **Data-Driven UI**: Navigation links and unit lists are driven by static data classes in the `Model` project (e.g., `WebsiteData.GetPages()`), making it easy to add new sections.
- **Dark Mode**: The site is designed primarily for dark mode, managed via `MudThemeProvider`.