Spacing problem between Header and Sidebar

I’m programming a page and I have a Header and a Sidebar but I’m in trouble with the top property overlapping my header, the sidebar would have to have the top value zeroed but in this scenario it overlaps my header by changing the value to 10 for example I solve this problem of overlapping but create an unwanted spacing when Scrolling. I am new to the world of web design but I have tried several solutions for such an event but none solves such a occurred.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}


/* Header */

header .navbar {
  font-size: 15px;
  background-image: linear-gradient(260deg, #c16ecf 0%, #2376ae 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 5px;
}

header #navbarNavAltMarkup {
  justify-content: flex-end;
}

header #navbarNavAltMarkup .nav-link {
  color: #fff;
  transition: all ease 0.2s;
  margin-left: 50px;
  margin-right: 50px;
}

header #navbarNavAltMarkup .nav-link:hover {
  color: #081145;
  transition: all ease 0.2s;
}

header #navbarNavAltMarkup .active {
  color: #081145;
  font-weight: 400;
}

header #navbarNavAltMarkup .dropbtn {
  background-color: transparent;
  color: white;
  padding: 16px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  margin-left: 50px;
  margin-right: 50px;
}

header #navbarNavAltMarkup .dropbtn:hover,
.dropbtn:focus {
  background-color: transparent;
}

header #navbarNavAltMarkup .dropdown {
  position: relative;
  display: inline-block;
}

header #navbarNavAltMarkup .dropdown-content {
  display: none;
  position: absolute;
  background-color: transparent;
  min-width: 100px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

header #navbarNavAltMarkup .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

header #navbarNavAltMarkup .dropdown a:hover {
  background-color: #ddd;
}

header #navbarNavAltMarkup .show {
  display: block;
}


/* Test */


/* Mobile */

header .navbar-nav {
  align-items: center;
}


/* End Header */


/* Aside */

.sidebar {
  position: fixed;
  left: 0;
  top: 10;
  height: 100%;
  width: 78px;
  /* background-image: linear-gradient(260deg, #2376ae 0%,#c16ecf 100%); */
  background: #11101D;
  padding: 2px 14px;
  z-index: 99;
  transition: all 0.5s ease;
}

.sidebar.open {
  width: 250px;
}

.sidebar .logo-details {
  height: 60px;
  display: flex;
  align-items: center;
  position: relative;
}

.sidebar .logo-details .icon {
  opacity: 0;
  transition: all 0.5s ease;
}

.sidebar .logo-details .logo_name {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  opacity: 0;
  transition: all 0.5s ease;
}

.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name {
  opacity: 1;
}

.sidebar .logo-details #btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 22px;
  transition: all 0.4s ease;
  font-size: 23px;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}

.sidebar.open .logo-details #btn {
  text-align: right;
}

.sidebar i {
  color: #fff;
  height: 60px;
  min-width: 50px;
  font-size: 28px;
  text-align: center;
  line-height: 60px;
}

.sidebar .nav-list {
  margin-top: 20px;
  height: 100%;
}

.sidebar li {
  position: relative;
  margin: 8px 0;
  list-style: none;
}

.sidebar li .tooltip {
  position: absolute;
  top: -20px;
  left: calc(100% + 15px);
  z-index: 3;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 400;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: 0s;
}

.sidebar ol,
ul {
  padding-left: 0px;
}

.sidebar li:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
  top: 50%;
  transform: translateY(-50%);
}

.sidebar.open li .tooltip {
  display: none;
}

.sidebar input {
  font-size: 15px;
  color: #FFF;
  font-weight: 400;
  outline: none;
  height: 50px;
  width: 100%;
  width: 50px;
  border: none;
  border-radius: 12px;
  transition: all 0.5s ease;
  background: #1d1b31;
}

.sidebar.open input {
  padding: 0 20px 0 50px;
  width: 100%;
}

.sidebar .bx-search {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 22px;
  background: #1d1b31;
  color: #FFF;
}

.sidebar.open .bx-search:hover {
  background: #1d1b31;
  color: #FFF;
}

.sidebar .bx-search:hover {
  background: #FFF;
  color: #11101d;
}

.sidebar li a {
  display: flex;
  height: 100%;
  width: 100%;
  border-radius: 12px;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
  background: #11101D;
}

.sidebar li a:hover {
  background: #FFF;
}

.sidebar li a .links_name {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
}

.sidebar.open li a .links_name {
  opacity: 1;
  pointer-events: auto;
}

.sidebar li a:hover .links_name,
.sidebar li a:hover i {
  transition: all 0.5s ease;
  color: #11101D;
}

.sidebar li i {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-radius: 12px;
}

.sidebar li.profile {
  position: fixed;
  height: 60px;
  width: 78px;
  left: 0;
  bottom: -8px;
  padding: 10px 14px;
  background: #1d1b31;
  transition: all 0.5s ease;
  overflow: hidden;
}

.sidebar.open li.profile {
  width: 250px;
}

