i create the navigation [Demo](https://codepen.io/kianoush/pen/GRpwZJy?__cf_chl_jschl_tk__=4cde831a0a0fed8e4867593f60599e95ad887872-1589790070-0-Ae_sXkRmmzuWcGGy8VHqc1PHZhsBamxLaKSNmOOyEQ9BvB3dFIJmBqADykjp580NP0Zk8926YJqTenvqNankwnIl5sbYjlJllUTDUAeyPfrkMXpx5HpcFovohPTr8IdvkhWCqRzBNJqglBSf7Ozn17bY5m_ZCKn8ZrlTAdTBStVRJjvToy2RSUo2iE0cyyXXJEWutbmokEfhvK-_f1SnS1QKCDcf-qheGBMvoSe9RhULRAFUGUuRsc3vx3snP8nDNcDqhh4-eICHtWm22enHWCFVVtYichdcUMOHsuUY6LT8vSlGlaq8q5wm1ZwxQg50RpOZsH4JdLn3W-Rngwzf807fzExLaT5J5H37jSF1RDZW) and i want to set a black background and that width must be `100%` and when click on the background the navigation must be closed . 

the important things about this navigation is this the content must be 80% but the background must be 100% . 

```
 <div id="activity-info" class="activity-info">
<div class="activity-container">
  <div class="activity-header">
    <span id="closeActivityInfo" (click)="closeActivityInfo()">
      <mat-icon>clear</mat-icon>
    </span>
    <div class="activity-info-title">
      <span>
        {{ "GENERAL.ACTIVITY_INFO" | translate }}
      </span>
    </div>
  </div>
  <div class="activity-content">
    <div>
      <div class="item">
        <div class="item-label">{{ "GENERAL.CREATOR" | translate }} :</div>
        <div class="item-value">
          <pfa-user-field
            [displayName]="oldEditModel.creator"
            [row]="false"
          ></pfa-user-field>
        </div>
      </div>
    </div>
  </div>
</div>

```

css Code :

```
   #showInfos {
    display: block;
    width: 100% !important;
    margin-bottom: 7px !important;
  }
  #closeActivityInfo {
    display: block;
  }
  .activity-info-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .activity-info {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  .activity-container {
    width: 100%;
  }
  .edit-form {
    width: 100%;
  }
  .form-content {
    height: 100%;
  }
  .showInfos {
    width: 60px;
    height: 40px;
    background-color: #e52727;
    color: white;
    position: absolute;
    right: 40px;
    bottom: 20px;
  }
}

```

js Code :