put sidebar component in shared folder and genericize it

frontend/javascript/controllers/sidebar_controller.js

@@ -13,8 +13,15 @@ export default class Sidebar extends Controller {
 
   toggle(event) {
     event.preventDefault()
-    const targetId = event.currentTarget.getAttribute("aria-controls")
+    const button = event.currentTarget
+    const targetId = button.getAttribute("aria-controls")
     const target = document.getElementById(targetId)
-    target.getAttribute("aria-expanded") === "true" ? target.setAttribute("aria-expanded", false) : target.setAttribute("aria-expanded", true)
+    if (target.getAttribute("aria-expanded") === "true") {
+      target.setAttribute("aria-expanded", false)
+      button.setAttribute("aria-label", "Hide list")
+    } else {
+      target.setAttribute("aria-expanded", true)
+      button.setAttribute("aria-label", "Expand list")
+    }
   }
 }

frontend/styles/layout.css

@@ -24,12 +24,48 @@ body > footer {
   grid-area: footer;
 }
 
-body.help {
+body.with-sidebar {
   display: grid;
   grid-template-areas:
     "header header"
     "aside main"
     "footer footer";
+
+  main {
+    box-sizing: border-box;
+    padding: var(--spacing-8) var(--spacing-10);
+    width: calc(100vw - var(--doc-sidebar-width) - var(--doc-sidebar-padding));
+
+    button {
+      display: none;
+      width: fit-content;
+    }
+
+    img {
+      max-width: 100%;
+    }
+  }
+
+  @media(max-width: 800px) {
+    main {
+      grid-column: 1 / -1;
+      width: 100%;
+
+      button {
+        display: inline-flex;
+      }
+    }
+  }
+
+  @container main (width < 800px) {
+    .main-content {
+      grid-template-columns: 1fr;
+    }
+
+    #markdown-toc {
+      display: none;
+    }
+  }
 }
 
 .wrapper {

frontend/styles/pages/help.css

@@ -5,22 +5,10 @@
   main {
     align-content: start;
     align-items: start;
-    box-sizing: border-box;
     display: grid;
     gap: var(--gap-medium);
     justify-content: center;
     overflow-y: scroll;
-    padding: var(--spacing-8) var(--spacing-10);
-    width: calc(100vw - var(--doc-sidebar-width));
-
-    button {
-      display: none;
-      width: fit-content;
-    }
-
-    img {
-      max-width: 100%;
-    }  
   }
 
   .main-content {
@@ -39,11 +27,11 @@
     h1 {
       font-size: 2rem;
     }
-  
+
     h2 {
       font-size: 1.5rem;
     }
-  
+
     h3 {
       font-size: 1.25rem;
     }
@@ -64,25 +52,4 @@
       margin-inline: auto;
     }
   }
-
-  @media(max-width: 800px) {
-    main {
-      grid-column: 1 / -1;
-      width: 100%;
-
-      button {
-        display: inline-flex;
-      }
-    }
-  }
-
-  @container main (width < 800px) {
-    .main-content {
-      grid-template-columns: 1fr;
-    }
-
-    #markdown-toc {
-      display: none;
-    }
-  }
 }

frontend/styles/variables/sizes.css

@@ -1,5 +1,6 @@
 :root {
   --doc-sidebar-width: 300px;
+  --doc-sidebar-padding: var(--spacing-16);
   --doc-content-width: 80ch;
 
   --gap-xsmall: var(--spacing-1);

src/_components/help/sidebar.css → src/_components/shared/sidebar.css

@@ -1,6 +1,7 @@
 side-bar {
   border-right: var(--border-default);
   overflow-y: scroll;
+  padding-inline-start: var(--spacing-16);
   width: var(--doc-sidebar-width);
   z-index: 90;
 
@@ -12,6 +13,19 @@ side-bar {
     }
   }
 
+  :is(h1) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    font-size: var(--text-l);
+    margin-block-end: var(--spacing-4);
+
+    span {
+      color: var(--text-color-secondary);
+      font-size: var(--text-base);
+    }
+  }
+
   ul {
     list-style-type: none;
     margin: 0;
@@ -46,7 +60,7 @@ side-bar {
       border-left: 2px solid transparent;
       border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
       margin-left: -1px;
-      padding-left: var(--spacing-5);
+      padding-left: var(--spacing-3);
     }
   }
 
