JaBa/dashboard/views/includes/sidebar.ejs

<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
	<!-- sidebar: style can be found in sidebar.less -->
	<section class="sidebar">
		<!-- Sidebar user panel -->
		<div class="user-panel">
			<div class="pull-left image">
				<img src="<%= user.displayAvatarURL %>" class="img-circle" alt="User Image">
			</div>
			<div class="pull-left info">
				<p><%= user.username %></p>
				<a href="#"><i
						class="fa fa-circle text-<%= user.status === 'dnd' ? 'danger' : user.status === 'idle' ? 'warning' : user.status === 'online' ? 'success' : ''%>"></i>
					<%= translate("common:STATUS_"+user.status.toUpperCase()) %></a>
			</div>
		</div>
		<!-- search form -->
		<!--
		<form action="/selector" method="get" class="sidebar-form">
		<div class="input-group">
			<input type="text" name="q" class="form-control" placeholder="<%= translate("dashboard:SEARCH") %>">
			<span class="input-group-btn">
				<button type="submit" id="search-btn" class="btn btn-flat">
					<i class="fa fa-search"></i>
				</button>
			</span>
		</div>
		</form>
		-->
		<!-- /.search form -->
		<!-- sidebar menu: : style can be found in sidebar.less -->
		<ul class="sidebar-menu" data-widget="tree">
			<li class="header"><%= translate("dashboard:SERVERS_MANAGEMENT").toUpperCase() %></li>
			<li class="treeview menu-open">
			<li><a href="/selector"><i class="fa fa-home"></i> <span><%= translate("dashboard:SELECTOR") %></span></a>
			</li>
			</li>
			<li class="treeview">
				<a href="/manage/">
					<i class="fa fa-server"></i>
					<span><%= translate("dashboard:SERVERS_LIST") %></span>
					<span class="pull-right-container">
						<i class="fa fa-angle-left pull-right"></i>
					</span>
				</a>
				<% if(user.displayedGuilds) { %>
				<ul class="treeview-menu">
					<% user.displayedGuilds.forEach((guild) => { %>
					<li><a href="<%= guild.settingsUrl %>"><i
								class="fa fa-circle-o text-<%= guild.owner ? 'blue' : 'grey' %>"></i>
							<%= guild.name %></a></li>
					<% }); %>
				</ul>
				<% } %>
			</li>
		</ul>
		<ul class="sidebar-menu" data-widget="tree">
			<li class="header"><%= translate("common:PROFILE").toUpperCase() %></li>
			<li class="treeview menu-open">
			<li><a href="/commands"><i class="fa fa-wrench"></i> <span>Команды</span></a></li>
			<li><a href="/updates"><i class="fa fa-wrench"></i> <span>Обновления</span></a></li>
			<li><a href="/settings"><i class="fa fa-gear"></i> <span><%= translate("common:SETTINGS") %></span></a></li>
			</li>
		</ul>
	</section>
	<!-- /.sidebar -->
</aside>

<script>
	$(document).ready(function () {
		// get current URL path and assign 'active' class
		let pathname = window.location.pathname;
		$(`.sidebar-menu > li > a[href="${pathname}"]`).parent().addClass("active");
		$(`.sidebar-menu > li > ul > li > a[href="${window.location.pathname}"]`).parent().addClass("active");
		$(`.sidebar-menu > li > a[href="/${window.location.pathname.split("/")[1]}/"]`).parent().addClass(
		"active");
	});
</script>