hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Active navbar link indicator 3000

Browse Source 
Totally not inspired by Discord
This commit is contained in:
David Lapshin
2024-05-27 01:33:51 +03:00
parent 2f2676bbf1
commit a08d719088
2 changed files with 40 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
sass/_nav.scss
View File

@ -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 {

21
templates/partials/nav.html
View File

@ -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 %}