akf-forum/views/extra/navbar.ejs

<% if (user?.admin){ %>
<div class="admin-bar">
  <a href="/admin" class="admin-bar">You are admin, and you can go your page!</a>
</div>

<% } %>

<div class="header">
  <a class="logo" href="/"><%= forum_name.toUpperCase() %> <span>FORUM</span></a>
  <div class="buttons">

    <% if (user){ %>
    <a href="<%=user.getLink() %>" class="btn-outline-primary">
      <div class="box-username"><%= user.name %>
        <div class="avatar"><img src="<%=user.avatar %>"></div>
      </div>
    </a>
    <a id="logout" href="/login" class="btn-primary">Logout</a>
    <a onclick="invert()" class="btn-outline-primary"><%=(user.theme === "default" ? "black" : "default" ) + " mode" %></a>
    <script>
      async function invert() {
        await fetch('/api/users/<%= user.id %>', {
          method: 'PATCH',
          body: JSON.stringify({ theme: "<%=user.theme === `default` ? `black` : `default` %>" }),
          headers: {
            "Content-Type": "application/json"
          }
        });
        location.reload()
      }
    </script>
    <% } else { %>

    <a id="login" href="/login" class="btn-primary">Login</a>
    <a href="/register" class="btn-outline-primary">Register</a>
    <script>
      document.getElementById("login").href += "?redirect=" + window.location.pathname;
    </script>
    <% } %>

  </div>
</div>
<div class="menu">
  <a href="/threads/create/" class="menu-item">Create Thread</a>
  <a href="/categories" class="menu-item">Categories</a>
  <a href="/threads" class="menu-item">Threads</a>
  <a href="/users" class="menu-item">Users</a>
  <a href="/search" class="menu-item">Search</a>
  <script>
    const menuItems = document.getElementsByClassName("menu-item");

    for (let i = 0; i < menuItems.length; i++)
      if (window.location.pathname.includes(menuItems[i].getAttribute("href"))) {
        menuItems[i].classList.add("active-menu");
        break;
      }
  </script>
</div>