Issue #3368834: Remaining components

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

@@ -6,25 +6,25 @@
 #}
 
 {% if patterns is not empty %}
-<div class="row">
-  <div class="col-lg-2">
+<div  class="row">
+  <div id="patterns-library" class="col-lg-2 position-sticky" style="overflow-y: auto; height: calc(100vh - 6rem); top: 5rem;">
     <h2 class="visually-hidden">{{ "Available patterns"|t }}</h2>
     {# List of available patterns with anchor links. #}
     {% for group_name, group_patterns in patterns %}
       {% if patterns|length > 1 %}
         <h3 class="fs-6">{{ 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>
     {% endfor %}
   </div>
 
-  <div class="col-lg-10">
+  <div data-bs-spy="scroll" data-bs-target="#patterns-library" data-bs-smooth-scroll="true" tabindex="0" class="col-lg-10">
     {% 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 }}">