Poukładaj ten kod i na 100% wszystko zadziała.
Wczystujesz JS zanim istnieje drzewo DOM wynikające z HTML.
Powinieneś skrypt wrzucić do onLoad lub na końcu strony.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SideBar</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/32ad694bc9.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<h1 class="logo">BestSidebar</h1>
<button class="SideBarOn">
<i class="fas fa-align-justify"></i>
</button>
</header>
<aside class="sidebar">
<div class="buttondiv">
<button class="CloseSideBar">
<i class="fas fa-times"></i>
</button>
</div>
<ul class="links">
<li><a href="#">Home</a> </li>
<li><a href="#">Gallery</a> </li>
<li><a href="#">About</a> </li>
<li><a href="#">Contact</a> </li>
</ul>
<div class="social-media">
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter-square"></i>
<i class="fab fa-youtube"></i>
</div>
</aside>
<script>
const opensidebar = document.querySelector(".SideBarOn");
const closesidebar = document.querySelector(".CloseSideBar");
const sidebar = document.querySelector(".sidebar");
console.log( "co tu mamy:", sidebar.classList);
opensidebar.addEventListener("click", function(){
sidebar.classList.toggle(".sidebaropen");
console.log( "Po kliknięciu:", sidebar);
} )
</script>
</body>
</html>