{# Navigation #}
<nav class="navbar navbar-dark bg-dark flex-column" style="width: 280px; height: 100vh; position: fixed; left: 0; top: 0; overflow-y: auto;">
	<div class="p-3">
		<a class="navbar-brand fw-bold" href="#">🎮 DarkflameServer</a>
	</div>

	<ul class="navbar-nav flex-column w-100 flex-grow-1 p-3">
		<li class="nav-item">
			<a class="nav-link active" href="#">Home</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#accounts">Accounts</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#characters">Characters</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#properties">Properties</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#players">Players</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#servers">Servers</a>
		</li>
		<li class="nav-item mt-auto">
			<a class="nav-link" href="#" id="logoutBtn">Logout</a>
		</li>
	</ul>
</nav>