Закреплённый сайдбар с переходом

.layout:has(:popover-open) {
  grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
  translate: 0 var(--ctrl);
  height: var(--extend);
}

Чистый CSS, ноль JS для перехода лейаута.
Куча мелких настроек, с которыми можно поиграться

@WebDev_Plus