How to position a div next to a sidebar so that when the sidebar opens the div is pushed to the left

Question

Whenever I open the sidebar, the main content div will be positioned below the sidebar instead of being pushed to the right, and the px of the div should be equal to the width of the sidebar when it is displayed. I wrote a css and js function but it still doesn't work.

Here's the problem, maybe I'm not targeting the right div. Or maybe I'm missing a css property when writing the style. Hope you guys can help me and give me a link to a document or article with the same problem, it will be of great help to me and my growth. Thanks

const menuLink = document.querySelector('.dashboard-nav-links li:nth-child(3) a');
const navbar = document.querySelector('.dashboard-navbar');
const navItemToggle = document.querySelector('.nav-item-toggle');

menuLink.addEventListener('click', () => {
  navbar.classList.toggle('menu-open');
  if (navbar.classList.contains('menu-open')) {
    menuLink.innerHTML = 'CLOSE';
    navItemToggle.style.backgroundColor = '#F1B24B'; // Add background color
  } else {
    menuLink.innerHTML = '<i class="bi bi-list"></i>MENU';
    menuLink.style.color = '#000000'; // Set font color back to black
    navItemToggle.style.backgroundColor = 'transparent'; // Remove background color
  }
});

const navToggle = document.querySelector('.nav-item-toggle a');
const sidebar = document.querySelector('.dashboard-sidebar-nav');
const mainDiv = document.querySelector('.main-content');
const closeBtn = document.querySelector('.close-btn');


function toggleSidebar() {
  sidebar.classList.toggle('show');
  mainDiv.classList.toggle('sidebar-open');
}

function moveMainContentRight() {
  mainContent.style.marginLeft = '300px';
}

function moveMainContentLeft() {
  mainContent.style.marginLeft = '0';
}

// Event listeners
navToggle.addEventListener('click', function(event) {
  event.preventDefault();
  toggleSidebar();
});
closeBtn.addEventListener('click', toggleSidebar);

.dashboard-navbar {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  height: 11.88em;
  padding: 0 20px;
  box-sizing: border-box;
  border-bottom: 4px solid #F1B24B;
}

.dashboard-nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
  margin-left: auto;
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 700;
  line-height: 38px;
  color: #000000;
}

.dashboard-nav-links .nav-item a {
  font-size: 23px;
  color: #000000;
  text-transform: uppercase;
}

.dashboard-nav-links li {
  margin-right: -20px;
  color: #000000 !important;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  padding-right: 40px;
}

.nav-item-toggle {
  display: flex;
  align-items: center;
  width: 223px;
  height: 11.90em;
  text-align: center;
  justify-content: center;
  padding-left: 40px;
}

ul li a {
  position: relative;
  display: block;
  text-transform: uppercase;
  margin: 20px 0;
  padding: 10px 20px;
  text-decoration: none;
  color: #262626;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 600;
  transition: 0.5s;
  z-index: 1;
}

ul li a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 2px solid #174A41;
  border-bottom: 2px solid #174A41;
  transform: scaleY(2);
  opacity: 0;
  transition: 0.3s;
}

ul li a:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #262626;
  transform: scale(0);
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
}

ul li a:hover {
  color: #fff !important;
  background-color: #174A41;
}

@keyframes grow {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

ul li a:hover:before {
  transform: scaleY(1);
  opacity: 1;
}

.nav-item-toggle a {
  display: flex;
  align-items: center;
}

.logo {
  margin-left: 100px;
}

.dashboard-sidebar-nav {
  display: flex;
  flex-direction: column;
  width: 414px;
  height: 100vh;
  background-color: #F1B24B;
  position: fixed;
  top: 0;
  left: -414px;
  transition: left 0.3s ease-in-out;
  margin-top: 165px;
}

.dashboard-sidebar-nav.show {
  left: 0;
}

.dashboard-sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 20px;
}

.dashboard-sidebar-nav ul li {
  margin: 10px 0;
}

.dashboard-sidebar-nav ul li a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
}

.hide-menu {
  margin-top: auto;
  padding: 20px;
}

<header class="dashboard-navbar">
  <div class="logo">

    <span style="font-family: 'Urbanist'; font-weight: 900; font-size:24px; color: 
    #000000">STATE UNIVERSITY</span>
  </div>
  <ul class="dashboard-nav-links">
    <li class="nav-item"><a href="#">UNIVERSITY SITE</a></li>
    <li class="nav-item"><a href="#">MY PROFILE</a></li>
    <li class='nav-item-toggle'>
      <a href="#" style="color:#000000; font-size: 32px;">
        <i class="bi bi-list"></i>MENU</a>
    </li>
  </ul>
</header>

