.sidebar {
  width: 260px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.main-content {
  margin-left: 260px;
  min-height: 100vh;
  padding: var(--space-md);
}
@media (min-width: 800px) {
  .toggle-sidebar {
  display: none;
}
}
@media (max-width: 800px) {

  .sidebar {
    left: -100%;
    width: 80%;
    max-width: 300px;
      transition:
    left var(--transition-fast)
  }

  .sidebar.open {
    left: 0;
  }

  .main-content {
    margin-left: 0;
  }

   .toggle-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: var(--z-dropdown);

    width: 38px;
    height: 38px;
    cursor: pointer;
  }
    .toggle-sidebar svg {
    pointer-events: none;
  }
}
.sidebarNav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0 var(--space-xs);
  margin: var(--space-sm) 0;
  width: 100%;
}