Как переместить боковую панель в правую часть экрана

После нескольких минут «расчетного» угадывания я нашел решение. Вы говорите, что это должно быть относительное положение, но вы не говорите, куда оно должно идти. Поэтому я просто ввел координаты здесь, если вы хотите обновить эти координаты, вам придется быть начеку, потому что они очень чувствительны (координаты неверны, потому что я работал в меньшем окне).

Я надеюсь, что это помогло вам (если это так, пожалуйста, дайте мне знать), хорошего дня :-)

@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
.sidebar *{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
.sidebar {
  display: inline;
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
}
.sidebar nav{
  position: fixed;
/*You say it needs to be a relative position but you don't say where it needs to go:*/
  top: 10px; left: 400px;
  width: 70px;
  margin-top: 150px;
  transition: all 0.3s linear;
  box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
}

.sidebar nav li{
  height: 60px;
  position:relative;
}
.sidebar nav li a{
  color: white;
  display: block;
  height: 100%;
  width: 100%;
  line-height: 60px;
  padding-left:25%;
  border-bottom: 1px solid rgba(0,0,0,.4);
  transition: all .3s linear;
}

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class = "sidebar">
    <nav>
      <ul>
        <li>
          <a href = "#"><i class = "fa fa-facebook-f"></i><span>Facebook</span></a>
        </li>
        <li>
          <a href = "#"><i class = "fa fa-instagram"></i><span>Instagram</span></a>
        </li>
      </ul>
    </nav>
  </div>
</link>

Итак, первое, что я сделал, это добавил float:inline-end; на нашу боковую панель{} и удалил position:fixed; из нашего селектора навигации.

(моим первым побуждением было использовать flexbox, но это только я.)

Это заставит вашу боковую панель плавать в правой части экрана, а ваша навигация будет просто размещена в ней.

Затем, чтобы изменить направление нашей анимации, мы меняем padding-left:20% из .Sidebar ul li:hover a span{} на padding-right:20% и добавляем float:inline-end к .Sidebar nav li a{}.

И это почти все, что я думаю.

Мне не пришлось трогать наш html-код, поэтому вот что у меня получилось в таблице стилей:

@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');

body {
    background-color: black;
}
.sidebar *{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
.sidebar {
    display:inline;
    float: inline-end;
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
}
.sidebar nav{
  
  width: 70px;
  margin-top: 150px;
  transition: all 0.3s linear;
  box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
  
}
.sidebar nav li{
  height: 60px;
  position:relative;
}
.sidebar nav li a{
  color: white;
  display: block;
  float: inline-end;
  height: 100%;
  width: 100%;
  line-height: 60px;
  
  border-bottom: 1px solid rgba(0,0,0,.4);
  transition: all .3s linear;
}

.sidebar nav li a i{
  position:absolute;
  float: inline-end;
  top: 17px;
  left: 20px;
  font-size: 27px;
}
ul li a span{
    display: none;

  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sidebar a:hover {
  z-index:1;
  width: 300px;
  border-bottom: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 0 1px 1px rgba(0,0,0,.3);
}
.sidebar ul li:hover a span{

  padding-right:20%;
  display: block;

} ```