Website: Mobile and desktop have it's own search input
MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
<div class="stretch"></div>
<a href="#" class="mobile-handle mobile-handle-toc">
- {% include "./svg/mobile-toc-handle.njk" %}
+ {% include "./svg/search-icon.njk" %}
+ {% include "./svg/close-icon.njk" %}
</a>
<a href="#" class="mobile-handle mobile-handle-nav">
{% include "./svg/mobile-nav-handle.njk" %}
+ {% include "./svg/close-icon.njk" %}
</a>
</div>
</a>
</div>
- <div id="docsearch-container">
+ <div class="docsearch-container desktop">
{% include "./svg/search-icon.njk" %}
- <input type="text" id="docsearch" placeholder="Search" />
+ <input type="text" id="docsearch-desktop" class="docsearch" placeholder="Search" />
</div>
<div class="menu-wrapper">
{{ content | safe }}
</div>
+ {% set sidebarClasses = "sidebar toc" %}
{% if tocHTML != "" %}
+ {% set sidebarClasses = "sidebar toc with-toc" %}
+ {% endif %}
+
<div class="sidebar-container">
- <div class="sidebar toc">
+ <div class="{{sidebarClasses}}">
+ <div class="docsearch-container mobile">
+ {% include "./svg/search-icon.njk" %}
+ <input type="text" id="docsearch-mobile" class="docsearch" placeholder="Search" />
+ </div>
+ {% if tocHTML != "" %}
<nav aria-labelledby="table-of-content" class="table-of-contents">
<h2 id="table-of-content">Table of Contents</h2>
<div class="toc-container">
{{ tocHTML }}
</div>
</nav>
+ {% endif %}
</div>
</div>
- {% endif %}
</div>
{% if environment == "production" %}

ADD
website/src/_includes/layouts/svg/close-icon.njk
+
+<svg class="close icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>Close Icon</title><rect class="cls-1" x="-5.29" y="13.34" width="42.58" height="5.33" rx="2.66" transform="translate(16 -6.63) rotate(45)"/><rect class="cls-1" x="-5.29" y="13.34" width="42.58" height="5.33" rx="2.66" transform="translate(38.63 16) rotate(135)"/></svg>
\ No newline at end of file

MODIFY
website/src/_includes/layouts/svg/mobile-nav-handle.njk
website/src/_includes/layouts/svg/mobile-nav-handle.njk
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>Mobile Navigation Handle</title><rect width="32" height="3.66" rx="1.83"/><rect y="28.34" width="32" height="3.66" rx="1.83"/><rect y="14.17" width="32" height="3.66" rx="1.83"/></svg>
+<svg class="hamburger icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>Mobile Navigation Handle</title><rect class="cls-1" width="32" height="4.86" rx="2.43"/><rect class="cls-1" y="27.14" width="32" height="4.86" rx="2.43"/><rect class="cls-1" y="13.57" width="32" height="4.86" rx="2.43"/></svg>

DELETE
website/src/_includes/layouts/svg/mobile-toc-handle.njk
-
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
- <title>Mobile Table of Contents Handle</title>
- <rect y="28.4" width="4.02" height="3.6"/>
- <path d="M32,30.2A1.9,1.9,0,0,1,30,32H8V28.4H30A1.91,1.91,0,0,1,32,30.2Z"/>
- <path opacity="0.6" d="M32,20.73a1.9,1.9,0,0,1-2,1.8H12v-3.6H30A1.91,1.91,0,0,1,32,20.73Z"/>
- <rect opacity="0.8" x="4.02" y="18.93" width="4" height="3.6"/>
- <rect y="9.47" width="4.02" height="3.6"/>
- <path d="M32,11.27a1.91,1.91,0,0,1-2,1.8H8V9.47H30A1.9,1.9,0,0,1,32,11.27Z"/>
- <rect width="4.02" height="3.6"/>
- <path d="M32,1.8a1.91,1.91,0,0,1-2,1.8H8V0H30A1.9,1.9,0,0,1,32,1.8Z"/>
- </svg>
\ No newline at end of file

MODIFY
website/src/_includes/layouts/svg/search-icon.njk
website/src/_includes/layouts/svg/search-icon.njk
-<svg id="search-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-1 0 136 136.21852">
+<svg class="search icon" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-1 0 136 136.21852">
<path d="M 93.148438 80.832031 C 109.5 57.742188 104.03125 25.769531 80.941406 9.421875 C 57.851562 -6.925781 25.878906 -1.460938 9.53125 21.632812 C -6.816406 44.722656 -1.351562 76.691406 21.742188 93.039062 C 38.222656 104.707031 60.011719 105.605469 77.394531 95.339844 L 115.164062 132.882812 C 119.242188 137.175781 126.027344 137.347656 130.320312 133.269531 C 134.613281 129.195312 134.785156 122.410156 130.710938 118.117188 C 130.582031 117.980469 130.457031 117.855469 130.320312 117.726562 Z M 51.308594 84.332031 C 33.0625 84.335938 18.269531 69.554688 18.257812 51.308594 C 18.253906 33.0625 33.035156 18.269531 51.285156 18.261719 C 69.507812 18.253906 84.292969 33.011719 84.328125 51.234375 C 84.359375 69.484375 69.585938 84.300781 51.332031 84.332031 C 51.324219 84.332031 51.320312 84.332031 51.308594 84.332031 Z M 51.308594 84.332031" fill="currentColor" />
</svg>

