How to toggle button images between active and inactive states and adjust footer-bar styling...

I'm working on a footer component in Angular and having trouble with two main tasks:

Switching Button States: I want each button in my footer to switch between inactive and active images when clicked. Only one button should appear active at a time, resetting the others to their inactive states. I'm using src/assets for storing the images and have JavaScript set up to handle the switching, but the images don’t seem to toggle as expected.

Footer-Bar Styling Adjustments:

The left and right sections of the footer-bar have a triangle shape that should always be visible. When the page width changes, I’d like only the outer part of these sections to shrink, not the inner triangle part. Additionally, the top part of the footer-bar should remain visible regardless of page size.

github: https://github.com/tostrauss/footer-cr/tree/main/footer-cr

Summary of my setp-up (simplified):

html
<footer class="footer-container">
<div class="footer-bar-left">
<img src="assets/Footer Bar Left.svg" alt="Left Footer Bar">
</div>
<nav class="footer-nav">
<img src="assets/Connect button - inactive.png" id="connectButton" class="footer-button">
<img src="assets/Guide Button - inactive.png" id="guideButton" class="footer-button">
<img src="assets/Messages Button - inactive.png" id="messagesButton" class="footer-button">
</nav>
<div class="footer-bar-right">
<img src="assets/Footer Bar Right.svg" alt="Right Footer Bar">
</div>
</footer>


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

Continue reading...