Почему не работают плавные переходы между разделами и анимация выдвигания боковой панели?

/* 1. Глобальное box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Правильное объявление @font-face */
@font-face {
    font-family: "Days One", sans-serif;
    src: url("../fonts/DaysOne-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

/* 3. Настройки для body и html */
body,
html {
    font-family: "Days One", sans-serif;
    font-style: normal;
    font-weight: 400;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Скрывает прокрутку для всего документа */
    background-color: var(--background-color);
    color: var(--text-color);
}

/* 4. Контейнер страницы с flexbox */
.page {
    display: flex;
    height: 100vh;
    width: 100vw;
    /* Обеспечивает использование полной ширины окна */
    background: var(--background-color);
    overflow: hidden;
    /* Скрывает переполнение */
}

/* 5. Боковая панель */
.sidebar {
    background-color: var(--sidebar-bg-color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
    flex-shrink: 0;
    /* Предотвращает сжатие при уменьшении окна */
    transition: width 0.3s ease-in-out;
    overflow: hidden;
    min-width: 200px; /* Минимальная ширина */
    max-width: 300px;
}

#sidebar {
    background-color: var(--sidebar-bg-color);
}

/* Заголовок в верхней части */
.sidebar-header {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    /* Чтобы занимать всю ширину боковой панели */
    margin-bottom: 20px;
    /* Отступ после заголовка */
}

/* Текст заголовка */
.sidebar-title {
    font-size: 38px;
    color: var(--text-color);
    text-align: left;
}

/* Центрирование меню */
.sidebar-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Пункты меню выравниваются по левому краю */
    flex-grow: 1;
    justify-content: center;
    width: 100%;
}

/* 6. Состояние свёрнутой боковой панели */
.sidebar.collapsed {
    width: 0;
    min-width: 0;
    transition: width 0.3s ease-in-out;
    overflow: hidden;
}

/* 7. Основное содержимое */

.sidebar .sidebar-content {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.sidebar.collapsed .sidebar-content {
    opacity: 0;
}

/* Сдвиг основного содержимого при свёрнутой боковой панели */
.sidebar.collapsed+.section-content {
    margin-left: 0;
    transition: margin-left 0.3s ease-in-out;
}

/* Стили для кнопки сворачивания */
.toggle-sidebar {
    position: fixed;
    bottom: 10px;
    left: 10px;
    border: 0px solid #ccc;
    padding: 5px;
    cursor: pointer;
    z-index: 100;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 20%;
    background: var(--sidebar-bg-color);
    color: var(--text-color);
    box-shadow: 0 0 3px var(--text-color)
}

/* Элементы меню */
.menu-item {
    text-decoration: none;
    font-size: 25px;
    color: var(--text-color);
    padding: 8px;
    cursor: pointer;
    display: inline-block;
    /* Чтобы ширина зависела от содержимого */
    border-radius: 20px;
    transition: background-color 0.2s ease-in-out;
    width: auto;
    /* Ширина по содержимому */
    text-align: left;
    /* Центрировать текст внутри */
    position: relative;
    /* Для ripple-эффекта */
    overflow: hidden;
    /* Для ripple-эффекта */
    white-space: nowrap;
    /* Предотвращение переноса текста */

    /* Добавленные стили для предотвращения выделения текста */
    user-select: none;
    /* Стандартное свойство */
    -webkit-user-select: none;
    /* Для Safari */
    -moz-user-select: none;
    /* Для Firefox */
    -ms-user-select: none;
    /* Для IE и Edge */
}

/* Выделение при наведении */
.menu-item:hover {
    background-color: var(--highlight-color);
    width: auto;
    /* Оставить ширину по содержимому даже при наведении */
}

/* Стиль Ripple-эффекта */
.menu-item .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background-color: var(--ripple-color);
    /* Цвет эффекта */
    animation: rippleEffect 0.6s linear;
    pointer-events: none;
    /* Чтобы не блокировать нажатия */
    opacity: 1;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.section-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Позволяет содержимому занимать оставшееся пространство */
    height: 100%;
    overflow-y: auto;
    /* Вертикальная прокрутка при необходимости */
    padding: 20px;
    transition: margin-left 0.3s ease-in-out;
    box-sizing: border-box;
    position: relative;
}

/* 8. Обработка свёрнутой боковой панели */
.sidebar.collapsed+.section-content {
    margin-left: 0;
    transition: margin-left 0.3s ease-in-out;
}

/* 10. Стили для .content-section */
.content-section {
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    pointer-events: none;
    display: none;
    height: 100%;
    margin: 0;
    padding: 20px;
    flex: 1;
}

.content-section.active {
    opacity: 1;
    pointer-events: auto;
    display: block;
    /* Отображается активный раздел */
}

.search-bar input {
    width: 60%;
    padding: 8px;
    box-sizing: border-box;
}

.filter-bar select {
    margin-left: 10px;
    padding: 5px;
}

.project-list {
    margin-top: 20px;
}

:root {
    --background-color: rgb(247, 249, 247);
    --sidebar-bg-color: rgb(235, 245, 236);
    --text-color: rgb(11, 76, 19);
    --highlight-color: rgb(189, 225, 194);
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

[data-theme="light-plant"] {
    --background-color: rgb(247, 249, 247);
    --sidebar-bg-color: rgb(235, 245, 236);
    --highlight-color: rgb(193, 235, 198);
    --ripple-color: rgba(9, 78, 17, 0.1);
    --text-color: rgb(9, 78, 17);
}

[data-theme="dark-plant"] {
    --background-color: rgb(32, 48, 32);
    --sidebar-bg-color: rgb(43, 72, 47);
    --highlight-color: rgb(68, 99, 72);
    --text-color: rgb(166, 227, 161);
    --ripple-color: rgba(166, 227, 161, 0.1);
}

[data-theme="light-ripe"] {
    --background-color: rgb(255, 242, 244);
    --sidebar-bg-color: rgb(255, 219, 226);
    --highlight-color: rgb(255, 185, 190);
    --ripple-color: rgba(242, 41, 78, 0.1);
    --text-color: rgb(242, 41, 78);
}

[data-theme="dark-ripe"] {
    --background-color: rgb(57, 0, 10);
    --sidebar-bg-color: rgb(117, 4, 25);
    --highlight-color: rgb(156, 9, 36);
    --text-color: rgb(242, 41, 78);
    --ripple-color: rgba(242, 41, 78, 0.1);
}

[data-theme="light-flower"] {
    --background-color: rgb(255, 255, 255);
    --sidebar-bg-color: rgb(255, 229, 234);
    --highlight-color: rgb(255, 202, 212);
    --text-color: rgb(242, 128, 149);
    --ripple-color: rgba(242, 128, 149, 0.1);
}

[data-theme="dark-flower"] {
    --background-color: rgb(37, 31, 32);
    --sidebar-bg-color: rgb(65, 44, 48);
    --highlight-color: rgb(97, 67, 72);
    --text-color: rgb(255, 190, 210);
    --ripple-color: rgba(97, 67, 72, 0.1);
}

[data-theme="light-shiny"] {
    --background-color: rgb(233, 223, 255);
    --sidebar-bg-color: rgb(216, 203, 245);
    --highlight-color: rgb(203, 179, 255);
    --text-color: rgb(138, 102, 217);
    --ripple-color: rgba(138, 102, 217, 0.1);
}

[data-theme="dark-shiny"] {
    --background-color: rgb(23, 14, 44);
    --sidebar-bg-color: rgb(39, 24, 74);
    --highlight-color: rgb(64, 35, 128);
    --text-color: rgb(138, 102, 217);
    --ripple-color: rgba(138, 102, 217, 0.1);
}

[data-theme="light-shiny2"] {
    --background-color: rgb(233, 223, 255);
    --sidebar-bg-color: rgb(43, 21, 90);
    --highlight-color: rgb(30, 14, 65);
    --text-color: rgb(138, 102, 217);
    --ripple-color: rgba(138, 102, 217, 0.1);
}

[data-theme="dark-shiny2"] {
    --background-color: rgb(0, 0, 0);
    --sidebar-bg-color: rgb(43, 21, 90);
    --highlight-color: rgb(64, 35, 128);
    --text-color: rgb(138, 102, 217);
    --ripple-color: rgba(138, 102, 217, 0.1);
}

.sidebar.collapsed+.section-content {
    width: 100%;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}