My Angular 17 mat-toolbar on dektop screens looks right, now for mobile screens I want to replace the links with a mat menu on the left side of the mat-toolbar, sadly the mat-menu displays below the other components of my default-layout.component.ts:

default-layout.component:

<app-navbar></app-navbar>
<div cdkScrollable class="default-side-margin"> <!-- Tried fixing it with cdkScrollable -->
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

navbar.component.ts:

<mat-toolbar color="primary" role="heading">
  <mat-menu #appMenu="matMenu" [overlapTrigger]="true" xPosition="before"
            yPosition="below">
    <button mat-menu-item routerLink="/home">Home</button>
    <button mat-menu-item routerLink="/about">About</button>
  </mat-menu>

  @if (isSmallScreen) {
    <button [matMenuTriggerFor]="appMenu" mat-icon-button>
      <mat-icon>menu</mat-icon>
    </button>
  }

  <div id="navbar-left">
    <a id="navbar-title" routerLink="/home">Navnest</a>
    <a class="navbar-link" routerLink="/home">Home</a>
    <a class="navbar-link" routerLink="/about">About</a>
  </div>

  <span class="navbar-spacer"></span>

  <button aria-label="Search" mat-icon-button routerLink="/search">
    <mat-icon>search</mat-icon>
  </button>
  <button aria-label="Account" mat-icon-button routerLink="/account">
    <mat-icon>account_circle</mat-icon>
  </button>
</mat-toolbar>

#navbar-left {
  display: flex;
  justify-content: center;

  #navbar-title {
    font-family: sans-serif;
    font-size: 1em;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    margin-right: 1em;
  }

  .navbar-link {
    font-family: sans-serif;
    font-size: 1em;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    margin-left: 1em;
  }
}

.navbar-spacer {
  flex: 1 1 auto;
}

@media screen and (max-width: 600px) {
  #navbar-left {
    justify-content: flex-start;
  }

  .navbar-link {
    display: none;
  }

  .mat-menu {
    display: block;
  }
}

import { Component, OnInit } from '@angular/core';
import { MatToolbar } from '@angular/material/toolbar';
import { MatIcon } from '@angular/material/icon';
import { MatButton, MatIconButton } from '@angular/material/button';
import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
import { MatFormField, MatSuffix } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { ScrollStrategyOptions } from '@angular/cdk/overlay';

@Component({
  selector: 'app-navbar',
  standalone: true,
  imports: [
    MatToolbar,
    MatIcon,
    MatIconButton,
    MatMenu,
    MatMenuTrigger,
    MatMenuItem,
    MatFormField,
    MatInput,
    MatButton,
    MatSuffix,
    RouterLink,
    RouterLinkActive,
  ],
  templateUrl: './navbar.component.html',
  styleUrl: './navbar.component.scss',
})
export class NavbarComponent implements OnInit {
  isSmallScreen = false;

  constructor(
    private breakpointObserver: BreakpointObserver,
    public scrollStrategy: ScrollStrategyOptions,
  ) {}

  ngOnInit() {
    this.breakpointObserver
      .observe([Breakpoints.Small, Breakpoints.XSmall])
      .subscribe((result) => {
        this.isSmallScreen = result.matches;
      });
  }
}

Now how can I place the mat-menu right below of the menu button?