feat: Support sidebar on mobile

Author: lamATnginx

assets/css/v2/style.css

@@ -175,7 +175,7 @@ h3,
 h4,
 h5,
 h6 {
-  scroll-margin-top: 1.5rem;
+  scroll-margin-top: 6.5rem;
 }
 
 /* MARK: Header
@@ -364,10 +364,30 @@ nav {
 }
 
 .sidebar-layout {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  z-index: 2;
+  grid-column: 1;
+  position: sticky;
+  top: 0;
+  padding: 2rem;
+  margin-left: -2rem;
+  background-color: white;
+  width: calc(100% + 4rem);
+  z-index: 999;
+
+  .sidebar {
+    justify-content: center;
+    width: 100%;
+  }
+
+  .scrollbar-container {
+    display: none;
+  }
+
+  .scrollbar-container,
+  .product-selector-button {
+    min-width: 20rem;
+    max-width: 50rem;
+    width: 100%;
+  }
 }
 
 #searchbox {
@@ -420,10 +440,6 @@ nav {
     grid-template-rows: repeat(2, auto);
     column-gap: var(--grid-column-gutter);
   }
-
-  .sidebar-layout {
-    display: none;
-  }
 }
 
 @media (min-width: 88em) {
@@ -467,6 +483,17 @@ nav {
   .content-layout .side-gutter {
     grid-column-start: 2;
   }
+
+  .sidebar-layout {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    z-index: 2;
+
+    .scrollbar-container {
+      display: block !important;
+    }
+  }
 }
 
 .list-page {
@@ -618,6 +645,10 @@ body:not(:has(.main-layout)) header atomic-search-interface {
   body:has(.sidebar-layout) header atomic-search-interface {
     display: block;
   }
+
+  body:has(.sidebar-layout) #sidebar-v2 atomic-search-interface {
+    display: none;
+  }
 }
 
 @media (max-width: 1023px) {
@@ -1123,6 +1154,13 @@ blockquote p:last-child {
     grid-column: 2 !important;
     align-self: start;
   }
+
+  .sidebar-layout {
+    .scrollbar-container,
+    .product-selector-button {
+      max-width: 100%;
+    }
+  }
 }
 
 blockquote > div > * {

assets/js/product-selector.js

@@ -1,5 +1,13 @@
 document.addEventListener('DOMContentLoaded', () => {
-  const productSelectorContent = document.getElementById('product-selector');
+  const hideSidebarBreakpoint = 88 * 16;
+  let productSelectorContent;
+
+  if (window.innerWidth < hideSidebarBreakpoint) {
+    productSelectorContent = document.getElementById('scrollbar-container');
+  } else {
+    productSelectorContent = document.getElementById('product-selector');
+  }
+
   const productSelectorButton = document.getElementById(
     'product-selector-button'
   );
@@ -21,7 +29,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
   window.addEventListener('click', (event) => {
     /* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has an id containing "product-selector" */
-    if (!event.target.id.includes('product-selector')) {
+    if (
+      !event.target.id.includes('product-selector') &&
+      !event.target.id.includes('collapsible') &&
+      !event.target.id.includes('toggle')
+    ) {
       productSelectorContent.style.display = 'none';
       productSelectorButton.classList.remove('remove-bottom-radius');
     }

assets/js/sidebar-v2.js

@@ -1,6 +1,6 @@
 document.addEventListener('DOMContentLoaded', () => {
   function expandToCurrentPage() {
-    const currentPage = document.getElementById('current-page');
+    const currentPage = document.getElementById('collapsible-link-current');
     if (currentPage) {
       let parentLabel = currentPage.closest('li');
       while (parentLabel) {

layouts/partials/sidebar-list-pages.html

@@ -1,23 +1,23 @@
 {{ $currentUrl := .currentUrl }}
 {{ $context := .context }}
-<ul class="collapsible-content">
+<ul class="collapsible-content" id="collapsible-content">
     {{ range $context.Pages.ByWeight }}
     <li>
         {{ if eq .Kind "section" }}
             <input type="checkbox" id="toggle-{{ .File.UniqueID }}" class="toggle-checkbox" style="display: none;">
-            <label for="toggle-{{ .File.UniqueID }}" class="collapsible-header">
+            <label for="toggle-{{ .File.UniqueID }}" class="collapsible-header" id="collapsible-header">
                 {{ if .Pages }}
-                    <span class="box expand partial-box"></span>
-                    <span class="box opened partial-box"></span>
+                    <span class="box expand partial-box" id="toggle-expand"></span>
+                    <span class="box opened partial-box" id="toggle-opened"></span>
                 {{ end }}
                 {{ .Title }} 
             </label>
             {{ partial "sidebar-list-pages.html" (dict "context" . "currentUrl" $currentUrl) }}
         {{ else if eq .Kind "page" }}
             {{ if eq $currentUrl .Permalink }}                      
-                <span class="box current partial" id="current-page"></span>                 
+                <span class="box current partial" id="collapsible-link-current"></span>                 
             {{ else }}                     
-                <span class="box-link partial"></span>              
+                <span class="box-link partial" id="collapsible-link-option"></span>              
             {{ end }}
             <a href="{{ .Permalink }}" style="{{if eq $currentUrl .Permalink}}font-weight: bold;{{end}}">{{ .Title }} </a>
             {{ if eq $currentUrl .Permalink }}   

layouts/partials/sidebar-v2.html

@@ -57,26 +57,26 @@
         </div>
     {{ end }}
 </div>
-<div class="scrollbar-container">
+<div class="scrollbar-container" id="scrollbar-container">
     <div class="sidebar-navigation">
-        <ul class="parent-collapsible-content">
+        <ul class="parent-collapsible-content" id="parent-collapsible-content">
         {{ range .FirstSection.Pages.ByWeight }}
-            <li class="parent-collapsible-content-item">
+            <li class="parent-collapsible-content-item" id="parent-collapsible-content-item">
                 {{ if eq .Kind "section" }}
                     <input type="checkbox" id="toggle-{{ .File.UniqueID }}" class="toggle-checkbox" style="display: none;">
-                    <label for="toggle-{{ .File.UniqueID }}" class="collapsible-header">
+                    <label for="toggle-{{ .File.UniqueID }}" class="collapsible-header" id="collapsible-header">
                         {{ if .Pages }}
-                            <span class="parent-box expand"></span>
-                            <span class="parent-box opened"></span>
+                            <span class="parent-box expand" id="toggle-expand"></span>
+                            <span class="parent-box opened" id="toggle-opened"></span>
                         {{ end }}
                         {{ .Title }} 
                     </label>
                     {{ partial "sidebar-list-pages.html" (dict "context" . "currentUrl" $.Permalink) }}
                 {{ else if eq .Kind "page" }}
                     {{ if eq $.Permalink .Permalink }}                      
-                        <span class="parent-box current"></span>                 
+                        <span class="parent-box current" id="collapsible-link-current"></span>                 
                     {{ else }}                     
-                        <span class="parent-box-link"></span>              
+                        <span class="parent-box-link" id="collapsible-link-option"></span>              
                     {{ end }}
                     <a href="{{ .Permalink }}" style="{{if eq $.Permalink .Permalink}}font-weight: bold;{{end}}">{{ .Title }} </a> 
                 {{ end }}