@@ -58,6 +72,7 @@ side-bar {
     max-height: 100vh;
     overflow-y: scroll;
     overscroll-behavior: contain;
+    padding-inline-start: revert;
     position: fixed;
     transition: all 0.4s ease-in-out;
     top: 0;
@@ -66,17 +81,16 @@ side-bar {
       left: 0;
     }
 
-    button {
+    aside > button {
       align-items: center;
       background: transparent;
-      border: 0;
       display: flex;
-      margin-bottom: var(--spacing-10);
-      margin-top: var(--spacing-16);
-    }
+      margin-bottom: var(--spacing-6);
+      margin-top: var(--spacing-12);
 
-    button svg {
-      transform: rotate(180deg);
+      svg {
+        transform: rotate(180deg);
+      }
     }
   }
 }

src/_components/help/sidebar.erb → src/_components/shared/sidebar.erb

@@ -4,12 +4,14 @@
       <svg width="11" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m10 6 .543.517a.75.75 0 0 0 0-1.034L10 6ZM0 6.75h10v-1.5H0v1.5Zm10.543-1.267-4.762-5-1.086 1.034 4.762 5 1.086-1.034Zm-1.086 0-4.762 5 1.086 1.034 4.762-5-1.086-1.034Z" fill="#025FD7"/></svg>
       Hide menu
     </button>
+    <%= slotted :before %>
     <ul class="sidebar-list" data-controller="sidebar">
-      <% @site.data.help_sidebar.each do |page| %>
+      <% @data.each do |page| %>
         <li>
-          <%= render Help::Sidebar::Item.new(page: page, current: @current) %>
+          <%= render Shared::Sidebar::Item.new(page: page, current: @current) %>
         </li>
       <% end %>
     </ul>
+    <%= slotted :after %>
   </aside>
 </side-bar>

src/_components/shared/sidebar.rb

@@ -0,0 +1,7 @@
+class Shared::Sidebar < Bridgetown::Component
+  def initialize(data:, current:)
+    @data = data
+    @current = current
+    @site = Bridgetown::Current.site
+  end
+end

src/_components/help/sidebar/item.erb → src/_components/shared/sidebar/item.erb

@@ -11,7 +11,7 @@
       </a>
     <% end %>
     <% if @items.present? %>
-      <button data-button-style="secondary" data-button-size="xsmall" aria-controls="<%= category_id %>" data-action="sidebar#toggle">
+      <button data-button-style="secondary" data-button-size="xsmall" aria-controls="<%= category_id %>" data-action="sidebar#toggle" aria-label="<% if @is_current %>Expand list"<% else %>Hide list<% end %>">
         <%= svg "images/icons/caret-right.svg" %>
       </button>
     <% end %>
@@ -20,7 +20,7 @@
     <ul class="sidebar-sublist">
       <% @items.each do |item| %>
         <li>
-          <%= render Help::Sidebar::Item.new(page: item, current: @current) %>
+          <%= render Shared::Sidebar::Item.new(page: item, current: @current) %>
         </li>
       <% end %>
     </ul>

src/_components/help/sidebar/item.rb → src/_components/shared/sidebar/item.rb

@@ -1,4 +1,4 @@
-class Help::Sidebar::Item < Bridgetown::Component
+class Shared::Sidebar::Item < Bridgetown::Component
   def initialize(page:, current:)
     @page = page
     @current = current

src/_help/_defaults.yml

@@ -1,5 +1,5 @@
 layout: help
 sidebar: true
-page_class: help
+page_class: help with-sidebar
 sitemap_change_frequency: weekly
 hide_footer: true

src/_layouts/help.erb

@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<%= render Help::Sidebar.new(metadata: site.metadata, current: resource) %>
+<%= render Shared::Sidebar.new(data: site.data.help_sidebar, current: resource) %>
 <main>
   <div class="main-content">
     <button data-button-style="secondary" data-button-size="small" data-toggle-target="button" data-action="toggle#click">