<!-- navbar -->
<nav
	class="navbar navbar-expand-lg bg-body-tertiary bg-dark border-bottom border-body"
	data-bs-theme="dark"
>
	<div class="container col-md-6 col-12">
		<a class="navbar-brand" href="/">myBloog</a>
		<button
			class="navbar-toggler"
			type="button"
			data-bs-toggle="collapse"
			data-bs-target="#navbarSupportedContent"
			aria-controls="navbarSupportedContent"
			aria-expanded="false"
			aria-label="Toggle navigation"
		>
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="navbar-nav me-auto mb-2 mb-lg-0">
				<li class="nav-item">
					<a class="nav-link <%= (page == "Home")? "active" : "" %>" aria-current="page" href="/"
						>Home</a
					>
				</li>
				<li class="nav-item">
					<a class="nav-link <%= (page == "myProfile")? "active" : "" %>" href="/profile">My Profile</a>
				</li>
				<li class="nav-item">
					<a class="nav-link <%= (page == "Blog Create")? "active" : "" %>" href="/blog/create">Create Post</a>
				</li>
			</ul>

			<div class="dropdown">
				<a
					class="btn dropdown-toggle navbar-profile"
					role="button"
					data-bs-toggle="dropdown"
					aria-expanded="false"
				>
					<img
						src="<%= user.img %>"
						class="rounded-circle mr-2"
						alt="User Profile"
						style="width: 40px; height: 40px;"
					/>
					<h5><%= user.username %></h5>
				</a>

				<ul class="dropdown-menu dropdown-menu-dark">
					<li><a class="dropdown-item <%= (page == "profile")? "active" : "" %>" href="/profile">Profile</a></li>
					<li><a class="dropdown-item <%= (page == "settings")? "active" : "" %>" href="/settings">Settings</a></li>
					<li>
						<a class="dropdown-item text-danger" href="/logout">Logout</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>