MODIFY
website/src/styles/_header.scss
website/src/styles/_header.scss
align-items: center;
justify-content: center;
- svg {
- height: 32px;
- width: 32px;
+ &.mobile-handle-toc, &.mobile-handle-nav{
+ &.active{
+ .icon{
+ display: none;
+ }
+ }
+ }
+
+ .close{
+ display: none;
+ }
+
+ &.active {
+ .close{
+ display: inline !important;
+ }
+ }
+
+ .icon {
+ height: 24px;
+ width: 24px;
}
svg rect, svg path {

MODIFY
website/src/styles/_sidebar.scss
website/src/styles/_sidebar.scss
&.toc {
z-index: 0;
flex-grow: 1;
+ padding-top: 64px;
@include desktop-only() {
padding-top: 0;
min-width: 256px;
+ display: none;
+ }
+
+ &.with-toc{
+ display: block;
}
h2 {
left: $unit * 2 !important;
}
-#docsearch-container {
+.docsearch-container {
position: relative;
border-bottom: 1px solid var(--soft-border-color);
- #search-icon {
+ .search.icon {
z-index: 99999;
position: absolute;
left: 20px;
pointer-events: none;
}
- input#docsearch {
+ input.docsearch {
padding: 24px 32px;
padding-left: 42px;
border: 0;
background: rgba(0, 0, 0, 0.05);
font-size: 1.1em;
color: inherit;
+ width: 100%;
&::placeholder {
color: inherit;
}
}
}
+
+ &.mobile{
+ @include desktop-only(){
+ display: none;
+ }
+ }
+
+ &.desktop{
+ @include mobile-only(){
+ display: none;
+ }
+ }
}
html[data-theme='dark'] .color-scheme-switch:after {

MODIFY
website/static/js/index.js
website/static/js/index.js
@@ -155,6 +155,7 @@ function toggleMobileNav(event) {
}
event.preventDefault();
+ elements.mobileHandleNav.classList.toggle("active");
elements.sidebarNav.classList.toggle("visible");
document.body.classList.toggle("no-scroll");
}
@@ -164,12 +165,13 @@ function toggleMobileTOC(event) {
mobileSidebarActive = undefined;
} else {
if (mobileSidebarActive === "nav") {
- toggleMobileTOC(event);
+ toggleMobileNav(event);
}
mobileSidebarActive = "toc";
}
event.preventDefault();
+ elements.mobileHandleTOC.classList.toggle("active");
elements.sidebarTOC.classList.toggle("visible");
document.body.classList.toggle("no-scroll");
toc.highlight();
@@ -180,6 +182,23 @@ for (const link of elements.tocLinks) {
link.innerText = link.innerText.replace(/(\s#)$/, "");
}
+/**
+ * @param {string} inputSelector
+ */
+function initDocsearch(inputSelector) {
+ //checks if docsearch wasn't already instantiated
+ const input = document.querySelector(`.algolia-autocomplete ${inputSelector}`);
+
+ if (input == null) {
+ return window.docsearch({
+ apiKey: "66db1ad366d458c6acded7cbc23dba7e",
+ indexName: "romefrontend",
+ inputSelector,
+ debug: false, // Set debug to true if you want to inspect the dropdown
+ });
+ }
+}
+
window.onload = function() {
if (window.location.hash !== "") {
scrollToHeading(window.location.hash);
@@ -192,17 +211,22 @@ window.onload = function() {
script.addEventListener(
"load",
() => {
- window.docsearch({
- apiKey: "66db1ad366d458c6acded7cbc23dba7e",
- indexName: "romefrontend",
- inputSelector: "#docsearch",
- debug: false, // Set debug to true if you want to inspect the dropdown
- });
+ initDocsearch(
+ window.innerWidth > 768 ? "#docsearch-desktop" : "#docsearch-mobile",
+ );
},
);
document.body.appendChild(script);
};
+const mediaQueryListener = window.matchMedia("(min-width: 768px)");
+
+mediaQueryListener.addListener(() => {
+ initDocsearch(
+ window.innerWidth > 768 ? "#docsearch-desktop" : "#docsearch-mobile",
+ );
+});
+
document.addEventListener(
"click",
function(event) {

Website: Mobile and desktop have it's own search input (#869)