1.6 KiB
1.6 KiB
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
SearchButtonComponentandNavigationTracker. - 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
Modelproject (e.g.,WebsiteData.GetPages()), making it easy to add new sections. - Dark Mode: The site is designed primarily for dark mode, managed via
MudThemeProvider.