Sidebar без доп зависмостей

Всем привет! Вопрос следующий, нужно реализовать на html/css следующий сайдбар, он же каталог товаров. Как должно выглядеть: https://ibb.co/ZYPKJVV Нажимаем кнопку каталог, слева выезжает сайдбар с перечислением товаров. Есть примерная структура:

<header class="header">
 <div class="header__top">
    <div class="header__container"></div>
 </div>
 <div class="header__bottom">
    <div class="header__container"></div>
 </div>
 <aside class="catalog">
   <ul class="catalog__list">
    <li class="catalog__item">
     <a class="catalog__link">1 товар</a>
    </li>
    <li class="catalog__item">
     <a class="catalog__link">2 товар</a>
    </li>
    <li class="catalog__item">
     <a class="catalog__link">3 товар</a>
    </li>
    <li class="catalog__item">
     <a class="catalog__link">4 товар</a>
    </li>
   </ul>
 </aside>
</header>

Проблема для меня возникла в том, что контент (элементы каталога, левый край должен равняться по левому краю логотипа, всегда (при ресайзе)). Получается левая пустая часть при ресайзе окна либо уменьшается либо увеличивается, а сам контент должен быть всегда на одном месте, не понимаю как это реализовать. Спозиционировал абсолютно относительно самого хедера, но как только делаю ресайз сам контент в сайдбаре гуляет и не выровнен по основному контейнеру. Так же как сделать раскрытие саб меню при клике на элемент? Как это реализовать в самой разметке? Добавить див к определенному li где есть сабменю? И отлавливать JS? Или как-то можно сделать на css?

Надеюсь смог объяснить по человечески! Спасибо!