Как переключать изображения кнопок между активным и неактивным состояниями и настроить стиль нижнего колонтитула в Angul ⇐ CSS

[Anonymous]

Я работаю над компонентом нижнего колонтитула в Angular, и у меня возникли проблемы с двумя основными задачами:
Переключение состояний кнопок: я хочу, чтобы каждая кнопка в моем нижнем колонтитуле переключалась между неактивными и активными изображениями. при нажатии. Одновременно должна быть активна только одна кнопка, при этом остальные будут переведены в неактивное состояние. Я использую src/assets для хранения изображений и настроил JavaScript для обработки переключения, но изображения, похоже, не переключаются должным образом.
Корректировка стиля нижнего колонтитула:
Левая и правая части нижнего колонтитула имеют треугольную форму, которая всегда должна быть видна. При изменении ширины страницы я бы хотел, чтобы уменьшалась только внешняя часть этих разделов, а не внутренняя треугольная часть.
Кроме того, верхняя часть нижнего колонтитула должна оставаться видимой независимо от размера страницы.
github: https://github.com/tostrauss/footer-cr/ ... /footer-cr
Краткое описание моей настройки ( упрощенно):
html














css
.footer-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
position: fixed;
bottom: 0;
z-index: 10;
background-color: transparent;
}

.footer-bar-left, .footer-bar-right {
flex: 1;
display: flex;
height: 60px;
overflow: hidden;
}

.footer-bar-left img, .footer-bar-right img {
width: 100%;
height: 100%;
object-fit: cover;
}

.footer-nav {
display: flex;
align-items: center;
gap: 5px;
background-color: transparent;
padding: 0 5px;
}

.footer-button {
width: 90px;
height: 60px;
cursor: pointer;
}

@media screen and (max-width: 768px) {
.footer-bar-left img {
margin-left: auto;
}
.footer-bar-right img {
margin-right: auto;
}
}

javascript
document.addEventListener("DOMContentLoaded", () => {
const buttons = {
connect: document.getElementById("connectButton"),
guide: document.getElementById("guideButton"),
messages: document.getElementById("messagesButton"),
};

const activeImages = {
connect: "assets/Connect Button - pressed.png",
guide: "assets/Guide Button - pressed.png",
messages: "assets/Messages active.png",
};

const inactiveImages = {
connect: "assets/Connect button - inactive.png",
guide: "assets/Guide Button - inactive.png",
messages: "assets/Messages Button - inactive.png",
};

function toggleButton(buttonType) {
for (const type in buttons) {
buttons[type].src = inactiveImages[type];
}
buttons[buttonType].src = activeImages[buttonType];
}

buttons.connect.addEventListener("click", () => toggleButton("connect"));
buttons.guide.addEventListener("click", () => toggleButton("guide"));
buttons.messages.addEventListener("click", () => toggleButton("messages"));
});


Подробнее здесь: https://stackoverflow.com/questions/791 ... ust-footer