common/static/common/styles/studio/_navdrawer.sass

@@ -111,8 +111,12 @@
 
 .nav-drawer-body
   @include media-breakpoint-up(md)
+    display: flex
+    flex-direction: column
+    gap: var(--spacer-1)
     height: 100%
     max-height: calc(100vh - var(--nav-global-navbar-height))
+    +padding(2, bottom)
 
 .nav-drawer-list
   @include media-breakpoint-down(sm)
@@ -145,15 +149,27 @@
   transition: margin-left var(--nav-drawer-animation-duration)
 
 .drawer-nav-group, .drawer-nav-header
-  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, p, a
+  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, a
     margin-bottom: 0
 
+.drawer-nav-group
+  display: flex
+  flex-direction: column
+  gap: var(--spacer-1)
+  +padding(1, bottom)
+
 .drawer-nav-list
-  background: var(--navbar-bg)
+  background-color: var(--color-bg-secondary)
+  border-radius: var(--border-radius)
   color: var(--color-text-secondary)
+  display: flex
+  flex-direction: column
+  gap: var(--spacer-1)
   list-style: none
-  margin: var(--spacer) / 4 0
+  +margin(2, x)
-  padding: var(--spacer) / 4 0
+  +margin(1, y)
+  +padding(1, x)
+  +padding(2, y)
 
   &.training
     .drawer-nav-section
@@ -197,14 +213,25 @@
 
 .drawer-nav-section-link
   align-items: center
+  border-radius: var(--border-radius)
   color: inherit
   display: flex
   flex-direction: row
   flex-grow: 1
-  padding: calc(var(--spacer) * 0.5) var(--spacer)
+  padding: var(--spacer-1)
-  transition: $transition-base
+  margin: 0 var(--spacer-1)
+  transition: background-color var(--transition-speed), color var(--transition-speed)
   width: 100%
 
+  &:hover
+    background: var(--color-bg-primary)
+    color: var(--color-text-primary)
+
+  &.active
+    background: var(--color-bg-primary)
+    color: var(--color-text-primary)
+    +fw-bold
+
   .drawer-nav-section-icon-progress .progress
     transition: $transition-base
 
@@ -214,36 +241,13 @@
 
   h4, .h4
     margin-bottom: 0
-    line-height: 1.5
-    color: var(--color-text-secondary)
-    transition: $transition-base
 
   span
     line-height: 1
 
-  &::before
-    background: var(--color-bg-primary)
-    border-radius: $border-radius
-    content: close-quote
-    height: calc(100% - var(--spacer) / 2)
-    left: var(--spacer) / 2
-    opacity: 0
-    position: absolute
-    top: var(--spacer) / 4
-    transition: $transition-base
-    width: calc(100% - var(--spacer))
-    pointer-events: none
-
   &:hover
     text-decoration: none
 
-    .drawer-nav-section-icon-progress .progress
-      stroke: var(--color-accent)
-
-    // TODO: fix drawer-nav-section-link ::before
-    &::before
-      opacity: 1
-
     // Fix before overflowing content on hover
     i,
     p
@@ -252,13 +256,6 @@
   >i
     margin-right: (var(--spacer) / 2)
 
-  &.active
-    h4, .h4
-    .drawer-nav-section-icon
-      &-progress
-        .progress
-          stroke: var(--color-accent)
-
   .subtitle
     color:
     font-size: var(--fs-xs)
@@ -276,10 +273,9 @@
     opacity: 1
 
 .drawer-nav-header
-  margin-top: -$spacer / 4
+  border-bottom: var(--border-width) solid var(--color-bg-alt)
-  border-bottom: var(--border-width) solid var(--box-bg-color)
+  +margin(3, x)
-  margin-bottom: $spacer / 4
+  +padding(2, y)
-  padding: $spacer
 
   @include media-breakpoint-down(sm)
     padding: $spacer / 2 $spacer
@@ -294,8 +290,9 @@
   position: absolute
   width: 24px
 
-  h5
+  span
     font-size: var(--fs-sm)
+    +fw-bold
     left: 50%
     line-height: 0
     position: absolute
@@ -334,20 +331,18 @@ $circle-circumference: $circle-diameter * 3.14
   .progress
     fill: none
     //not using the $progress-bg here as it's too strong, meant for overlaying images
