Change the direction of opening and closing navigation menu

Question

i have a form . in this form when the screen in the mobile size it must use the navigation menu for show detail of form .

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 .

i write that code but i dont know how change the open direction of navigation . i put my code here please help for solve this problem .

Demo

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

Click for Open

 <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 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;
  }
}

and this is js code :

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

score 1 · Answer 1 · answered May 18 '20 at 06:36

You can do it by changing initial position of div before animation start.

function openNav(){
   document.getElementById("activity-info").style.width = "80%";
   if(language === 'fa') { // Assumed variable name language
      document.getElementById("activity-info").style.right = 0;
      document.getElementById("activity-info").style.left = 'auto';
   } else {
      document.getElementById("activity-info").style.left = 0;
  }
}

score 1 · Accepted Answer · answered May 18 '20 at 06:40

all you have to do to make it open from the right is to remove the left property and add right property with the same value as in left property in .activity-info in css, so to open it from the left use the following:

  .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;
  }

and to open it from the right use the following:

  .activity-info {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0; // here is the trick
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }

so what's the solution to not repeat the code over and over again ? very simple you will have 1 class (main class) and 2 other classes (to open from the right or the left based on the language)

so here is the main class:

  .activity-info {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }

left class:

  .activity-info-left {
    left: 0;
  }

right class:

  .activity-info-right {
    right: 0;
  }

and in the html:

<div id="activity-info" class="activity-info activity-info-right">

you have add the appropriate class to div based on the language. here you can find how to add class to the element.

Change the direction of opening and closing navigation menu

2 Answers2