On click only works once

for my responsive (mobile) hamburger-menu, i wanted to show the menu, when a class is pressed.
But it only works once (‘click’ is only locked once in the console, so it doesn’t register the clicks after it was pressed one time).
My JS code:

var btn = document.querySelector(".toggle-btn");
var navbar = document.querySelector(".menue");



btn.addEventListener('click', () =>{
    console.log('click');
    navbar.classList.toggle("active");
})

My html code:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="nav-bar">
    <nav>
        <div class="logo">
            <a href="../../index.php"><img src="../png/lg_nord_logo_navbar.png" alt=""></a>
        </div>
        <a href="#" class="toggle-btn">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="menue">
            <ul>
                <li><a href="#">Disziplinen</a>
                    <ul>
                        <li><a href="../disziplinen/30_m_startblock.php">30 meter startblock</a></li>
                        <li><a href="../disziplinen/30_m_fliegend.php">30 meter fliegend</a></li>
                        <li><a href="../disziplinen/60m.php">60 meter</a></li>
                        <li><a href="../disziplinen/10er_hopserlauf.php">10er Hopserlauf</a></li>
                        <li><a href="../disziplinen/Klappmesser.php">Klappmesser</a></li>
                        <li><a href="../disziplinen/Klimmzuege.php">Klimmzüge</a></li>
                        <li><a href="../disziplinen/liegestuetze.php">Liegestütze</a></li>
                        <li><a href="../disziplinen/standweitsprung.php">Standweitsprung</a></li>
                    </ul>
                </li>
                <li><a href="#">Daten hinzufügen</a>
                    <ul>
                        <li><a href="../addData/30_m_startblock.php">30 meter startblock</a></li>
                        <li><a href="../addData/30_m_fliegend.php">30 meter fliegend</a></li>
                        <li><a href="../addData/60m.php">60 meter</a></li>
                        <li><a href="../addData/10er_hopserlauf.php">10er Hopserlauf</a></li>
                        <li><a href="../addData/Klappmesser.php">Klappmesser</a></li>
                        <li><a href="../addData/Klimmzuege.php">Klimmzüge</a></li>
                        <li><a href="../addData/liegestuetze.php">Liegestütze</a></li>
                        <li><a href="../addData/standweitsprung.php">Standweitsprung</a></li>
                    </ul>
                </li>
                <li><a href="#"><i class="material-icons">support_agent</i>Athleten (beta)</a>
                    <ul>
                        <li><a href="../athlet_search/index.php?name=tom">Tom-Luca</a></li>
                        <li><a href="../athlet_search/index.php?name=marc">Marc          </a></li>
                        <li><a href="../athlet_search/index.php?name=leo">Leo          </a></li>
                        <li><a href="../athlet_search/index.php?name=lukas">Lukas</a></li>
                        <li><a href="../athlet_search/index.php?name=vincent">Vincent</a></li>
                        <li><a href="../athlet_search/index.php?name=damien">Damien</a></li>
                        <li><a href="../athlet_search/index.php?name=karsten">Karsten</a></li>
                    </ul>
                </li>
                <li><a href="../../settings/"><i class="material-icons">admin_panel_settings</i> Einstellungen</a></li>
                <li><a class="state" href="login.php">Login</a></li>
                <li><a href="../logout.php"><i class="fas fa-sign-out-alt"></i>  Logout</a></li>
            </ul>
        </div>
    </nav>
</div>

What is my mistake? Thank you for your advice!