Core UI Layout

Relevant source files

The following files were used as context for generating this wiki page:

• marketplace-frontend/src/app/components/market-header/market-header.component.html
• marketplace-frontend/src/app/components/market-footer/market-footer.component.html
• marketplace-frontend/src/app/app.component.less
• marketplace-frontend/src/app/styles/shared-components/market-header.less
• marketplace-frontend/src/app/styles/shared-components/market-footer.less
• marketplace-frontend/src/app/styles/common/media.less

The Core UI Layout defines the structural foundation of the marketplace frontend application. It establishes a consistent user interface through a fixed header, a responsive navigation system, a flexible content area, and a centered footer. This layout manages spatial relationships between components and adapts to different screen resolutions using defined media queries.

Sources: marketplace-frontend/src/app/app.component.less:1-49, marketplace-frontend/src/app/styles/common/media.less:1-17

Layout Architecture

The application uses an Angular-based component structure wrapped in a main container. The app-wrapper manages the primary layout flow, utilizing Angular Material's drawer system for navigation and a standard block-level structure for the main content and footer.

The diagram shows the hierarchical relationship of the core layout components within the application wrapper.
Sources: marketplace-frontend/src/app/app.component.less:37-49, marketplace-frontend/src/app/components/market-header/market-header.component.html:1-74

Component Specifications

Market Header

The header is a fixed-position element at the top of the viewport. It contains the application title, a burger menu for navigation control, and a user actions area.

• Positioning: Uses position: fixed with a high z-index to remain above other content.
• Navigation: Includes a checkbox-driven burger menu that triggers the sidenav.
• User Actions: Displays user information, account links, and language selection when a user is authenticated.

Sources: marketplace-frontend/src/app/styles/shared-components/market-header.less:1-12, marketplace-frontend/src/app/components/market-header/market-header.component.html:3-33

Market Footer

The footer provides a standardized bottom section with legal and versioning information. It centers its content within a maximum width of 1280px.

Sources: marketplace-frontend/src/app/styles/shared-components/market-footer.less:1-20, marketplace-frontend/src/app/components/market-footer/market-footer.component.html:1-5

Sidenav and Content Area

The app-wrapper__sidenav has a standard width of 300px, which reduces to 256px on extra-small screens. The app-wrapper__content uses flexbox to occupy the remaining space.

Sources: marketplace-frontend/src/app/app.component.less:5-35

Responsive Design Breakpoints

The layout adapts to different devices using a set of LESS-based media query variables.

Variable	Media Query Condition	Description
@xsmall	max-width: 599px	Mobile devices and small screens
@small	min-width: 600px and max-width: 959px	Tablets in portrait mode
@medium	min-width: 960px and max-width: 1279px	Large tablets and small laptops
@large	min-width: 1280px	Standard desktop resolutions
@extra-large	min-width: 1920px	High-resolution monitors

Sources: marketplace-frontend/src/app/styles/common/media.less:1-17

Visual Styling and Layout Constants

The layout relies on shared variables for consistent sizing and depth.

/* Header specific styles from market-header.less */
.market-header {
    height: @header-height;
    z-index: 2;
    inset: 0;
    box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 
                0 6px 10px 0 rgb(0 0 0 / 14%), 
                0 1px 18px 0 rgb(0 0 0 / 12%);
}

/* Container overrides from app.component.less */
.mat-drawer-container {
    position: absolute;
    inset: @header-height 0 0;
}

Sources: marketplace-frontend/src/app/styles/shared-components/market-header.less:1-12, marketplace-frontend/src/app/app.component.less:39-42

Layout Logic Flow

The following sequence illustrates how the UI components interact when a user opens the navigation or interacts with the header.

The sequence shows the interaction between the header controls and the visibility of layout elements.
Sources: marketplace-frontend/src/app/components/market-header/market-header.component.html:8-44, marketplace-frontend/src/app/app.component.less:7-20

Summary

The Core UI Layout provides a stable framework for the Marketplace application. By utilizing fixed headers, responsive breakpoints, and the Angular Material drawer system, it ensures that the interface remains functional and navigable across diverse device types.