jekyll-theme-primerpages 2.3.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 8e85788fbafe6d2a972e879708ea14bced190302c46573bf269d2891316de630
+  data.tar.gz: 68c72c917ec48322cbbb9d6f268b840ad8033eaddd52726200872a6083c15227
+SHA512:
+  metadata.gz: cbd956cc3bcf6f95217a1dab4f08fe08f5847bef838e1311bb24b45caa433536551d1c23639be5298ab1795e2e7eaee18307b4736587e0ef305925dd89d5ae3a
+  data.tar.gz: 64abeff7b9ca357b8afce82229811ee638841d6b8eb99a5a40743276cf4b93c70a690344983649938c428cf0d1936dea06d8fe8ed6a412c235bcc82bc992f545

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Allison Thackston
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,65 @@
+# PrimerPages Jekyll Theme
+
+PrimerPages is a Jekyll theme for GitHub-flavored project sites, profile pages,
+documentation, blogs, and link pages. It is built with GitHub Primer styles and
+published as the `jekyll-theme-primerpages` gem.
+
+> [!NOTE]
+> This theme was renamed from `jekyll-theme-profile` to
+> `jekyll-theme-primerpages`. New sites should use the PrimerPages package name.
+
+## Quick Start
+
+Add the theme to your site's `Gemfile`:
+
+```ruby
+source "https://rubygems.org"
+
+gem "jekyll-theme-primerpages"
+```
+
+Install the gem:
+
+```sh
+bundle install
+```
+
+Enable the theme in `_config.yml`:
+
+```yaml
+theme: jekyll-theme-primerpages
+title: My Site
+description: A site built with PrimerPages
+```
+
+Create an `index.md` page:
+
+```markdown
+---
+layout: profile
+---
+
+# Hello, PrimerPages
+```
+
+Run the site locally:
+
+```sh
+bundle exec jekyll serve
+```
+
+Then open `http://localhost:4000`.
+
+## Documentation
+
+Full documentation is available at [primerpages.com](https://www.primerpages.com).
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for development and contribution
+guidelines.
+
+## License
+
+The theme is available as open source under the terms of the
+[MIT License](LICENSE).

data/_config.yml

@@ -0,0 +1,149 @@
+# ######## Jekyll Site Settings ##########
+theme: jekyll-theme-primerpages
+title: PrimerPages
+description: Theme built with jekyll-theme-primerpages
+# image: /assets/img/social-preview.png
+repository: PrimerPages/jekyll-theme-primerpages
+
+defaults:
+  - scope:
+      path: "" # an empty string here means all files in the project
+      type: "posts"
+    values:
+      image: /assets/img/default.png # The default image used for social and posts.
+      layout: "post"
+      permalink: :year/:month/:day/:title:output_ext
+      toc: true
+  - scope:
+      path: "" # an empty string here means all files in the project
+      type: "pages"
+    values:
+      layout: "page"
+      image: /assets/img/default.png # The default image used for social and posts.
+
+# ########### Theme settings ###############
+# The style of the website
+style: appbar # One of "stacked", "sidebar", "topbar", "appbar"
+# The user/project avatar.  If not set the avatar of the project owner will be used.
+# user_image: /assets/img/user-image.jpg
+# The header brand icon. Use "none", "favicon", or an Octicon name like "mark-github".
+# header_icon: favicon
+# The themes to use for dark and light
+dark_theme: dark # One of dark, dark_dimmed, dark_colorblind, dark_high_contrast, dark_tritanopia
+light_theme: light # One of light, light_colorblind, light_high_contrast, light_tritanopia
+
+repo_info: true # Show the information for the source of this project
+user_metadata: true # Show the metadata associated with the user
+profile_link: true # Show a link to the github profile for the user
+
+####################
+# Versioned docs settings
+# versions:
+#   enabled: true
+#   config: /versions.json
+#   prefix: ""
+#   # config and prefix are emitted exactly as configured here
+#   # versioning is enabled only when this block is present, or when enabled is explicitly true
+#   show_warning: true
+#   warning_title: Non-default version
+#   warning_message: You are viewing a non-default version of these docs.
+#   unavailable_label: Version info unavailable
+
+##########################
+# # Social media settings
+# icon_color: "#959da5" # The color of the social media icons on the site
+# social_media: # Your social media accounts
+#   behance: your_username
+#   dribbble: your_username
+#   docker: your_username
+#   facebook: your_username
+#   github: your_username
+#   hackerrank: your_username
+#   instagram: your_username
+#   keybase: your_username
+#   linkedin: your_username
+#   mail: email@address
+#   mastodon: your_username
+#   medium: your_username
+#   stackoverflow: your_user_id
+#   telegram: your_username
+#   threads: your_username
+#   tiktok: your_username
+#   twitter: your_username
+#   unsplash: your_username
+#   vk: your_username
+#   vscode: your_username
+#   youtube: your_username
+#   x: your_username
+
+####################
+# Navigation links
+# nav:
+#   - name: Posts
+#     url: /blog
+#   - name: Categories
+#     url: /category/
+
+####################
+# List of links for link cards
+# links:
+#   - name: All blog posts
+#     url: /blog
+#     thumbnail: /assets/img/blog-post-icon.png
+#   - name: Browse by category
+#     url: /category/
+#     thumbnail: /assets/img/category-icon.png
+
+###################
+# Repositories to show on home page
+repositories:
+  sort_by: stars #pushed or stars
+  limit: 24
+  exclude:
+    archived: true
+    forks: true
+    repositories:
+      # - list of repositories to exclude
+
+########################
+# Post settings
+related_by: "tags or categories"
+
+# ########### Plugin settings ###############
+plugins:
+  # - jekyll-github-metadata
+  # - jekyll-meta
+  # - jekyll-octicons
+  - jekyll-seo-tag
+  # - jekyll-toc
+  - jemoji
+
+####################
+# jekyll-paginate settings
+# Include `gem jekyll-paginate` in your gemfile
+# paginate: 6 # The number of posts to show per page of pagination of blog posts
+# paginate_path: "/blog/page:num"
+# ###################
+# jekyll-tagging settings
+# Include `gem jekyll-tagging` in your gemfile
+# tag_page_layout: tags
+# tag_page_dir: tags
+# ####################
+# jekyll-category-pages settings
+# Include `gem jekyll-category-pages` in your gemfile
+# category_path: category
+# category_layout: category_layout.html
+######################
+
+# ########### Build settings ###############
+exclude:
+  - spec
+  - demo
+  - .sass-cache
+  - .jekyll-cache
+  - gemfiles
+  - Gemfile
+  - Gemfile.lock
+  - node_modules
+  - vendor/
+  - integration/

data/_includes/awesome-nav-breadcrumb-trail.html

@@ -0,0 +1,33 @@
+{% for nav_item in include.items %}
+{% assign item_url = nav_item.url | default: "" %}
+{% assign is_current = nav_item.current | default: false %}
+{% assign contains_current = nav_item.contains_current | default: false %}
+{% assign has_children = nav_item.children and nav_item.children.size > 0 %}
+{% assign skip_item = false %}
+
+{% if include.root_url and item_url != "" and item_url == include.root_url %}
+  {% assign skip_item = true %}
+{% endif %}
+
+{% if is_current or contains_current %}
+  {% unless skip_item %}
+    {% if is_current %}
+      <li class="breadcrumb-item breadcrumb-item-selected" aria-current="page">
+        {{ nav_item.title }}
+      </li>
+    {% elsif item_url != "" %}
+      <li class="breadcrumb-item">
+        <a href="{{ item_url | relative_url }}">{{ nav_item.title }}</a>
+      </li>
+    {% else %}
+      <li class="breadcrumb-item">
+        {{ nav_item.title }}
+      </li>
+    {% endif %}
+  {% endunless %}
+
+  {% if has_children %}
+    {% include awesome-nav-breadcrumb-trail.html items=nav_item.children root_url=include.root_url %}
+  {% endif %}
+{% endif %}
+{% endfor %}

data/_includes/awesome-nav-breadcrumbs.html

@@ -0,0 +1,51 @@
+<div class="Breadcrumb d-flex flex-items-center">
+  <nav aria-label="Breadcrumb" class="f5">
+    <ol class="breadcrumb">
+      {% assign root_crumb = nil %}
+      {% if page.breadcrumbs and page.breadcrumbs.size > 0 %}
+        {% assign root_crumb = page.breadcrumbs.first %}
+      {% endif %}
+
+      {% if root_crumb %}
+        <li class="breadcrumb-item">
+          <a href="{{ root_crumb.url | relative_url }}">{{ root_crumb.title }}</a>
+        </li>
+      {% endif %}
+
+      {% capture awesome_nav_trail %}
+        {% if page.awesome_nav and page.awesome_nav.size > 0 %}
+          {% include awesome-nav-breadcrumb-trail.html items=page.awesome_nav root_url=root_crumb.url %}
+        {% endif %}
+      {% endcapture %}
+
+      {% assign awesome_nav_trail = awesome_nav_trail | strip %}
+
+      {% if awesome_nav_trail != "" %}
+        {{ awesome_nav_trail }}
+      {% elsif page.breadcrumbs and page.breadcrumbs.size > 0 %}
+        {% for crumb in page.breadcrumbs %}
+          {% if forloop.first %}
+          {% continue %}
+          {% endif %}
+          {% if forloop.last %}
+            <li class="breadcrumb-item breadcrumb-item-selected" aria-current="page">
+              {{ crumb.title }}
+            </li>
+          {% elsif crumb.url %}
+            <li class="breadcrumb-item">
+              <a href="{{ crumb.url | relative_url }}">{{ crumb.title }}</a>
+            </li>
+          {% else %}
+            <li class="breadcrumb-item">
+              {{ crumb.title }}
+            </li>
+          {% endif %}
+        {% endfor %}
+      {% else %}
+        <li class="breadcrumb-item breadcrumb-item-selected" aria-current="page">
+          {{ page.title }}
+        </li>
+      {% endif %}
+    </ol>
+  </nav>
+</div>

data/_includes/awesome-nav-menu-tree.html

@@ -0,0 +1,21 @@
+{% for nav_item in include.items %}
+{% assign item_url = nav_item.url | default: "" %}
+{% assign has_children = nav_item.children and nav_item.children.size > 0 %}
+{% assign is_current = nav_item.current | default: false %}
+
+{% if item_url != "" %}
+<a href="{{ item_url | relative_url }}" class="menu-item border-0" role="menuitem" {% if is_current %}aria-current="page"{% endif %}>
+  {{ nav_item.title }}
+</a>
+{% else %}
+<div class="menu-item color-fg-muted border-0">
+  {{ nav_item.title }}
+</div>
+{% endif %}
+
+{% if has_children %}
+<div class="ml-3">
+  {% include awesome-nav-menu-tree.html items=nav_item.children %}
+</div>
+{% endif %}
+{% endfor %}

data/_includes/awesome-nav-menu.html

@@ -0,0 +1,68 @@
+{%- comment -%}
+  awesome-nav-menu.html
+
+  Mobile dropdown menu for awesome_nav-powered docs navigation.
+
+  Parameters:
+    - nav: Navigation items to render.
+    - name: Display name for the menu header.
+    - index_url: Optional URL for the docs root page.
+    - id (default: "awesome-nav-menu"): HTML ID for the menu container.
+{%- endcomment -%}
+
+{%- assign nav_items = include.nav | default: page.awesome_nav %}
+{%- assign menu_name = include.name | default: "Documentation" %}
+{%- assign menu_index_url = include.index_url %}
+{%- assign menu_id = include.id | default: "awesome-nav-menu" %}
+
+<script>
+    $(document).ready(function () {
+        const $menu = $("#{{ menu_id }}");
+        const $closeButton = $menu.find(".close-menu");
+
+        if ($menu.length && $closeButton.length) {
+            $closeButton.click(() => $menu.removeAttr("open"));
+        }
+    });
+</script>
+
+<details class="details-reset details-overlay" id="{{ menu_id }}">
+    <summary class="btn btn-invisible" aria-haspopup="true">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+        </svg>
+    </summary>
+    <div class="awesome-nav-menu-drawer position-fixed top-0 left-0 right-0 bottom-0">
+        <button class="awesome-nav-menu-backdrop close-menu position-fixed top-0 left-0 right-0 bottom-0 color-bg-backdrop border-0 p-0 m-0"
+            type="button" aria-label="Close navigation menu"></button>
+        <div class="awesome-nav-menu-panel position-fixed top-0 left-0 bottom-0 color-bg-default border-right d-flex flex-column">
+            <div class="d-flex flex-justify-between flex-items-center p-3 border-bottom">
+                <div tabindex="-1" class="SelectMenu-title">
+                    {%- if menu_index_url %}
+                    <a href="{{ menu_index_url | relative_url }}"
+                        class="AppHeader-link d-flex flex-items-center no-underline mr-3">
+                        <span class="h3 color-fg-default text-bold">{{ menu_name }}</span>
+                    </a>
+                    {%- else %}
+                    <div class="AppHeader-link d-flex flex-items-center no-underline mr-3">
+                        <span class="h3 color-fg-default text-bold">{{ menu_name }}</span>
+                    </div>
+                    {%- endif %}
+                </div>
+                <button class="SelectMenu-closeButton close-menu" type="button">
+                    <span class="octicon octicon-x-16"></span>
+                </button>
+            </div>
+            <div class="SideNav color-bg-default flex-1 overflow-y-auto pl-1">
+                {%- if menu_index_url %}
+                <a href="{{ menu_index_url | relative_url }}" class="SideNav-item border-0" role="menuitem">
+                    {{ menu_name }}
+                </a>
+                {%- else %}
+                <div class="SideNav-item no-underline h4 border-0">{{ menu_name }}</div>
+                {%- endif %}
+                {% include awesome-nav-menu-tree.html items=nav_items %}
+            </div>
+        </div>
+    </div>
+</details>

data/_includes/awesome-nav-sidebar.html

@@ -0,0 +1,7 @@
+{% assign nav_items = include.nav | default: page.awesome_nav %}
+{% assign nav_title = include.title | default: include.name | default: page.docs_name | default: "Documentation" %}
+{% if nav_items and nav_items.size > 0 %}
+<ul data-overflow-nav class="menu ActionList border-0 ml-3">
+  {% include awesome-nav-tree.html items=nav_items level=0 %}
+</ul>
+{% endif %}

data/_includes/awesome-nav-tree.html

@@ -0,0 +1,52 @@
+{% for nav_item in include.items %}
+{% assign item_url = nav_item.url | default: "" %}
+{% assign has_children = nav_item.children and nav_item.children.size > 0 %}
+{% assign is_expanded = nav_item.contains_current | default: false %}
+{% assign is_current = nav_item.current | default: false %}
+
+{% if has_children %}
+<li class="list-style-none">
+  <details class="details-reset" {% if is_expanded %}open{% endif %}>
+    <summary class="list-style-none color-fg-default">
+      {% if item_url != "" %}
+      <a href="{{ item_url | relative_url }}" class="ActionListItem-label no-underline">
+        <div class="menu-item ActionList-item border-0 d-flex flex-items-center flex-justify-between" {% if is_current %}aria-current="page"{% endif %}>
+          <span>{{ nav_item.title }}</span>
+          <span class="awesome-nav-chevron color-fg-muted d-flex flex-items-center" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M12.78 6.22a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L3.22 7.28a.75.75 0 1 1 1.06-1.06L8 9.94l3.72-3.72a.75.75 0 0 1 1.06 0Z"></path>
+            </svg>
+          </span>
+        </div>
+      </a>
+      {% else %}
+      <div class="menu-item ActionList-item border-0 d-flex flex-items-center flex-justify-between">
+          <span>{{ nav_item.title }}</span>
+          <span class="awesome-nav-chevron color-fg-muted d-flex flex-items-center" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M12.78 6.22a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L3.22 7.28a.75.75 0 1 1 1.06-1.06L8 9.94l3.72-3.72a.75.75 0 0 1 1.06 0Z"></path>
+            </svg>
+          </span>
+      </div>
+      {% endif %}
+    </summary>
+    <ul class="ml-3">
+      {% assign next_level = include.level | default: 0 | plus: 1 %}
+      {% include awesome-nav-tree.html items=nav_item.children level=next_level %}
+    </ul>
+  </details>
+</li>
+{% elsif item_url != "" %}
+<li class="list-style-none">
+  <a href="{{ item_url | relative_url }}" class="ActionListItem-label no-underline">
+    <div class="menu-item ActionList-item border-0" {% if is_current %}aria-current="page"{% endif %}>
+      {{ nav_item.title }}
+    </div>
+  </a>
+</li>
+{% else %}
+<li class="menu-item ActionList-item border-0 color-fg-default">
+  {{ nav_item.title }}
+</li>
+{% endif %}
+{% endfor %}

data/_includes/breadcrumbs.html

@@ -0,0 +1,62 @@
+{% assign collection = include.collection | default: site.docs %}
+<div class="Breadcrumb d-flex flex-items-center">
+    <nav aria-label="Breadcrumb" class="f5">
+        <ol class="breadcrumb">
+            {%- assign crumbs = page.url | split: '/' %}
+            {%- assign url = "/" %}
+            {%- for crumb in crumbs %}
+            {%- if crumb == "" %}
+            <li class="breadcrumb-item">
+                <a href="{{ site.baseurl}}/">home</a>
+            </li>
+            {%- continue %}
+            {%- endif %}
+            {%- if crumb == crumbs.last %}
+            {%- continue %}
+            {%- endif %}
+            {%- assign index_url = url | append: crumb | append: "/index.html" %}
+            {%- assign isa_index = site.pages | where: "url", index_url | first %}
+            {%- assign folder_url = url | append: crumb | append: "/" %}
+            {%- assign isa_folder = site.pages | where: "url", folder_url | first %}
+            {%- assign url = url | append: crumb %}
+            {%- assign isa_page = site.pages | where: "url", url | first %}
+            {%- assign isa_post = site.posts | where: "url", url | first %}
+            {%- assign isa_collection = collection | where: "url", index_url | first %}
+
+            {%- assign nice_crumb = crumb | url_decode | replace: ".html", "" | replace: "-", " " | replace: "_", " " |
+            downcase %}
+
+            {% comment %}
+            Checking the crumb: {{ crumb }}
+            [asset url: {{ asset_url }}]
+            [index url: {{ index_url }}]
+            [folder_url: {{ folder_url }}]
+            [url: {{ url }}]
+            {% for p in collection %}
+            {{ p.url }}
+            {% endfor %}
+
+            [Page?: {% if isa_page %}page!{% endif %}]
+            [Post?: {% if isa_post %}post!{% endif %}]
+            [Collection?: {% if isa_collection %}collection!{% endif %}]
+            {% endcomment %}
+
+            {%- if page.url == url or page.url == index_url or page.url == folder_url %}
+            <li class="breadcrumb-item breadcrumb-item-selected" aria-current="page">
+                <a href="{{ page.url | relative_url }}">{{ nice_crumb }}</a>
+            </li>
+            {%- break %}
+            {%- elsif isa_page or isa_post or isa_index or isa_folder or isa_collection %}
+            <li class="breadcrumb-item">
+                <a href="{{ url | relative_url }}">{{ nice_crumb }}</a>
+            </li>
+            {%- else %}
+            <li class="breadcrumb-item">
+                {{ nice_crumb }}
+            </li>
+            {%- endif %}
+            {%- assign url = url | append: "/" %}
+            {%- endfor %}
+        </ol>
+    </nav>
+</div>

data/_includes/category_index.html

@@ -0,0 +1,18 @@
+{% comment %}
+Required:
+- category (String)
+- pages (Array of documents)
+=====================================
+{% endcomment %}
+{%- assign entries = include.pages %}
+{%- assign category = include.category %}
+<div class="d-flex flex-column col-12 col-sm-6 col-lg-4 col-xl-3 pb-4">
+  <h3 class="h3">{{ category | capitalize }}</h3>
+  <div class="pt-2 mb-4 text-normal">
+    <ul class="list-style-none pl-0">
+      {% for entry in entries %}
+          <li><a class="pt-2" href="{{ entry.url | relative_url }}">{{ entry.title }}</a></li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>

data/_includes/collection-menu.html

@@ -0,0 +1,79 @@
+{%- comment -%}
+  collection-menu.html
+
+  Generates a dropdown menu for a Jekyll collection, grouping items by their "category" front matter.
+  Useful for documentation, guides, or any collection-based navigation.
+
+  Parameters:
+    - collection: The Jekyll collection to display.
+    - name: Display name for the collection header.
+    - index: Optional index page object for the collection (e.g., site.docs_index).
+    - id (default: "collection-menu"): HTML ID for the menu container (useful when multiple menus are present).
+
+  Example Usage:
+    {% include collection-menu.html collection=docs name="Documentation" index="docs/index.html" %}
+{%- endcomment -%}
+
+{%- assign collection = include.collection | default: nil %}
+{%- assign collection_name = include.name | default: include.index.title | default: "Collection" %}
+{%- assign collection_index = include.index %}
+{%- assign collection_id = include.id | default: "collection-menu" %}
+{% comment %}computed variables{% endcomment %}
+{%- assign index_url = collection_index.url %}
+{%- assign collection_without_index = collection | where_exp: "item", "item.url != index_url" %}
+
+<script>
+    $(document).ready(function () {
+        const $menu = $("#{{ collection_id }}");
+        const $closeButton = $(".close-menu");
+
+        if ($menu.length && $closeButton.length) {
+            $closeButton.click(() => $menu.removeAttr("open")); // Properly closes the dropdown
+        }
+    });
+</script>
+
+<details class="details-reset details-overlay" id="{{ collection_id }}">
+    <summary class="btn btn-invisible" aria-haspopup="true">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+        </svg>
+    </summary>
+    <details-menu class="SelectMenu" role="menu">
+        <div class="SelectMenu-modal">
+
+            <div class="SelectMenu-header">
+                <div tabindex="-1" class="SelectMenu-title" id="github-logo">
+                    {%- if collection_index %}
+                    <a href="{{ collection_index.url | relative_url }}"
+                        class="AppHeader-link d-flex flex-items-center no-underline mr-3">
+                        <span class="h3 color-fg-default text-bold">{{ collection_name }}</span>
+                    </a>
+                    {%- else %}
+                    <div class="AppHeader-link d-flex flex-items-center no-underline mr-3">
+                        <span class="h3 color-fg-default text-bold">{{ collection_name }}</span>
+                    </div>
+                    {%- endif %}
+                </div>
+                <div class="d-flex flex-justify-end">
+                    <button class="SelectMenu-closeButton close-menu" type="button">
+                        <span class="octicon octicon-x-16"></span>
+                    </button>
+                </div>
+            </div>
+            <div class="SideNav border overflow-y-auto">
+                {%- assign collection_categories = collection_without_index | group_by: "category" %}
+                {%- for category in collection_categories %}
+                {%- assign category_name = category.name | default: collection_name %}
+                <div class="SideNav-item no-underline h4">{{ category_name | capitalize }}</div>
+                {%- for nav_item in category.items %}
+                {%- if nav_item.url and nav_item.title %}
+                <a href="{{ nav_item.url | relative_url }}" class="SideNav-item" role="menuitem" {% if page.url contains nav_item.url
+                    %} aria-current="page" {% endif %}>{{ nav_item.title }}</a>
+                {%- endif %}
+                {%- endfor %}
+                {%- endfor %}
+            </div>
+        </div>
+    </details-menu>
+</details>

data/_includes/collection-sidebar.html

@@ -0,0 +1,23 @@
+{% assign categories = include.categories | default: doc_categories %}
+{% assign current_page_url = include.current_page_url | default: page.url %}
+{% assign excluded_url = include.excluded_url | default: category_page.url %}
+{% assign default_category_name = include.default_category | default: "" %}
+
+<ul data-overflow-nav class="menu ActionList border-0 ml-3">
+  {%- for category in categories %}
+  {%- assign category_name = category.name | default: default_category_name %}
+  <li class="h4">{{ category_name | capitalize }}
+    <ul>
+      {%- for nav_item in category.items %}
+      {% unless nav_item.url == excluded_url %}
+      <a href="{{ nav_item.url | relative_url }}" class="ActionListItem-label no-underline">
+        <li class="menu-item ActionList-item border-0" {% if current_page_url == nav_item.url %}aria-current="page"{% endif %}>
+          {{ nav_item.title }}
+        </li>
+      </a>
+      {% endunless %}
+      {%- endfor %}
+    </ul>
+  </li>
+  {%- endfor %}
+</ul>