Setiap kali saya membuka bar sisi, div kandungan utama akan diletakkan di bawah bar sisi dan bukannya ditolak ke kanan, dan px div hendaklah sama dengan lebar bar sisi apabila dipaparkan. Saya menulis fungsi css dan js tetapi ia masih tidak berfungsi.

Ini masalahnya, mungkin saya tidak menyasarkan div yang betul. Atau mungkin saya kehilangan sifat css semasa menulis gaya. Harap anda semua boleh membantu saya dan memberi saya pautan ke dokumen atau artikel dengan masalah yang sama, ia akan sangat membantu saya dan pertumbuhan saya. Terima kasih

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>