Sidenav bar should open from the right instead of from the left

Question

I have this simple javascript that opens a sidebar for me but I want it on the right side and not on the left side. Refer to the gif and code below. Anyone knows what I need to do to fix this? Any explanation that you might add would be very much appreciated so I can better understand this code. I tried to fix it myself but I haven't been able to find what exactly determines on which side of the screen it appears.

.user-menu
{
    padding: 0px 10px;
    vertical-align: middle;
    height: 100%;
    color: white;
    font-family: 'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif;
    font-size: 15px;
    cursor: pointer;
    display: block;
    float: right;
}

.user-menu li
{
    padding: 10px;
}

.user-menu:hover
{
    color:white; background:#292929;
    -o-transition:color .25s ease-out, background .25s ease-in;
    -ms-transition:color .25s ease-out, background .25s ease-in;
    -moz-transition:color .25s ease-out, background .25s ease-in;
    -webkit-transition:color .25s ease-out, background .25s ease-in;
    /* ...and now override with proper CSS property */
    transition:color .25s ease-out, background .25s ease-in;

    background-color: #185886;
}

.button
{
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.navigationR
{
    float: left;
    position: absolute;
    width: 6%;
    height: calc(10vh);
    background: #333;
    top: 40px;
    left: -100%;
    transition: .25s;
    display: grid;
}

.navigationR span
{
    display: block;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,.2);
}

.navigationR.active
{
    left: 0;
}

.navigationR li
{
    height: 100%;
    display: block;
    float: left;
    padding: 10px 10px;
    vertical-align: middle;
    height: 100%;
    color: white;
    font-family: 'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif;
    font-size: 15px;
}

.navigationR span:hover
{
    color:white; background:#292929;
    -o-transition:color .25s ease-out, background .25s ease-in;
    -ms-transition:color .25s ease-out, background .25s ease-in;
    -moz-transition:color .25s ease-out, background .25s ease-in;
    -webkit-transition:color .25s ease-out, background .25s ease-in;
    /* ...and now override with proper CSS property */
    transition:color .25s ease-out, background .25s ease-in;

    background-color: #185886;
}

<ul class="navigationR">
  <span>
    <form action="/ucp/includes/logout.inc.php" method="post">
      <button class="button" type="submit" name="logout-submit">
        <li><i class="fa fa-sign-out"></i> Log out
      </button>
    </form>
    </li>
  </span>
  <span>
    <form action="/ucp/includes/logout.inc.php" method="post">
      <button class="button" type="submit" name="logout-submit">
        <li><i class="fa fa-sign-out"></i> Log out
      </button>
    </form>
    </li>
  </span>
</ul>
<div class="user-menu">
  <li> <?php echo '<i class="fa fa-user"></i>' . ' ' . $_SESSION["userUid"]; ?> </li></div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
                $(document).ready(function(){
                    $('.user-menu').click(function(){
                        $('.navigationR').toggleClass('active')
                    })
                })
</script>

Answer 1

Resolved this by putting float: right instead of left on the following CSS classes:

.navigationR {
float: right; 
right: -100%; }

.navigationR li {
float: right; }

.navigationR.active {
right: 0; }

Thanks a lot everyone for pointing it out, simple issues like these take me way too long to discover.

Answer 2

Main reason is the following class. needs to be right instead of left.

.navigationR.active 
{
     right: 0;
}

Also you might need float:right on .navigationR li too.