Button next to Angular Material Tabs

Question

I created a horizontal menu with tabs using Angular Material and I want to put a button on the left side of it to open a sidebar.

The problem is:

• either the button overlays with the first tab and it looks for the user as clicking both the button and the tab
• or I set the width of the mat-tab-group to e.g. 95%, but then the main content only stretches over 95%, but it necessarily needs to be full-width.

Here is a picture of the state I want to achieve

<div style="float:left;">
    <button style="position:fixed;" mat-icon-button>
      <mat-icon>menu</mat-icon>
    </button>
</div>

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Answer 1

.left.mat-tab-label {
  float: left;
  min-width: 2rem;
  padding: 0.5rem;
  margin-right: -2rem;
}
.mat-tab-header {
  margin-left: 2rem;
}

<button mat-icon-button  class="left mat-tab-label">
      <mat-icon>menu</mat-icon>
</button>
<mat-tab-group>
  <mat-tab label="First"><app-one></app-one> </mat-tab>
  <mat-tab label="Second"> <app-two></app-two></mat-tab>
  <mat-tab label="Third"> <app-three></app-three></mat-tab>
</mat-tab-group>

stackblitz

Update The main content fill all. The only is the button it's not "underline", If we want the button underline we can change the margin-left by padding-left, but. In this case we need put the button in position absolute and with a z-index

.left.mat-tab-label {
  position:absolute;
  z-index:100;
  min-width: 2rem;
  padding: 0.5rem;
  margin-right: -2rem;
  height: 40px;
  margin-top:5px;
}
.mat-tab-header {
  padding-left: 2rem;
}

In this case I feel it's good enclosed all in a div with position:relative

a new stackblitz