Feature: Add Main Layout with mat-toolbar, router-outlet, and Footer

[esthersoftwaredev]

Type of feature

✨ Feature

Description

Create the main layout for the application by adding a mat-toolbar at the top, a router-outlet for dynamic content display in the center, and a footer at the bottom. This will provide a structured layout for consistent navigation and content presentation across all pages.

Tasks:

1. mat-toolbar

   • Add Angular Material's mat-toolbar at the top of the layout for the application's main header.
   • The toolbar should include the application title and any navigation or action buttons (if necessary).

2. router-outlet

   • Set up the router-outlet in the center of the layout to dynamically display the routed components based on the active route.
   • Ensure the layout allows the router-outlet to occupy the central portion of the page, with the toolbar at the top and footer at the bottom.

3. Footer

   • Add a footer component at the bottom of the layout with relevant links or information.
   • Ensure the footer stays at the bottom of the page, even when there’s little content in the router-outlet (sticky footer).

---

Expected Outcome:

The application should have a consistent layout with a header (mat-toolbar), dynamic content area (router-outlet), and footer. The layout should be responsive, maintaining its structure across different screen sizes.

Additional context

No response

I would be willing to submit a PR to fix this issue

• Yes and I have read the Contribution Guide and I agree to follow this project's Code of Conduct
• No

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

For full info on how to contribute, please check out our contributors guide.