src/theme/DocSidebar/Desktop/styles.module.css

@media (min-width: 997px) {
  .sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: var(--ifm-navbar-height);
    width: var(--doc-sidebar-width);
  }

  .sidebarWithHideableNavbar {
    padding-top: 0;
  }

  .sidebarWithDomainNavigation {
    padding-top: 0;
  }

  .sidebarHidden {
    opacity: 0;
    visibility: hidden;
  }

  .sidebarLogo {
    display: flex !important;
    align-items: center;
    margin: 0 var(--ifm-navbar-padding-horizontal);
    min-height: var(--ifm-navbar-height);
    max-height: var(--ifm-navbar-height);
    color: inherit !important;
    text-decoration: none !important;
  }

  .sidebarLogo img {
    margin-right: 0.5rem;
    height: 2rem;
  }
}

.sidebarLogo {
  display: none;
}

.sidebarHeader {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.5rem;
  border-bottom: 1px solid #edf2fa;
}

.sidebarSearch {
  flex: 1 1 auto;
  min-width: 0;
}

.sidebarSearch :global(.navbar__search) {
  margin-left: 0 !important;
  width: 100%;
}

.sidebarSearch :global(.navbar__search-input) {
  width: 100% !important;
  height: 2.25rem !important;
}

/* Anchor the autocomplete dropdown to the input's left edge instead of the
 * navbar-default `left: -20%` rule that pulls the 560px-wide panel off the
 * left side of the viewport when the search bar lives in the sidebar.
 * The dropdown element is whatever autocomplete.js generates (a span/div),
 * so match by class substring. */
.sidebarSearch :global(.navbar__search) [class*="dropdownMenu"] {
  left: 0 !important;
  right: auto !important;
}

/* The Docusaurus sidebar container ships with `clip-path: inset(0)` (for the
 * collapse animation), which also clips our 560px search dropdown to the
 * 300px sidebar width. Disable it so the dropdown can overflow the sidebar. */
:global(.theme-doc-sidebar-container) {
  clip-path: none !important;
}