28 lines
1.6 KiB
Markdown
28 lines
1.6 KiB
Markdown
# 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`.
|