<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
  <link rel="shortcut icon" href="/assets/images/favicon.png" type="image/png">
  <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="/assets/css/bootstrap-icons.css">
  <link rel="stylesheet" href="/assets/css/styles.css">
</head>
<body>
  <header class="header">
    <div id="sticky-wrapper" class="sticky-wrapper" style="height: 78px;">
    <nav class="navbar navbar-expand-lg">
      <div class="container">
        <a class="navbar-brand" href="/">
          <i class="bi-back"></i>
          <span>TechForum</span>
        </a>
        <div class="d-lg-none ms-auto me-4">
          <a href="#top" class="navbar-icon bi-person smoothscroll"></a>
        </div>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
          aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-lg-5 me-lg-auto">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="/posts" id="navbarLightDropdownMenuLink" role="button"
                data-bs-toggle="dropdown" aria-expanded="false">Home</a>
              <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="navbarLightDropdownMenuLink">
                <li><a class="dropdown-item" href="/posts">News Feed</a></li>

                <li><a class="dropdown-item" href="/my-posts">My Posts</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link click-scroll" href="/about-us">About Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link click-scroll" href="/contact-us">Contact Us</a>
            </li>
          </ul>
          <% if (userId) { %>
          <div class="d-none d-lg-block dropdown">
            <a href="#top" class="navbar-icon bi-person smoothscroll" id="userprofilemenu" 
            role="button" data-bs-toggle="dropdown" aria-expanded="false"></a>
            <ul class="dropdown-menu dropdown-menu-light" aria-labelledby="userprofilemenu">
              <li><a class="dropdown-item" href="/auth/profile">Profile</a></li>
              <li><a class="dropdown-item" href="/auth/logout">Logout</a></li>
            </ul>
          </div>
          <% } %>
        </div>
      </div>
    </nav>
    </div>
  </header>
  <!-- .header -->
  <main class="main">
