From cd7dc57062fbd2dfd325736f7a8e8eda2ba853fc Mon Sep 17 00:00:00 2001
From: Craig Lockwood <craig@1ockwood.dev>
Date: Mon, 11 Nov 2024 21:02:43 -0500
Subject: [PATCH] Add active states to top-level nav menu items

---
 bookmarks/styles/theme-dark.css             |  2 +-
 bookmarks/styles/theme/buttons.css          | 12 +++++++++---
 bookmarks/templates/bookmarks/nav_menu.html |  6 +++---
 bookmarks/templatetags/shared.py            |  5 +++++
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/bookmarks/styles/theme-dark.css b/bookmarks/styles/theme-dark.css
index bec8ca33..3a10d5ab 100644
--- a/bookmarks/styles/theme-dark.css
+++ b/bookmarks/styles/theme-dark.css
@@ -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 {
diff --git a/bookmarks/styles/theme/buttons.css b/bookmarks/styles/theme/buttons.css
index 21bb7e3b..bc9fd4dd 100644
--- a/bookmarks/styles/theme/buttons.css
+++ b/bookmarks/styles/theme/buttons.css
@@ -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 */
diff --git a/bookmarks/templates/bookmarks/nav_menu.html b/bookmarks/templates/bookmarks/nav_menu.html
index e8173612..eb8be609 100644
--- a/bookmarks/templates/bookmarks/nav_menu.html
+++ b/bookmarks/templates/bookmarks/nav_menu.html
@@ -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>
diff --git a/bookmarks/templatetags/shared.py b/bookmarks/templatetags/shared.py
index 5da3c1c3..79b5a8c2 100644
--- a/bookmarks/templatetags/shared.py
+++ b/bookmarks/templatetags/shared.py
@@ -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]