js toggle button not working - 'document not defined' error

Question

I am using node and express and am trying to create a responsive nav menu which collapses into a hamburger menu on devices below 960px, however, I receive the following error when trying to run the javascript in my app.js file:

C:\Users\james\Web Dev\vandenbergDevelopment\app.js:89
const toggleButton = document.getElementsByClassName('toggle-button')[0]
                     ^

ReferenceError: document is not defined
    at Object.<anonymous> (C:\Users\james\Web Dev\vandenbergDevelopment\app.js:8
9:22)

Is there possibly an issue running this type of java in a node server? I've seen client.js, server.js and app.js, but am unsure exactly the use for each. Is one supposed to be used with logic and the other with server? Best practices?

I've tried to create Ids and target them instead of by class, but that didn't work either.

Any help would be greatly appreciated!

The code in my app.js is this:

const bodyParser = require("body-parser")
const mongoose = require('mongoose')
const ejs = require('ejs');


const app = express();


app.set("view engine", "ejs");

app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(express.static('public'));
app.use(express.static('images'));


app.get("/", function (req, res) {
    res.render("index");
});

app.get("/prices", function (req, res, ) {
    res.render("prices");
});

app.get("/about", function (req, res, ) {
    res.render("about");
});
app.get("/contact", function (req, res, ) {
    res.render("contact");
});


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

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

});


const PORT = process.env || 3000;

app.listen(3000, function () {
    console.log("server started")

});

The html:

    <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand" href="/">
            <img class="deltaLogo" src="images/deltalogo.png" href="/"></img></a>

        <a href="#" class="toggle-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>

        <div class="navbar-links">
            <ul class="navbar-nav flex">
                <li class="nav-item active">
                    <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/prices">Pricing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/contact">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

The css

.navbar {
    position: relative;
    display: flex;
    width: 100%;
    height: 70px;
    background-color: none;
    border-bottom: 2px black solid;
    justify-content: space-between;
    padding-right: 5%;
    align-items: center;

}

/* .navbar-brand {
    width: 100%;
    height: auto;
    display: flex;
} */

.deltaLogo {
    max-width: 200px;
    height: auto;
    margin-left: 70px;
}

.navbar-nav {
    margin: 0;
    padding: 0;
    text-decoration: none;
    display: flex;
}

.nav-link {
    margin: 0 5px;
    font-family: 'Playfair';
    font-weight: 500;
    font-size: 1.25rem;
    color: #167681;
    letter-spacing: 1.1px;
    display: inline-block;


}

.nav-link:hover {
    font-size: 1.27rem;
    font-family: 'Playfair';
    font-weight: 500;
    color: #024757;
    letter-spacing: 1.2px;
    border-bottom: rgba(153, 46, 153, 0.801);
    border-style: groove;
    border-width: 0 0 1.5px 0;
    border-radius: 2px;
    bottom: -.75rem;
    transition: outline 0.6s linear;

}


.toggle-button {
    position: absolute;
    display: none;
    top: 1.35rem;
    right: .75rem;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    margin-right: 5%;
}

.bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;

     }

     @media(max-width:960px) {

    .toggle-button {
        display: flex;
    }


    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-links {
        display: none;
        width: 100%;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links li {
        text-align: center;
    }

    .navbar-links ul li a {
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
    }

    .deltaLogo {
        margin: 0;
        /* display: flex; */
        width: 65%;
        height: auto;
        /* justify-content: start; */
    }