Certain DOM Manipulation doesn't work with passport js

Question

I realised when I am not logged in on my website certain DOM elements don't work. I am using passport-local implement auth on my website. For example when I press the search button it should add an 'is-active' class to it, but if I am not logged in and press the search button nothing happends.

server side js:

const express = require('express');
const path = require('path');
const ejs = require('ejs');
const ejsMate = require('ejs-mate');
const methodOverride = require('method-override');
const mongoose = require('mongoose');
const passport = require('passport');
const localStrategy = require('passport-local');
const session = require('express-session');
const cookieParser = require('cookie-parser');
const flash = require('connect-flash');

const User = require('./models/userSchema');
const  {isLoggedIn} =require('./middleware/isLoggedIn');
const  {blockAuth} =require('./middleware/blockAuth');

const app = express();


mongoose.connect('mongodb://localhost:27017/AllProduit', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});


const db = mongoose.connection;
db.on("error", console.error.bind(console, "connection error:"));
db.once("open", () => {
    console.log("Database connected");
});

app.engine('ejs', ejsMate)
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

app.use(session({
    secret: `${process.env.SESSION_SECRET_KEY}`,
    resave: false,
    saveUninitialized: false,
}));

app.use(flash());

app.use(cookieParser(`${process.env.COOKIE_SECRET_KEY}`));

app.use(passport.initialize());
app.use(passport.session());

app.use((req,res,next) => {
    console.log(req.session);
    res.locals.currentUser = req.user;
    next();
})

passport.use(new localStrategy(User.authenticate()))
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

app.use(express.urlencoded({ extended: true }));
app.use(methodOverride('_method'));
app.use(express.static(path.join(__dirname, 'public')))



app.get('/',(req,res)=>{
    res.render('index');
})
app.get('/create', isLoggedIn,(req,res)=>{
    res.render('create');
})
app.get('/login',blockAuth,(req,res)=>{
    res.render('login');
})
app.get('/register',blockAuth,(req,res)=>{
    res.render('register');
})
app.get('/logout', (req,res,next)=>{
    req.logout();
    res.redirect('/')
})
app.post('/register', async (req,res, next)=>{
    const user = new User({email: req.body.email, username: req.body.username});
    const newUser = await User.register(user, req.body.password);
    req.login(newUser, err =>{
        if(err) return next(err);
        res.redirect('/')
    });
})
app.post('/login', passport.authenticate('local', { failureRedirect: '/login', failureMessage: true }), (req,res)=>{
    res.redirect('/');
})
app.listen('3000',()=>{
    console.log('Listening on port 3000');
})

// search button doesn't work if not logged in (fix)

HTML Behind:

<link rel="stylesheet" href="/css/navbar.css">
<link rel="stylesheet" href="/css/dropDown.css">

<div class="box_container">
<nav class="navbar">
    <a href=""><img class="logo" src="/images/logo.png" alt=""></a>
    <ul class="action-items">
      <li class="nav-btn"><a href="/" class="nav-btn-link">🏠Home</a></li>
      <li class="nav-btn"><a href="/create" class="nav-btn-link">👉 Create 👈</a></li>
      <li class="nav-btn"><a href="/pages" class="nav-btn-link">Pages</a></li>
      <li class="nav-btn"><a class="nav-btn-link search_icon"><img src="/images/search-3-24.png" alt="" class="search_image"></a></li>
    </ul>
    <% if(currentUser === undefined){ %>
    <a href="/login" class="nav-btn-link auth">Login</a>
    <a href="/register" class="nav-btn-link auth">Register</a>
    <% } else{ %>
      <div class="dropDownProfile">
        <a href="#" class="nav-btn-link auth user"><%= currentUser.username %> &#11167;</a>
        <div class="dropDownProfileMenu">
          <a class="dropDownLink" href="/profile">My Profile</a>
          <a class="dropDownLink" href="/">My Orders</a>
          <a class="dropDownLink" href="/logout">Sign Out</a>
        </div>
     </div>
    <% } %>  
    <button class="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </button>
</nav>
<div class="search_area">
  <form action="" class="search_components">
    <label for="formGroupExampleInput"></label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Search...">
    <button class="search_btn btn btn-primary"><img src="/images/search-3-24.png" alt="" class=""></button>
  </form>
</div>
</div>

<main class="sidebar">
  <div class="side-links">
    <a href="/" class="side-btn-link">🏠Home</a>
    <a href="/create" class="side-btn-link">👉 Create 👈</a>
    <a href="/pages" class="side-btn-link">Pages</a>
    <a class="side-btn-link search_icon"><img src="/images/search-3-24.png" alt="" class="search_image"></a>
  </div>
  <div class="auth-links">
    <% if(currentUser === undefined){ %> 
    <a href="/login" class="side-btn-link auth">Login</a>
    <a href="/register" class="side-btn-link auth">Register</a>
    <% } else{ %>
      <a href="/profile" class="side-btn-link auth"><%= currentUser.username %></a>
      <a href="/logout" class="side-btn-link auth">Logout</a>
    <% } %>  
  </div>
</main>


<script src="/javascript/toggle_button.js"></script>

DOM JS:

const hamburger = document.querySelector('.hamburger');
const navbar = document.querySelector('.navbar');
const navBtnLink = document.querySelectorAll('.nav-btn-link');
const sidebar = document.querySelector('.sidebar');
const searchIcon = document.querySelectorAll('.search_icon');
const searchArea = document.querySelector('.search_area');
const user = document.querySelector('.user');
const dropDownProfileMenu = document.querySelector('.dropDownProfileMenu');
const body = document.querySelector('body');


hamburger.addEventListener('click',function(){
    this.classList.toggle('is-active');
    sidebar.classList.toggle('is-active');
    navbar.classList.toggle('is-active');
    searchArea.classList.remove('is-active');
})
user.addEventListener('click', function(){
    dropDownProfileMenu.classList.toggle('is-active');
})
for(let i=0;i<searchIcon.length;i++){
searchIcon[i].addEventListener('click', function(e){
    searchArea.classList.toggle('is-active');
    sidebar.classList.remove('is-active');
    hamburger.classList.remove('is-active');
})
}