Collapsable Nav Bar using just JavaScript

September 29, 2022

I am trying to build a mobile view navigation bar that closes after clicking on a list item and I’m having trouble finding a solution. The requirements state not to use jQuery or CSS. Although, CSS solutions are also helpful. The aim is to have the list items navigate the user to a section on the page with the appropriate id. It works as it should but I want the mobile view nav bar to close after clicking a list item. Here is my code so far:

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
})

            .navbar {
                display: flex;
                position: fixed;
                width: 100%;
                justify-content: space-between;
                align-items: center;
                background-color: #2a324b;
                color: white;
                top: 0;
            }
            
            .brand-title {
                font-size: 1.5rem;
                margin: .5rem;
            }
            
            .navbar-links {
                height: 100%;
            }
            
            .navbar-links ul {
                display: flex;
                margin: 0;
                padding: 0;
            }
            
            .navbar-links li {
                list-style: none;
            }
            
            .navbar-links li a {
                display: block;
                text-decoration: none;
                color: white;
                padding: 1rem;
            }
            
            .navbar-links li:hover {
                background-color: rgb(204, 194, 194);
                color: #2a324b;
            }
            
            .toggle-button {
                position: absolute;
                top: .75rem;
                right: 1rem;
                display: none;
                flex-direction: column;
                justify-content: space-between;
                width: 30px;
                height: 21px;
            }
            
            .toggle-button .bar {
                height: 3px;
                width: 100%;
                background-color: white;
                border-radius: 10px;
            }
            
            @media (max-width: 800px) {
                .navbar {
                    flex-direction: column;
                    align-items: flex-start;
                }
                .toggle-button {
                    display: flex;
                }
                .navbar-links {
                    display: none;
                    width: 100%;
                }
                .navbar-links ul {
                    width: 100%;
                    flex-direction: column;
                }
                .navbar-links ul li {
                    text-align: center;
                }
                .navbar-links ul li a {
                    padding: .5rem 1rem;
                }
                .navbar-links.active {
                    display: flex;
                }
            }

<nav class="navbar">
        <div class="brand-title">Palesa Mapeka</div>
        <a href="#" class="toggle-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="navbar-links">
            <ul>
                <li><a href="#about-me">About Me</a></li>
                <li><a href="#skills">Tech Stack</a></li>
                <li><a href="#projects">Projects</a></li>
            </ul>
        </div>
    </nav>

Ideas on how to solve my dilemma are appreciated. I want to learn how to do this using JavaScript.

>Solution :

Why not just add the same click listener to the navbar-links class?

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
})

navbarLinks.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
})

            .navbar {
                display: flex;
                position: fixed;
                width: 100%;
                justify-content: space-between;
                align-items: center;
                background-color: #2a324b;
                color: white;
                top: 0;
            }
            
            .brand-title {
                font-size: 1.5rem;
                margin: .5rem;
            }
            
            .navbar-links {
                height: 100%;
            }
            
            .navbar-links ul {
                display: flex;
                margin: 0;
                padding: 0;
            }
            
            .navbar-links li {
                list-style: none;
            }
            
            .navbar-links li a {
                display: block;
                text-decoration: none;
                color: white;
                padding: 1rem;
            }
            
            .navbar-links li:hover {
                background-color: rgb(204, 194, 194);
                color: #2a324b;
            }
            
            .toggle-button {
                position: absolute;
                top: .75rem;
                right: 1rem;
                display: none;
                flex-direction: column;
                justify-content: space-between;
                width: 30px;
                height: 21px;
            }
            
            .toggle-button .bar {
                height: 3px;
                width: 100%;
                background-color: white;
                border-radius: 10px;
            }
            
            @media (max-width: 800px) {
                .navbar {
                    flex-direction: column;
                    align-items: flex-start;
                }
                .toggle-button {
                    display: flex;
                }
                .navbar-links {
                    display: none;
                    width: 100%;
                }
                .navbar-links ul {
                    width: 100%;
                    flex-direction: column;
                }
                .navbar-links ul li {
                    text-align: center;
                }
                .navbar-links ul li a {
                    padding: .5rem 1rem;
                }
                .navbar-links.active {
                    display: flex;
                }
            }

<nav class="navbar">
        <div class="brand-title">Palesa Mapeka</div>
        <a href="#" class="toggle-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="navbar-links">
            <ul>
                <li><a href="#about-me">About Me</a></li>
                <li><a href="#skills">Tech Stack</a></li>
                <li><a href="#projects">Projects</a></li>
            </ul>
        </div>
    </nav>