-    // TODO: @web-sasets check variable $highlight-white-strong replacement
+    stroke: var(--color-accent)
-    // stroke: $highlight-white-strong
-    stroke: var(--color-text-secondary)
     stroke-dasharray: $circle-circumference
     stroke-dashoffset: calc((1 - var(--progress-fraction, 0)) * #{$circle-circumference}px)
     stroke-linecap: round
-    stroke-width: 3px
+    stroke-width: 2px
 
   .background
     fill: none
-    // stroke: $highlight-white
+    stroke: currentColor
-    stroke: var(--color-text-secondary)
     stroke-linecap: round
-    stroke-width: 3px
+    stroke-width: 1px
+    opacity: .33
 
 .drawer-nav-dropdown-wrapper
   @include button-float
@@ -361,33 +356,32 @@ $circle-circumference: $circle-diameter * 3.14
 
 .drawer-nav-dropdown
   align-items: center
+  border-radius: var(--border-radius)
   color: var(--nav-global-color-text)
   cursor: pointer
   display: flex
   flex-grow: 1
-  margin-bottom: 0
+  margin: 0 var(--spacer-2)
   max-width: 100%
-  padding: $spacer / 2 $spacer
+  padding: var(--spacer-1) var(--spacer-2)
   position: relative
-  transition: $transition-base
+  transition: background-color var(--transition-speed), color var(--transition-speed)
   user-select: none
 
-  &.dropdown
+  &:hover
-    max-width: calc(100% - 44px)
-
-  &::before
-    // background: $highlight-white
     background: var(--color-bg-primary)
-    border-radius: $border-radius
+    color: var(--color-text-primary)
-    content: close-quote
+
-    height: calc(100% - #{$spacer / 2})
+  &.active
-    left: $spacer / 2
+    background: var(--color-bg-primary)
-    opacity: 0
+    color: var(--color-text-primary)
-    position: absolute
+    +fw-bold
-    top: $spacer / 4
+
-    transition: $transition-base
+    i
-    width: calc(100% - #{$spacer})
+      color: var(--color-text-primary)
-    pointer-events: none
+
+    &+.icon
+      color: var(--color-text-primary)
 
   &.collapsed
     i
@@ -396,9 +390,6 @@ $circle-circumference: $circle-diameter * 3.14
   &:hover
     text-decoration: none
 
-    &::before
-      opacity: 1
-
     // Fix before overflowing content on hover
     i,
     span
@@ -414,9 +405,9 @@ $circle-circumference: $circle-diameter * 3.14
     flex-grow: 0
     flex-shrink: 1
     justify-content: center
-    margin-left: - $spacer / 2
+    +padding(3, x)
-    min-width: calc(var(--spacer) * 3)
+    margin-left: 0
-    padding: $spacer / 2 $spacer * .75
+    +margin(right, 2)
 
 .drawer-nav-dropdown-text
   margin-right: auto

common/templates/common/components/navigation/nav_drawer_section_progress.html

@@ -3,7 +3,7 @@
   <a href="{{ href }}" class="drawer-nav-section-link justify-content-between {% if active %}active{% endif %}" data-bs-tooltip="tooltip-overflow"
     data-placement="top" title="{{ title }}">
     <div class="nav-drawer-section-progress-wrapper">
-      <h5>{{ nth }}</h5>
+      <span>{{ nth }}</span>
       {% comment %} TODO(Anna): Fix fraction calculation {% endcomment %}
       <svg width="40" height="40" class="drawer-nav-section-icon-progress" style="--progress-fraction: {% if finished %} 1.0 {% else %} {{ progress_fraction }} {% endif %}">
         <circle class="background" cx="20" cy="20" r="14" />

films/templates/films/gallery.html

@@ -45,7 +45,7 @@
       </div>
 
       <div class="drawer-nav-dropdown-wrapper">
-        <a class="drawer-nav-dropdown fw-bold" href="{% url 'film-all-assets' film_slug=film.slug %}">
+        <a class="drawer-nav-dropdown" href="{% url 'film-all-assets' film_slug=film.slug %}">
           <i class="i-search me-2"></i>
           All Artwork
         </a>
@@ -151,7 +151,7 @@
                 {% for collection, child_collections in collections.items %}
                   <div class="drawer-nav-dropdown-wrapper">
                     {% if child_collections %}
-                      <a class="drawer-nav-dropdown fw-bold dropdown" href="{{ collection.url }}"
+                      <a class="drawer-nav-dropdown dropdown" href="{{ collection.url }}"
                         data-bs-tooltip="tooltip-overflow" data-placement="top" title="{{ collection.name }}">
                         <span class="drawer-nav-dropdown-text overflow-text">
                           {{ collection.name }}
@@ -162,7 +162,7 @@
                         <i class="i-chevron-down"></i>
                       </a>
                     {% else %}
-                      <a class="drawer-nav-dropdown fw-bold" href="{{ collection.url }}" data-bs-tooltip="tooltip-overflow"
+                      <a class="drawer-nav-dropdown" href="{{ collection.url }}" data-bs-tooltip="tooltip-overflow"
                         data-placement="top" title="{{ collection.name }}">
                         <span class="drawer-nav-dropdown-text overflow-text">
                           {{ collection.name }}

training/templates/training/base_with_navigation.html

@@ -66,9 +66,9 @@
 
   {% block nested_nav_drawer_header %}
     <div class="drawer-nav-header">
-      <p class="mb-1 text-muted">
+      <h6 class="mb-1 text-muted fw-normal">
-        {% firstof training.type.label training.type|capfirst %}
+        <small>{% firstof training.type.label training.type|capfirst %}</small>
-      </p>
+      </h6>
       <a class="fw-bold" href="{{ navigation.overview_url }}">{{ training.name }}</a>
     </div>
   {% endblock nested_nav_drawer_header %}
@@ -87,7 +87,7 @@
     {% if chapter_navigation.is_published or request.user.is_superuser or request.user.is_staff %}
       <div class="drawer-nav-dropdown-wrapper">
         <a href="{{ chapter_navigation.url }}"
-          class="drawer-nav-dropdown dropdown fw-bold {% if chapter_navigation.current %} active{% endif %}"
+          class="drawer-nav-dropdown dropdown {% if chapter_navigation.current %} active{% endif %}"
           data-bs-tooltip="tooltip-overflow" data-placement="top" title="{{ chapter_navigation.name }}">
           <span class="drawer-nav-dropdown-text overflow-text">{{ chapter_navigation.name }}</span>
           {% if not chapter_navigation.is_published %}