From 8758973e05d86ed25acad035df49b1fea33e30e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rton=20Lente?= <marton@blender.org>
Date: Fri, 27 Sep 2024 11:15:03 +0200
Subject: [PATCH 1/3] UI: Implement template markup web-assets v2 component
 nav-pills base

Make base changes to templates markup to use web-assets v2 nav-pills component.
---
 .../bid_main/components/sidebar_nav_item.html |  5 ++-
 templates/layout.html                         | 40 ++++++++++---------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/bid_main/templates/bid_main/components/sidebar_nav_item.html b/bid_main/templates/bid_main/components/sidebar_nav_item.html
index 6856950..87e9f10 100644
--- a/bid_main/templates/bid_main/components/sidebar_nav_item.html
+++ b/bid_main/templates/bid_main/components/sidebar_nav_item.html
@@ -1,4 +1,7 @@
 <a class="nav-pills-item {% if url_match == request.path %}active{% endif %}" href="{% url url %}">
-  {% if icon %}<i class="{{ icon }}"></i>{% endif %}
+  {% if icon %}
+    <i class="{{ icon }}"></i>
+  {% endif %}
+
   {{ title }}
 </a>
diff --git a/templates/layout.html b/templates/layout.html
index c11b780..fed9ea7 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -42,31 +42,33 @@
 
         <div class="row">
           {% block sidebar %}
-          <div class="col-md-3">
-            <nav class="box p-2 mb-3">
-              <div class="nav-drawer-body">
-                <div class="nav nav-pills flex-column" role="tablist" aria-orientation="vertical">
-                  {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:index" title="Home" url_match="/" icon="i-home" %}
-                  {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:profile" title="Profile" url_match="/settings/profile" icon="i-user" %}
-                  <div class="nav-pills-divider"></div>
+            <div class="col-md-3">
+              <div aria-orientation="vertical" class="flex-column mb-3 nav nav-pills" role="tablist">
+                {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:index" title="Home" url_match="/" icon="i-home" %}
 
-                  {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:active_sessions" title="Sessions" url_match="/active-sessions" icon="i-activity" %}
-                  {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:auth_tokens" title="Authenticated Apps" url_match="/applications" icon="i-link" %}
-                  {% if user.bid_main_oauth2application.count %}
+                {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:profile" title="Profile" url_match="/settings/profile" icon="i-user" %}
+
+                <div class="nav-pills-divider"></div>
+
+                {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:active_sessions" title="Sessions" url_match="/active-sessions" icon="i-activity" %}
+
+                {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:auth_tokens" title="Authenticated Apps" url_match="/applications" icon="i-link" %}
+
+                {% if user.bid_main_oauth2application.count %}
                   {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:developer_applications" title="Developer Apps" url_match="/developer/applications" icon="i-code" %}
-                  {% endif %}
+                {% endif %}
 
-                  <div class="nav-pills-divider"></div>
+                <div class="nav-pills-divider"></div>
 
-                  {% if show_mfa %}
+                {% if show_mfa %}
                   {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:mfa" title="Multi-factor Authentication" url_match="/settings/profile" icon="i-shield" %}
-                  {% endif %}
-                  {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:password_change" title="Password" url_match="/change" icon="i-shield" %}
-                  {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:delete_user" title="Delete Account" url_match="/delete-my-account" icon="i-trash" %}
-                </div>
+                {% endif %}
+
+                {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:password_change" title="Password" url_match="/change" icon="i-asterisk" %}
+
+                {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:delete_user" title="Delete Account" url_match="/delete-my-account" icon="i-trash" %}
               </div>
-            </nav>
-          </div>
+            </div>
           {% endblock %}
 
           <div class="{% block column_class %}col-md-9{% endblock %} mx-auto">
-- 
2.30.2


From 177b1faf5fa2f441284434d707542431ec21c25a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rton=20Lente?= <marton@blender.org>
Date: Fri, 27 Sep 2024 11:16:03 +0200
Subject: [PATCH 2/3] Cleanup: Remove style redundant nav-pills overrides

---
 bid_main/static/bid_main/styles/main.sass | 28 -----------------------
 1 file changed, 28 deletions(-)

diff --git a/bid_main/static/bid_main/styles/main.sass b/bid_main/static/bid_main/styles/main.sass
index 2659054..14c200b 100644
--- a/bid_main/static/bid_main/styles/main.sass
+++ b/bid_main/static/bid_main/styles/main.sass
@@ -375,34 +375,6 @@ form
     position: relative
     top: calc(var(--border-width) * -1)
 
-// TODO: Move to web-assets. This is copied over from Extensions.
-.nav-pills
-  @extend .dropdown-menu
-
-  box-shadow: none
-  display: block
-  position: relative
-
-.nav-pills-item
-  @extend .dropdown-item
-
-  +margin(1, bottom)
-  white-space: normal
-
-  &.active
-    background-color: var(--color-accent-bg)
-    +fw-normal
-
-  &:last-child
-    +margin(0, bottom)
-
-.nav-pills-divider
-  @extend .dropdown-divider
-
-  +margin(0, top)
-  +margin(1, bottom)
-
-
 /* Larger icons */
 i.icon.icon-lg
   svg
-- 
2.30.2


From 3e43b1f80f645d570c966de941d581a026541271 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rton=20Lente?= <marton@blender.org>
Date: Fri, 27 Sep 2024 11:20:28 +0200
Subject: [PATCH 3/3] UI: Improve template layout component nav-pills markup
 semantics

---
 templates/layout.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/layout.html b/templates/layout.html
index fed9ea7..4074a23 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -43,7 +43,7 @@
         <div class="row">
           {% block sidebar %}
             <div class="col-md-3">
-              <div aria-orientation="vertical" class="flex-column mb-3 nav nav-pills" role="tablist">
+              <nav aria-orientation="vertical" class="flex-column mb-3 nav nav-pills" role="tablist">
                 {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:index" title="Home" url_match="/" icon="i-home" %}
 
                 {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:profile" title="Profile" url_match="/settings/profile" icon="i-user" %}
@@ -67,7 +67,7 @@
                 {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:password_change" title="Password" url_match="/change" icon="i-asterisk" %}
 
                 {% include "bid_main/components/sidebar_nav_item.html" with url="bid_main:delete_user" title="Delete Account" url_match="/delete-my-account" icon="i-trash" %}
-              </div>
+              </nav>
             </div>
           {% endblock %}
 
-- 
2.30.2