.sidebar li .profile-details {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.sidebar li img {
  height: 45px;
  width: 45px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 10px;
}

.sidebar li.profile .name,
.sidebar li.profile .job {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}

.sidebar li.profile .job {
  font-size: 12px;
}

.sidebar .profile #log_out {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #1d1b31;
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-radius: 0px;
  transition: all 0.5s ease;
}

.sidebar.open .profile #log_out {
  width: 50px;
  background: none;
}

body {
  background: #E4E9F7;
}

.home-section {
  position: relative;
  min-height: 100vh;
  top: 0;
  left: 78px;
  width: calc(100% - 78px);
  transition: all 0.5s ease;
  z-index: 2;
}

.sidebar.open~.home-section {
  left: 250px;
  width: calc(100% - 250px);
}

.home-section .text {
  display: inline-block;
  color: #11101d;
  font-size: 25px;
  font-weight: 500;
  margin: 18px
}

@media (max-width: 420px) {
  .sidebar li .tooltip {
    display: none;
  }
}


/* End Aside */
<header>
  <nav class="navbar navbar-expand-lg">

    <div class="container-fluid">

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon p-0 m-0">
                        <img class="p-0 m-0" src="{% static 'icons/toggle.svg' %}" alt="" width="35" height="35">
                        </span>
                    </button>
      <div class="collapse navbar-collapse " id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">PAINEL</a>
          <a class="nav-link" href="#">CNGR</a>
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">REDES</a>
          <a class="nav-link" href="#">VOIP</a>

          <div class="dropdown ">
            <button onclick="myFunction()" class="dropbtn">
                                    PROFILE
                                </button>
            <div id="myDropdown" class="dropdown-content">
              <a href="#home">Perfil</a>
              <a href="#about">Logout</a>
            </div>
          </div>
        </div>
      </div>
    </div>

  </nav>

</header>

<main>
  <sidebar class="sidebar">
    <div class="logo-details">
      <i class='bx bx-phone icon'></i>
      <div class="logo_name">VOIP</div>
      <i class='bx bx-menu' id="btn"></i>
    </div>
    <ul class="nav-list">
      <li>
        <i class='bx bx-search'></i>
        <input type="text" placeholder="Search...">
        <span class="tooltip">Search</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-grid-alt'></i>
          <span class="links_name">Dashboard</span>
        </a>
        <span class="tooltip">Dashboard</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-data'></i>
          <span class="links_name">Database</span>
        </a>
        <span class="tooltip">User</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-chat'></i>
          <span class="links_name">Messages</span>
        </a>
        <span class="tooltip">Messages</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-pie-chart-alt-2'></i>
          <span class="links_name">Analytics</span>
        </a>
        <span class="tooltip">Analytics</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-folder'></i>
          <span class="links_name">File Manager</span>
        </a>
        <span class="tooltip">Files</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-cart-alt'></i>
          <span class="links_name">Order</span>
        </a>
        <span class="tooltip">Order</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-heart'></i>
          <span class="links_name">Saved</span>
        </a>
        <span class="tooltip">Saved</span>
      </li>
      <li>
        <a href="#">
          <i class='bx bx-cog'></i>
          <span class="links_name">Setting</span>
        </a>
        <span class="tooltip">Setting</span>
      </li>
      <li class="profile">
        <div class="profile-details">
          <img src="profile.jpg" alt="profileImg">
          <div class="name_job">
            <div class="name">Prem Shahi</div>
            <div class="job">Web designer</div>
          </div>
        </div>
        <i class='bx bx-log-out' id="log_out"></i>
      </li>
    </ul>

  </sidebar>
  <section class="home-section">
    <div class="text">Dashboard</div>

  </section>
</main>

Answer

You can give dashboard overflow-Y: scroll and reduce its width to 100%-open sidebar width(flexbox will adjust dashboard´s width automatically if you give sidebar element min-width: max-content;). This is how you stick your sidebar in place without using position or z-index. I will give you a little example

const button = document.querySelector('button');
const sidebar = document.querySelector(".sidebar");

button.onclick = () => {
  sidebar.classList.toggle('active');
}
body {
  margin: 0;
  padding: 0;
  height: 100vh;
}
.header {
  height: 10vh;
  background: red;
}

.content {
  display: flex;
  flex-flow: row nowrap;
}

.content .sidebar {
  width: 5%;
  background: black;
  height: 90vh;
}

.content .sidebar.active {
  width: 20%;
}

.content .dashboard {
  height: 90vh;
  width: 100%;
  background: green;
  overflow-y: scroll;
  scroll-behavior: smooth;
}


.content .dashboard .hard-coded-overflow {
  height: 1000px;
}
<body>
  <div class="header"></div>
  <div class="content">
    <div class="sidebar active">
      <button class="close">close</button>
    </div>
    <div class="dashboard">
      <div class="hard-coded-overflow">
      </div>
    </div>
  </div>
</body>

You can add transition to make it seem like a proper animation and it is way better user experience than overlaping sidebar on top of main content( that should happen when media width is adequate for mobile devices).