更改打开和关闭导航菜单的方向

由 发布于

我有一个表格。在此表单中，当屏幕在移动大小时，必须使用导航菜单来显示表单的详细信息。

my site is multi language . when the language is the en it must be ltr and open the navigation from left page and when the language is fa it must be rtl open the navigation from right .

我写的代码，但我不知道如何更改导航的打开方向。我把我的代码放在这里，请帮助解决这个问题。

Demo 

<button mat-raised-button onclick="openNav()" id="showInfos" color="primary">

点击打开

 <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>
  </div>

CSS代码：

    #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代码：

    function openNav(){
   document.getElementById("activity-info").style.width = "80%";
}