Add active states to top-level nav menu items

This commit is contained in:
Craig Lockwood 2024-11-11 21:02:43 -05:00
parent c3149409b0
commit cd7dc57062
No known key found for this signature in database
GPG key ID: DB0475ED19FF40E0
4 changed files with 18 additions and 7 deletions

View file

@ -102,7 +102,7 @@
--btn-error-text-color: var(--contrast-text-color);
--btn-link-text-color: var(--link-color);
--btn-link-hover-text-color: var(--link-color);
--btn-link-hover-text-color: var(--secondary-link-color);
}
:root {

View file

@ -21,7 +21,7 @@
--btn-error-text-color: var(--contrast-text-color);
--btn-link-text-color: var(--link-color);
--btn-link-hover-text-color: var(--link-color);
--btn-link-hover-text-color: var(--secondary-link-color);
}
.btn {
@ -135,10 +135,16 @@
&:focus,
&:hover,
&:active,
&.active {
&:active {
text-decoration: none;
}
&.active {
text-decoration: underline;
text-decoration-color: var(--btn-link-text-color);
text-decoration-thickness: 2px;
text-underline-offset: 0.5em;
}
}
/* Button Sizes */

View file

@ -4,11 +4,11 @@
<div class="hide-md">
<a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" tabindex="0">
<button class="btn btn-link dropdown-toggle {% if request.path|starts_with:'/bookmarks' and not request.path|starts_with:'/bookmarks/new' %}active{% endif %}" tabindex="0">
Bookmarks
</button>
<ul class="menu">
<li class="menu-item">
<li class="menu-item ">
<a href="{% url 'bookmarks:index' %}" class="menu-link">Active</a>
</li>
<li class="menu-item">
@ -27,7 +27,7 @@
</li>
</ul>
</div>
<a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
<a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link {% if request.path|starts_with:"/settings" %}active{% endif %}">Settings</a>
<form class="d-inline" action="{% url 'logout' %}" method="post">
{% csrf_token %}
<button type="submit" class="btn btn-link">Logout</button>

View file

@ -87,6 +87,11 @@ def hash_tag(tag_name):
return "#" + tag_name
@register.filter(name="starts_with")
def starts_with(text, prefix):
return text.startswith(prefix)
@register.filter(name="first_char")
def first_char(text):
return text[0]