Сделай, чтобы при нажатии на пункты меню их выделение «заполнялось» из середины пункта по бокам более тёмным цветом, а потом этот более тёмный цвет исчезал, прямо как при нажатии на пункты настроек на Android.

HTML:

```
<aside class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-title">Дефлекта</div>
            </div>
            <nav class="sidebar-menu">
                <div class="menu-item" data-section="home">Главная</div>
                <div class="menu-item" data-section="about">Обо мне</div>
                <div class="menu-item" data-section="projectdex">Проектдекс</div>
                <div class="menu-item" data-section="bestiary">Бестиарий</div>
                <div class="menu-item" data-section="gallery">Галерея</div>
                <div class="menu-item" data-section="useful">Полезное</div>
                <div class="menu-item" data-section="settings">Настройки</div>
                <div class="menu-item" data-section="inweb">В интернете</div>
            </nav>
        </aside>
```

CSS:

```
body,
html {
    margin: 0;
    padding: 0;
    font-family: "Days One", sans-serif;
    font-weight: 400;
    font-style: normal;
    src: url("../fonts/DaysOne-Regular.ttf") format("truetype");
    height: 100%;
    overflow: hidden;
}

.page {
    display: flex;
    height: 100vh;
    border: 2px solid rgb(0, 0, 0);
    background: var(--background-color, rgb(247, 249, 247));
}

/* Боковая панель */
.sidebar {
    background: rgb(235, 245, 236);
    width: 257px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Логотип привязан к левому краю */
    padding: 18px;
    box-sizing: border-box;
}

#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: rgb(11, 76, 19);
    text-align: left;
}

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

/* Элементы меню */
.menu-item {
    text-decoration: none;
    font-size: 25px;
    color: rgb(11, 76, 19);
    padding: 8px;
    cursor: pointer;
    display: inline-block; /* Чтобы ширина зависела от содержимого */
    border-radius: 20px;
    transition: background-color 0.2s ease-in-out;
    width: auto; /* Ширина по содержимому */
    text-align: left; /* Центрировать текст внутри */
}

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

.section-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

.content-section {
    display: none;
    flex-grow: 1;
}

.content-section.active {
    display: flex;
    flex-direction: column;
}

.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);
}

[data-theme="dark-green"] {
    --background-color: rgb(34, 40, 34);
    --sidebar-bg-color: rgb(44, 54, 44);
    --text-color: rgb(189, 225, 194);
    --highlight-color: rgb(89, 130, 100);
}

[data-theme="light-pink"] {
    --background-color: rgb(255, 240, 245);
    --sidebar-bg-color: rgb(255, 220, 235);
    --text-color: rgb(125, 50, 85);
    --highlight-color: rgb(245, 190, 210);
}

[data-theme="dark-pink"] {
    --background-color: rgb(85, 34, 50);
    --sidebar-bg-color: rgb(54, 20, 30);
    --text-color: rgb(255, 190, 210);
    --highlight-color: rgb(130, 75, 100);
}
```

JS:

```
document.addEventListener('DOMContentLoaded', function() {
    const savedTheme = localStorage.getItem('theme');
    const savedLanguage = localStorage.getItem('language');
    if (savedTheme) {
        document.documentElement.setAttribute('data-theme', savedTheme);
        document.getElementById('theme-select').value = savedTheme;
    }

    if (savedLanguage) {
        document.querySelector('html').setAttribute('lang', savedLanguage);
        document.getElementById('language-select').value = savedLanguage;
        switchLanguage(savedLanguage);
    }

    document.querySelectorAll('.menu-item').forEach(item => {
        item.addEventListener('click', function() {
            const sectionToShow = this.getAttribute('data-section');
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.remove('active');
            });
            document.getElementById(sectionToShow).classList.add('active');
        });
    });

    document.getElementById('theme-select').addEventListener('change', function(event) {
        const selectedTheme = event.target.value;
        document.documentElement.setAttribute('data-theme', selectedTheme);
        localStorage.setItem('theme', selectedTheme);
    });

    document.getElementById('language-select').addEventListener('change', function() {
        const selectedLanguage = this.value;
        document.querySelector('html').setAttribute('lang', selectedLanguage);
        localStorage.setItem('language', selectedLanguage);
        switchLanguage(selectedLanguage);
    });

    function switchLanguage(language) {
        if (language === 'en') {
            document.querySelector('.sidebar-title').textContent = 'Deflecta';
            document.querySelector('#home h2').textContent = 'Home';
            document.querySelector('#about h2').textContent = 'About';
            document.querySelector('#settings h2').textContent = 'Settings';
            document.getElementById('search-input').placeholder = 'Search projects';
        } else {
            document.querySelector('.sidebar-title').textContent = 'Дефлекта';
            document.querySelector('#home h2').textContent = 'Главная';
            document.querySelector('#about h2').textContent = 'Обо мне';
            document.querySelector('#settings h2').textContent = 'Настройки';
            document.getElementById('search-input').placeholder = 'Поиск проектов';
        }
    }

    const projects = [{
            name: 'Проект 1',
            tag: 'tag1',
            popularity: 5
        },
        {
            name: 'Проект 2',
            tag: 'tag2',
            popularity: 10
        },
    ];

    updateProjectList(projects);

    document.getElementById('search-button').addEventListener('click', function() {
        const query = document.getElementById('search-input').value.toLowerCase();
        const filteredProjects = projects.filter(project =>
            project.name.toLowerCase().includes(query)
        );
        updateProjectList(filteredProjects);
    });

    document.getElementById('filter-tags').addEventListener('change', function() {
        const selectedTag = this.value;
        const filteredProjects = selectedTag === 'all' ?
            projects :
            projects.filter(project => project.tag === selectedTag);
        updateProjectList(filteredProjects);
    });

    document.getElementById('sort-options').addEventListener('change', function() {
        const sortOrder = this.value;
        const sortedProjects = [...projects];
        if (sortOrder === 'newest') {
            sortedProjects.reverse();
        } else if (sortOrder === 'popular') {
            sortedProjects.sort((a, b) => b.popularity - a.popularity);
        }
        updateProjectList(sortedProjects);
    });

    function updateProjectList(projectList) {
        const projectListContainer = document.getElementById('project-list');
        projectListContainer.innerHTML = '';
        projectList.forEach(project => {
            const projectElement = document.createElement('div');
            projectElement.textContent = project.name;
            projectListContainer.appendChild(projectElement);
        });
    }
});
```