Issue #3372881: Implement scrollspy on UI Styles and UI Patterns libraries

templates/overrides/ui_patterns_library/patterns-overview-page.html.twig

@@ -7,16 +7,16 @@
 {% if patterns is not empty %}
 
 {% set content %}
-  <div class="overflow-auto">
+  <div id="patterns-library" class="overflow-auto">
     {# List of available patterns with anchor links. #}
     {% for group_name, group_patterns in patterns %}
       {% if patterns|length > 1 %}
         <h3>{{ group_name }}</h3>
       {% endif %}
-      <ul class="list-unstyled">
+      <ul class="nav nav-pills flex-column">
         {% for pattern_name, pattern in group_patterns %}
-          <li>
-            <a href="#{{ pattern_name }}">{{ pattern.label }}</a>
+          <li class="nav-item">
+            <a href="#{{ pattern_name }}" class="nav-link p-1">{{ pattern.label }}</a>
           </li>
         {% endfor %}
       </ul>
@@ -30,6 +30,7 @@
 {{ pattern('offcanvas', {
   variant: 'start',
   offcanvas_id: 'menu-patterns',
+  backdrop: 'false',
   scroll: true,
   heading_level: 2,
   title: 'Available patterns'|t,
@@ -37,7 +38,7 @@
 }) }}
 
 <div class="row">
-  <div class="col-12">
+  <div data-bs-spy="scroll" data-bs-target="#patterns-library" data-bs-smooth-scroll="true" tabindex="0" class="col-12">
     {% for group_name, group_patterns in patterns %}
       {% for pattern_name, pattern in group_patterns %}
         <div class="pattern-preview pattern-preview__{{ pattern.definition.id }}" id="{{ pattern_name }}">