From 4149beb8d3c1ce8a86cc77ddb88877a68f36d785 Mon Sep 17 00:00:00 2001
From: Ivan Fonseca <ivanfon@riseup.net>
Date: Sun, 22 Jul 2018 10:41:43 -0400
Subject: [PATCH] Use active class to highlight current page

---
 tildes/scss/modules/_nav.scss                 |  5 ++
 .../tildes/templates/macros/user_menu.jinja2  | 80 ++++++++++---------
 2 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/tildes/scss/modules/_nav.scss b/tildes/scss/modules/_nav.scss
index 2c552bd..6cb15c4 100644
--- a/tildes/scss/modules/_nav.scss
+++ b/tildes/scss/modules/_nav.scss
@@ -11,6 +11,11 @@
       font-size: 0.8rem;
       font-weight: normal;
       border-bottom: 0;
+
+      &.active > a {
+        color: $blue;
+        text-decoration: underline;
+      }
     }
   }
 
diff --git a/tildes/tildes/templates/macros/user_menu.jinja2 b/tildes/tildes/templates/macros/user_menu.jinja2
index 3b1ed4d..f841f1f 100644
--- a/tildes/tildes/templates/macros/user_menu.jinja2
+++ b/tildes/tildes/templates/macros/user_menu.jinja2
@@ -1,66 +1,68 @@
 {% macro render_user_menu(current_page) %}
+  {% set route = request.matched_route.name %}
+
   <h2>User menu</h2>
   <ul class="nav">
     <li>Profile</li>
     <ul class="nav">
-      <li class="nav-item"><a href="/user/{{ request.user }}">
-        {% if(current_page == 'profile_activity') %}<u>{% endif %}
-        Recent activity
-        {% if(current_page == 'profile_activity') %}</u>{% endif %}
-      </a></li>
+      <li class="nav-item {{ 'active' if route == 'user' else ''}}">
+        <a href="/user/{{ request.user }}">
+          Recent activity
+        </a>
+      </li>
     </ul>
 
     <li>Notifications</li>
     <ul class="nav">
       {% if request.user.num_unread_notifications > 0 %}
-        <li class="nav-item"><strong><a href="/notifications/unread">
-          {% if(current_page == 'notifications_unread') %}<u>{% endif %}
-          Unread ({{ request.user.num_unread_notifications }})
-          {% if(current_page == 'notifications_unread') %}</u>{% endif %}
-        </a></strong></li>
+        <li class="nav-item {{ 'active' if route == 'notifications_unread' else '' }}">
+          <strong><a href="/notifications/unread">
+            Unread ({{ request.user.num_unread_notifications }})
+          </a></strong>
+        </li>
       {% endif %}
-      <li class="nav-item"><a href="/notifications">
-        {% if(current_page == 'notifications_prev') %}<u>{% endif %}
-        Previously read
-        {% if(current_page == 'notifications_prev') %}</u>{% endif %}
-      </a></li>
+      <li class="nav-item {{ 'active' if route == 'notifications' else '' }}">
+        <a href="/notifications">
+          Previously read
+        </a>
+      </li>
     </ul>
 
     <li>Messages</li>
     <ul class="nav">
       {% if request.user.num_unread_messages > 0 %}
-        <li class="nav-item"><strong><a href="/messages/unread">
-          {% if(current_page == 'messages_unread') %}<u>{% endif %}
+        <li class="nav-item {{ 'active' if route == 'messages_unread' else '' }}">
+          <strong><a href="/messages/unread">
           Unread ({{ request.user.num_unread_messages }})
-          {% if(current_page == 'messages_unread') %}</u>{% endif %}
-        </a></strong></li>
+          </a></strong>
+        </li>
       {% endif %}
-      <li class="nav-item"><a href="/messages">
-        {% if(current_page == 'messages_inbox') %}<u>{% endif %}
-        Inbox
-        {% if(current_page == 'messages_inbox') %}</u>{% endif %}
-      </a></li>
-      <li class="nav-item"><a href="/messages/sent">
-        {% if(current_page == 'messages_sent') %}<u>{% endif %}
-        Sent messages
-        {% if(current_page == 'messages_sent') %}</u>{% endif %}
-      </a></li>
+      <li class="nav-item {{ 'active' if route == 'messages' else '' }}">
+        <a href="/messages">
+          Inbox
+        </a>
+      </li>
+      <li class="nav-item {{ 'active' if route == 'messages_sent' else '' }}">
+        <a href="/messages/sent">
+          Sent messages
+        </a>
+      </li>
     </ul>
 
     <li>Misc</li>
     <ul class="nav">
       {% if request.user.invite_codes_remaining or num_active_invite_codes|default(0) %}
-        <li class="nav-item"><strong><a href="/invite">
-          {% if(current_page == 'misc_invite') %}<u>{% endif %}
-          Invite someone ({{ request.user.invite_codes_remaining + num_active_invite_codes|default(0) }})
-          {% if(current_page == 'misc_invite') %}</u>{% endif %}
-        </a></strong></li>
+        <li class="nav-item {{ 'active' if route == 'invite' else '' }}">
+          <strong><a href="/invite">
+            Invite someone ({{ request.user.invite_codes_remaining + num_active_invite_codes|default(0) }})
+          </a></strong>
+        </li>
       {% endif %}
-      <li class="nav-item"><a href="/settings">
-        {% if(current_page == 'misc_settings') %}<u>{% endif %}
-        Settings
-        {% if(current_page == 'misc_settings') %}</u>{% endif %}
-      </a></li>
+      <li class="nav-item {{ 'active' if route == 'settings' else '' }}">
+        <a href="/settings">
+          Settings
+        </a>
+      </li>
       <li class="nav-item"><a href="/logout">Log out</a></li>
     </ul>
   </ul>