Sidebarnav push content with opacity

Question

Trying to have my menu push the content to the left and make it opaque until the user closes the menu. With Weebly, the page HTML main content is shown as:

The menu is a custom HTML embed item on the page. Below is the code I have for the menu element. As I said before it is working fine but if I can get it to push the content to the left with opacity, that would be awesome.

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
  document.getElementsByClassName("main-wrap").style.marginLeft = "350px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementsByClassName("main-wrap").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

<style>body {
  font-family: "Raleyway", sans-serif;
  transition: background-color .5s;
}

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

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

.sidenavmenu {
  color: #252525;
}

.sidenavmenu:hover {
  opacity: .5;
}

</style><style>.sidebar-content {
  position: static;
  background-color: #F9F9F9;
  padding: 15px;
  text-decoration: none;
  font-weight: 300;
  font-size: 20px;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

h2 {
  font-weight: 400px;
  color: #460E72;
  font-size: x-large;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

a:link {
  text-decoration: none;
  color: #B6B6BA;
}

a:visited {
  text-decoration: none;
  color: #404041;
}

a:hover {
  color: #404041;
  background-color: #eeeeee;
  cursor: pointer;
}

a:active {
  text-decoration: none;
  color: #FF6712;
}

<style>.sidebar-content {
  top: 0;
  position: static;
  width: 256px;
  max-widtH: 296px;
  left: - 275px;
  transition: top 0.3s;
}

</style>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a></a>
  <a href="#">Our Team</a>
  <a href="#">Blackboard Learn Resources</a>
  <ul>
    <li> <a href="#">Faculty Resources</a></li>
    <ul>
      <li> <a href="#">Getting Started</a></li>
      <li> <a href="#">Coruse Content Management</a></li>
      <li> <a href="#">Grades and Feedback</a></li>
      <li> <a href="#">Communicaiton</a></li>
    </ul>
    <li> <a href="#">Student Resources</a></li>
    <ul>
      <li> <a href="#">Getting Started</a></li>
      <li> <a href="#">Communicaiton</a></li>
      <li> <a href="#">Coruse Content</a></li>
      <li> <a href="#">Grades and Feedback</a></li>
    </ul>
  </ul>
  <a href="#">Accessibility Resources</a>
  <ul>
    <li> <a href="#">Faculty Resources</a></li>
    <ul>
      <li> <a href="#">Blacbkoard Ally</a></li>
      <li> <a href="#">Accessible Design</a></li>
      <li> <a href="#">Captioning</a></li>
      <li> <a href="#">Accessbile Live Sessions</a></li>
    </ul>
    <li> <a href="#">Student Resources</a></li>
    <ul>
      <li><a href="#">Blacbkoard Ally</a></li>
      <li><a href="#">Captioning</a></li>
    </ul>
  </ul>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<span class="sidenavmenu" style="font-size:13px;cursor:pointer" onclick="openNav()">&#9776; Knowledge Base Navigation </span>

Answer 1

function openNav() {
  document.getElementById("mySidenav").style.width = "350px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.body.style.backgroundColor = "white";
}  

body {
  font-family: "Raleyway", sans-serif;
  transition: background-color .5s;
}

.sidenav {
  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;
}
.sidenav a.closebtn:hover {
  opacity:0.8;
  background:#eee;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  opacity:0.8;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 36px;
  margin-left: 0;
  width: 30px;
  padding: 5px !important;
  z-index:99;
  background:#111;
}

#main {
  transition: margin-left 600ms ease;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

.sidenavmenu {
  color: #252525;
}

.sidenavmenu:hover {
  opacity: .5;
}

.sidebar-content {
  position: static;
  background-color: #F9F9F9;
  padding: 15px;
  text-decoration: none;
  font-weight: 300;
  font-size: 20px;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

h2 {
  font-weight: 400px;
  color: #460E72;
  font-size: x-large;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

a:link {
  text-decoration: none;
  color: #B6B6BA;
}

a:visited {
  text-decoration: none;
  color: #404041;
}

a:hover {
  color: #404041;
  background-color: #eeeeee;
  cursor: pointer;
}

a:active {
  text-decoration: none;
  color: #FF6712;
}

.sidebar-content {
  top: 0;
  position: static;
  width: 256px;
  max-widtH: 296px;
  left: - 275px;
  transition: top 600ms ease;
  
}
ul{
  list-style-type:none;
}
.submenu{
  padding-left:10px;
}
.subsubmenu{
  padding-left:20px;
}
.submenu,.subsubmenu{
  display:none;
}

#dropdown.active+.submenu,#subdropdown.active+.subsubmenu{
  display:block;
}
.fa{
  display: inline-block;
  vertical-align: middle;
  color:#fff;
  padding-left:5px;
}
#dropdown.active .fa-angle-down::before{
  content: "\f106";
}
#subdropdown.active .fa-angle-down::before{
  content: "\f106";
}

<script src='https://kit.fontawesome.com/a076d05399.js'></script>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Our Team</a>
  <a href="#" id="dropdown" onclick="this.classList.toggle('active')">Blackboard Learn Resources <i class='fas fa-angle-down'></i></a>
  <ul class="submenu">
    <li id="subdropdown" onclick="this.classList.toggle('active')"> <a href="#" >Faculty Resources <i class='fas fa-angle-down'></i></a></li>
    <ul class="subsubmenu">
      <li> <a href="#">Getting Started</a></li>
      <li> <a href="#">Coruse Content Management</a></li>
      <li> <a href="#">Grades and Feedback</a></li>
      <li> <a href="#">Communicaiton</a></li>
    </ul>
    <li id="subdropdown" onclick="this.classList.toggle('active')"><a href="#" >Student Resources <i class='fas fa-angle-down'></i></a></li>
    <ul class="subsubmenu">
      <li> <a href="#">Getting Started</a></li>
      <li> <a href="#">Communicaiton</a></li>
      <li> <a href="#">Coruse Content</a></li>
      <li> <a href="#">Grades and Feedback</a></li>
    </ul>
  </ul>
  <a href="#" id="dropdown" onclick="this.classList.toggle('active')">Accessibility Resources <i class='fas fa-angle-down'></i></a>
  <ul class="submenu">
    <li id="subdropdown" onclick="this.classList.toggle('active')"> <a href="#">Faculty Resources <i class='fas fa-angle-down'></i></a></li>
    <ul class="subsubmenu">
      <li> <a href="#">Blacbkoard Ally</a></li>
      <li> <a href="#">Accessible Design</a></li>
      <li> <a href="#">Captioning</a></li>
      <li> <a href="#">Accessbile Live Sessions</a></li>
    </ul>
    <li id="subdropdown" onclick="this.classList.toggle('active')"> <a href="#">Student Resources <i class='fas fa-angle-down'></i></a></li>
    <ul class="subsubmenu">
      <li><a href="#">Blacbkoard Ally</a></li>
      <li><a href="#">Captioning</a></li>
    </ul>
  </ul>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<span class="sidenavmenu" style="font-size:13px;cursor:pointer" onclick="openNav()">&#9776; Knowledge Base Navigation </span>