How can I create a context menu coming out of a material sidenav ? I want the context menu to appear

[obtuse swallow]

Haven't tried it, but I would create the menu element (the one that appears when clicking) inside the Organization element.

Set Organization element to position relative
Set menu element to position absolute
Then position the menu to be to the right by adding left: 100%

then with some simple JS to toggle a class on the menu element, so you can make it appear when clicking on the organization element.

[pale coyote]

1. Create a sidenav https://material.angular.io/components/sidenav/overview
2. Add action list (https://material.angular.io/components/list/overview#action-lists) in sidenav
3. Create menu (https://material.angular.io/components/menu/overview)
4. Keep any item from action list as trigger for menu
5. Control position of menu with xPosition/yPosition attributes and panelClass

[fast aspen]

@obtuse swallow for some reason it's opening above the trigger

<a
  mat-button
  fxLayout="row"
  fxLayoutAlign="start center"
  routerLinkActive="active"
  [matMenuTriggerFor]="user"
>
trigger
</a>```

@pale coyote any idea what I'm missing here ?

[obtuse swallow]

Alright, since you're using Angular materials, I'm not really the right person to answer since I've never really used it 😄. But there should be a good way to do it and @pale coyote seems to know. Hope you figure it out

[pale coyote]

you need to check official docs, you're using direction wrong.

You can try to add class="menuPanel" and see if below style works:

.menuPanel {
    /* considerring 300px is your sidenav width */
    transform: translateX(300px);
    /* or below */
    /* margin-left: 300px; */
}

[fast aspen]

<mat-menu class="menu-panel" #menu2="matMenu"> asdasd</mat-menu>

[pale coyote]

and css for "menu-panel"?

[fast aspen]

  /* considerring 300px is your sidenav width */
  transform: translateX(300px);
}

also tried with margin-left

wait it's not even the same name 🤦‍♂️

[pale coyote]

check your class name

[fast aspen]

still the same unfortunatley

.menuPanel {
/* considerring 300px is your sidenav width */
transform: translateX(20rem);
}

<mat-menu class="menuPanel" #menu2="matMenu"> asdasd</mat-menu>

[pale coyote]

menuPanel should be in your global css, like styles.css, not in component's style.