<div class="dashboard-sidebar">
  <nav class="dashboard-sidebar-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Enrollment</a></li>
      <li><a href="#">My Checklist</a></li>
      <li><a href="#">University Services</a></li>
      <li><a href="#">Account</a></li>
    </ul>
    <div class="hide-menu">
      <a href="#">Hide Menu</a>
    </div>
  </nav>
</div>

<div class='main-content'>
  <h2>What is my enrollment status?</h2>
  <i class="bi bi-check"></i>
  <p>Approved</p>

  <h2>What do you need?</h2>
</div>

Answer 1

You set left: -414px; in the .dashboard-sidebar-nav class. Then your .dashboard-sidebar-nav.show has left: 0; which means the sidebar will be toggled on the left.

I made some modifications to your work.

const menuLink = document.querySelector('.dashboard-nav-links li:nth-child(3) a');
const navbar = document.querySelector('.dashboard-navbar');
const navItemToggle = document.querySelector('.nav-item-toggle');

menuLink.addEventListener('click', () => {
  navbar.classList.toggle('menu-open');
  if (navbar.classList.contains('menu-open')) {
    menuLink.innerHTML = 'CLOSE';
    navItemToggle.style.backgroundColor = '#F1B24B'; // Add background color
  } else {
    menuLink.innerHTML = 'MENU';
    menuLink.style.color = '#000000'; // Set font color back to black
    navItemToggle.style.backgroundColor = 'transparent'; // Remove background color
  }
});

const navToggle = document.querySelector('.nav-item-toggle a');
const sidebar = document.querySelector('.dashboard-sidebar-nav');
const mainDiv = document.querySelector('.main-content');
const closeBtn = document.querySelector('.close-btn');


function toggleSidebar() {
  sidebar.classList.toggle('show');
  mainDiv.classList.toggle('sidebar-open');
}

function moveMainContentRight() {
  mainContent.style.marginLeft = '300px';
}

function moveMainContentLeft() {
  mainContent.style.marginLeft = '0';
}

// Event listeners
navToggle.addEventListener('click', function(event) {
  event.preventDefault();
  toggleSidebar();
});
closeBtn.addEventListener('click', toggleSidebar);

.dashboard-navbar {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  height: 11.88em;
  padding: 0 20px;
  box-sizing: border-box;
  border-bottom: 4px solid #F1B24B;
}

.dashboard-nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
  margin-left: auto;
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 700;
  line-height: 38px;
  color: #000000;
}

.dashboard-nav-links .nav-item a {
  font-size: 23px;
  color: #000000;
  text-transform: uppercase;
}

.dashboard-nav-links li {
  margin-right: -20px;
  color: #000000 !important;
  text-align: center;
  justify-content: center;
  display: flex;
  align-items: center;
  padding-right: 40px;
}

.nav-item-toggle {
  display: flex;
  align-items: center;
  width: 223px;
  height: 11.90em;
  text-align: center;
  justify-content: center;
  padding-left: 40px;
}

ul li a {
  position: relative;
  display: block;
  text-transform: uppercase;
  margin: 20px 0;
  padding: 10px 20px;
  text-decoration: none;
  color: #262626;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 600;
  transition: 0.5s;
  z-index: 1;
}

ul li a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 2px solid #174A41;
  border-bottom: 2px solid #174A41;
  transform: scaleY(2);
  opacity: 0;
  transition: 0.3s;
}

ul li a:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #262626;
  transform: scale(0);
  opacity: 0;
  transition: 0.3s;
  z-index: -1;
}

ul li a:hover {
  color: #fff !important;
  background-color: #174A41;
}

@keyframes grow {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

ul li a:hover:before {
  transform: scaleY(1);
  opacity: 1;
}

.nav-item-toggle a {
  display: flex;
  align-items: center;
}

.logo {
  margin-left: 100px;
}

.dashboard-sidebar-nav {
  display: flex;
  flex-direction: column;
  width: 414px;
  height: 100vh;
  background-color: #F1B24B;
  position: fixed;
  top: 0;
  /* left: -414px; */
  right: -414px;
  /* transition: left 0.3s ease-in-out; */
  transition: right 0.3s ease-in-out;
  margin-top: 165px;
}

.dashboard-sidebar-nav.show {
  /* left: 0; */
  right: 8px;
}

.dashboard-sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 20px;
}

.dashboard-sidebar-nav ul li {
  margin: 10px 0;
}

.dashboard-sidebar-nav ul li a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
}

.hide-menu {
  margin-top: auto;
  padding: 20px;
}

  


    STATE UNIVERSITY
  
  

    
UNIVERSITY SITE
    
MY PROFILE
    

      
        MENU
    
  



  

    

      
Home
      
Enrollment
      
My Checklist
      
University Services
      
Account
    
    

      Hide Menu
    
  



  
What is my enrollment status?
  
  
Approved

  
What do you need?