common/static/common/styles/_extension.sass

@@ -352,3 +352,27 @@
     &:hover,
     &:focus
       color: var(--color-warning)
+
+// TODO: consider adding component boxed nav generic to web-assets, and make variants on top of that
+.nav-pills
+  @extend .dropdown-menu
+
+  box-shadow: none
+  display: block
+  position: relative
+
+.nav-pills-item
+  @extend .dropdown-item
+
+  +margin(1, bottom)
+
+  &.active
+    background-color: var(--color-accent-bg)
+
+  &:last-child
+    +margin(0, bottom)
+
+.nav-pills-divider
+  @extend .dropdown-divider
+
+  +margin(0, top)

common/templates/common/components/nav_item.html

@@ -1,3 +1,4 @@
+{# TODO: check if template is used and needed #}
 <li class="nav-item {% include "common/components/_nav_item_active" %}">
   {% include "common/components/nav_link.html" %}
 </li>

common/templates/common/components/nav_link.html

@@ -1,5 +1,5 @@
 {% if name %}
-  <a class="nav-link {% include "common/components/_nav_item_active" %} {% if classes %}{{ classes }}{% endif %}" href="{% url name %}">{{ title }}</a>
+  <a class="nav-pills-item {% include "common/components/_nav_item_active" %} {% if classes %}{{ classes }}{% endif %}" href="{% url name %}">{{ title }}</a>
 {% elif path %}
-  <a class="nav-link {% include "common/components/_nav_item_active" %} {% if classes %}{{ classes }}{% endif %}" href="{{ path }}">{{ title }}</a>
+  <a class="nav-pills-item {% include "common/components/_nav_item_active" %} {% if classes %}{{ classes }}{% endif %}" href="{{ path }}">{{ title }}</a>
 {% endif %}

users/templates/users/settings/base.html

@@ -12,7 +12,7 @@
       <div class="row">
         <div class="d-none d-md-block col-md-3">
           <div class="is-sticky pt-4">
-            <nav class="box nav-drawer-nested">
+            <nav class="box nav-drawer-nested p-3">
               <div class="nav-drawer-body fw-bold">
                 {% include 'users/settings/tabs.html' %}
               </div>

users/templates/users/settings/tabs.html

@@ -6,6 +6,8 @@
       {% include "common/components/nav_link.html" with name="teams:list" title="Teams" classes="i-users py-2" %}
     {% endif %}
 
+    <div class="nav-pills-divider"></div>
+
     {% include "common/components/nav_link.html" with name="users:my-profile-delete" title="Delete account" classes="i-trash py-2" %}
   </div>
 {% endspaceless %}