Игорь

В момент открытия модалки просто на боди вешаете

overflow: hidden;
    position: fixed;

Div которому бекграундом картинку,overflow: hidden;
Создаешь псевдо которому здааешь черный бекграунд с прозрачностью, большой по размерам нужным
Позиционируешь его по левому краю, трансформ ротейт на нужное количество градусов
На родителя оверфлоу хидден

Пользуйтесь поисковиком перед вопросом на тостере :)
идеальное решение

Что касаться открытого меню
У вас неправильная логика задана
Потому как
<nav id="sidebar" class="active">
Меню закрыто, и при
<nav id="sidebar" class>
Оно открыто, по простому добавьте class="active", по хорошему поправьте :)

На тему svg

g, polygon, path {
    fill: red !important;
}

Но лучше немного переверстать и сделать правильно
<div class="icon icon-red"></div>

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

.icon:hover {
    background-color: currentColor;
}

Для png юзай
https://developer.mozilla.org/en-US/docs/Web/CSS/m...

Ну и конечно же привет вебдизайн мастеру:)

И такой овал:

создать прямоугольник сделать ему rotate в нужное количество градусов и ему задать отрицательный margin
после чего сделать :before и задать ему нужную высоту и ширину и сделать из него круг куда в контент посадить иконку



Прямоугольник 100 на 100 пикселей с border-radius 30px

круг 40 на 40 бордер радиус 50%

Иконку садить через content

раз
два
три