I have a mat drawer to the right of the screen and I am trying to stick a button to it, so the overall design is clear.

Example

How can I manage to do this action? So far I have tried adding the button inside of the drawer and giving it a negative left: -10px in order to overlay the drawer.

<mat-drawer-container  [hasBackdrop]="false">
      <mat-drawer style="width: 600px;" position="end" #drawer2 [mode]="over">
        <button style="left:  -10px; z-index: 1000;" mat-raised-button (click)="drawer2.toggle()">Side Nav</button> HERE
        <mat-tab-group>
          <mat-tab>
            <ng-template mat-tab-label>
              <mat-icon> layers</mat-icon>
              <span>Componenti</span>
            </ng-template>
            <components [itemCategoryAreas]="itemCategoryAreas"></components>
          </mat-tab>
          <mat-tab>
            <ng-template mat-tab-label>
              <mat-icon>wallpaper</mat-icon>
              <span>Disegno</span>
            </ng-template>
            Content 1
          </mat-tab>
          <mat-tab>
            <ng-template mat-tab-label>
              <mat-icon>list</mat-icon>
              <span>Checklist</span>
            </ng-template>
            Content 1
          </mat-tab>
        </mat-tab-group>
      </mat-drawer>

CodePudding user response：