Active navbar link indicator 3000

Totally not inspired by Discord

sass/_nav.scss

@@ -32,6 +32,7 @@
 		}
 
 		a {
+			position: relative;
 			transition-duration: var(--transition);
 			transition-property: box-shadow, background-color, color, transform;
 			border-radius: 999px;
@@ -49,6 +50,27 @@
 			&:active {
 				transform: scale(var(--active));
 			}
+
+			&.active {
+				&:hover::before {
+					right: 1rem;
+					left: 1rem;
+					border-bottom: 0.25rem solid var(--primary-color);
+				}
+
+				&::before {
+					display: block;
+					position: absolute;
+					right: 1.5rem;
+					bottom: -0.25rem;
+					left: 1.5rem;
+					transition-duration: var(--transition);
+					transition-property: right, left, border-bottom;
+					border-bottom: 0.25rem solid var(--fg-muted-2);
+					border-radius: 999px;
+					content: "";
+				}
+			}
 		}
 
 		#main-content {

templates/partials/nav.html

@@ -4,16 +4,31 @@
 		<a href="#main" id="main-content" tabindex="0">Skip to main content</a>
 		<ul>
 			<li id="home">
-				<a href="{{ get_url(path='/') | safe }}">{{ config.title }}</a>
+				<a href="{{ get_url(path='/') | safe }}"
+					{% if current_url | default(value='/') | trim_end_matches(pat='/') | safe == get_url(path='/') | safe %}
+						class="active"
+					{% endif %}>
+					{{ config.title }}
+				</a>
 			</li>
 			{% for link in config.extra.nav.links %}
 				{%- if link.url is matching('https?://') %}
 					<li>
-						<a href="{{ link.url | safe }}">{{ link.name }}</a>
+						<a href="{{ link.url | safe }}"
+							{% if current_url | default(value='/') | safe == link.url | safe %}
+								class="active"
+							{% endif %}>
+							{{ link.name }}
+						</a>
 					</li>
 				{%- else %}
 					<li>
-						<a href="{{ get_url(path=link.url | safe )}}">{{ link.name }}</a>
+						<a href="{{ get_url(path=link.url | safe )}}"
+							{% if current_url | default(value='/') | safe == get_url(path=link.url) | safe %}
+								class="active"
+							{% endif %}>
+							{{ link.name }}
+						</a>
 					</li>
 				{%- endif %}
 			{% endfor %}