# App-layout


## Examples

### Default

```html
<m-app-layout>
      <m-app-header slot="header">
        <m-app-menu
          slot="app-menu"
          id="app-menu"
          .items=${[
            {
              heading: "Your applications",
              apps: [
                {
                  name: "Talentrekry",
                  id: "talentrekry",
                  description: "Recruitment",
                  href: "/talentrekry",
                  selected: false,
                },
              ],
            },
          ]}></m-app-menu>
        <a slot="logo" href="/portal" class="logo">
          <img src="/grade-logo-dark.svg" alt="Grade" height="24" />
        </a>
        <m-button slot="additional-navigation" size="s" variant="plain" href="#" target="_blank">
          Support
          <m-icon slot="end" name="external"></m-icon>
        </m-button>
        <a slot="navigation" href="/portal" aria-current="page">Your tools</a>
      </m-app-header>

      <m-view sr-label="Main content area">
        <m-section>
          <h1 slot="title">Main Content</h1>
          <p slot="description">This is the main content area of the application. It will grow to fill the available space.</p>
        </m-section>
      </m-view>

      <m-app-footer slot="footer">
        <a slot="left" href="/status">Status</a>
        <a slot="left" href="/cookies">Cookies</a>
        <a slot="left" href="/privacy">Data Privacy</a>
        <a slot="left" href="/accessibility">Accessibility</a>
        <div slot="right">Copyright © 2024 Grade. All rights reserved.</div>
      </m-app-footer>
    </m-app-layout>
```