Angular CDK menu overlay at the wrong position

I am creating a flex navbar for my app with a profile picture on the right side of the navbar. When clicking on it I use an angular cdk menu to create a dropdown menu but the dropdown menu appear at the bottom left of the application.

I made a stackblitz to show how my app work: https://stackblitz.com/edit/new-project-jwqzfq?file=src/app/form-field-overview-example.html

How to make the dropdown menu appear at the right place?

Continue reading...