diff --git a/docs/src/_includes/header.pug b/docs/src/_includes/header.pug index d869b594..e01a7d42 100644 --- a/docs/src/_includes/header.pug +++ b/docs/src/_includes/header.pug @@ -15,31 +15,31 @@ .custom-community-projects.hidden.sm_block.absolute.z-5.pin-t.mt-3.ml-3.border.border-proton.rounded-auto.bg-white-pure.shadow-1 .flex.flrw.pt-0x a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/talksearch/") - .fln.bg-teal.rounded-auto.w-2x.h-2x + .fln.bg-blue.rounded-auto.w-2x.h-2x img.w-100(src="assets/community/talksearch-icon.svg", alt="TalkSearch") - .fla.pl-1.text-solstice.text-2.bold.hover_text-nebula TalkSearch + .fla.pl-1.text-solstice.text-1.bold.hover_text-nebula TalkSearch a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/jekyll-algolia/") - .fln.bg-purple.rounded-auto.w-2x.h-2x + .fln.bg-blue.rounded-auto.w-2x.h-2x img.w-100(src="assets/community/jekyll-icon.svg", alt="Jekyll") - .fla.pl-1.text-solstice.text-2.bold.hover_text-nebula Jekyll + .fla.pl-1.text-solstice.text-1.bold.hover_text-nebula Jekyll a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/instantsearch.js/") - .fln.bg-yellow.rounded-auto.w-2x.h-2x + .fln.bg-blue.rounded-auto.w-2x.h-2x img.w-100(src="assets/community/instantsearch-icon.svg", alt="InstantSearch") - .fla.pl-1.text-solstice.text-2.bold.hover_text-nebula InstantSearch + .fla.pl-1.text-solstice.text-1.bold.hover_text-nebula InstantSearch a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/react-instantsearch/") .fln.bg-blue.rounded-auto.w-2x.h-2x img.w-100(src="assets/community/react-icon.svg", alt="React InstantSearch") - .fla.pl-1.text-solstice.text-2.bold.hover_text-nebula React InstantSearch + .fla.pl-1.text-solstice.text-1.bold.hover_text-nebula React InstantSearch a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline - .fln.bg-green.rounded-auto.w-2x.h-2x(href="https://community.algolia.com/vue-instantsearch/") + .fln.bg-blue.rounded-auto.w-2x.h-2x(href="https://community.algolia.com/vue-instantsearch/") img.w-100(src="assets/community/vue-icon.svg", alt="Vue InstantSearch") - .fla.pl-1.text-solstice.text-2.bold.hover_text-nebula Vue InstantSearch + .fla.pl-1.text-solstice.text-1.bold.hover_text-nebula Vue InstantSearch a.fln.w-50.flex.flrnw.p-05.flc.hover_no-underline(href="https://community.algolia.com/angular-instantsearch/") - .fln.bg-red.rounded-auto.w-2x.h-2x.flex.flrnw.flc + .fln.bg-blue.rounded-auto.w-2x.h-2x.flex.flrnw.flc img.w-80(src="assets/community/angular-icon.svg", alt="Angular InstantSearch") - .fla.pl-1.text-solstice.text-2.bold.hover_text-nebula Angular InstantSearch - a.fla.flex.flrnw.p-0x.flc.text-solstice.bold.bg-moon.rounded-auto.py-1(href="https://discourse.algolia.com/") - |Community forum + .fla.pl-1.text-solstice.text-1.bold.hover_text-nebula Angular InstantSearch + a.fla.flex.flrnw.p-0x.flc.text-2.text-solstice.bold.bg-moon.rounded-auto.py-1(href="https://discourse.algolia.com/") + |Community Forum //- Separator .hidden.lg_flex.fln.flrnw.flc @@ -58,20 +58,8 @@ .custom-search-wrapper.fln.h-60.w-100.rounded-auto.relative label.absolute.pin-left.z-1.w-1.h-100.ml-05.text-solstice.fill-current.cursor-pointer(for="docsearch") include ../assets/icons/magnifying-glass.svg - input.custom-search-input.w-100.h-100.outline-none.text-solstice.pl-2.rounded-auto.bg-moon.focus_bg-transparent#docsearch(placeholder="Search the docs...") + input.custom-search-input.w-100.h-100.outline-none.text-solstice.pl-2.rounded-auto.bg-moon.focus_bg-moon--1#docsearch(placeholder="Search the docs...") //- Links - .hidden.md_flex.justify-start.items-center.mx-1 - a.text-1.text-solstice.hover_text-nebula.hover_no-underline.mr-1(href="./what-is-docsearch.html") Documentation - a.h-1x.w-1x.text-solstice.fill-current.items-center.hover_text-grey-darker.mr-1(href=site.repo, target="_blank") - include ../assets/icons/github.svg - - .md_hidden.flex.justify-start.items-center.mx-2 - button.text-solstice.items-center.hover_text-grey-darker(href="#", onclick="toggleNav()") - svg.h-1x.w-1x.fill-current(role="button", xmlns="http://www.w3.org/2000/svg", viewBox="0 0 20 20") - path(d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z") - - svg.hidden.h-1x.w-1x.fill-current(role="button", xmlns="http://www.w3.org/2000/svg", viewBox="0 0 20 20") - path(d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z") - - + block nav + diff --git a/docs/src/_layouts/homepage.pug b/docs/src/_layouts/homepage.pug index f3201d94..f6a353f0 100644 --- a/docs/src/_layouts/homepage.pug +++ b/docs/src/_layouts/homepage.pug @@ -3,6 +3,12 @@ extends main.pug block script script(src="js/home.js") +block nav + .flex.justify-start.items-center.mx-1 + a.text-1.text-solstice.hover_text-nebula.hover_no-underline.mr-1(href="./what-is-docsearch.html") Docs + a.h-1x.w-1x.text-solstice.fill-current.items-center.hover_text-grey-darker.mr-1(href=site.repo, target="_blank") + include ../assets/icons/github.svg + block content .bg-docsearch-hero .max-w-md.m-auto.text-center.px-2 diff --git a/docs/src/_layouts/two-columns.pug b/docs/src/_layouts/two-columns.pug index dac22cd1..145cda9b 100644 --- a/docs/src/_layouts/two-columns.pug +++ b/docs/src/_layouts/two-columns.pug @@ -2,16 +2,28 @@ extends main.pug block script script(src="js/docs.js") + +block nav + .hidden.md_flex.justify-start.items-center.mx-1 + a.h-1x.w-1x.text-solstice.fill-current.items-center.hover_text-grey-darker.mr-1(href=site.repo, target="_blank") + include ../assets/icons/github.svg + .md_hidden.flex.justify-start.items-center.mx-2 + button.text-solstice.items-center.hover_text-grey-darker.focus_outline-none(href="#", onclick="toggleNav()") + svg.navigation-open.h-1x.w-1x.fill-current(role="button", xmlns="http://www.w3.org/2000/svg", viewBox="0 0 20 20") + path(d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z") + svg.navigation-close.hidden.h-1x.w-1x.fill-current(role="button", xmlns="http://www.w3.org/2000/svg", viewBox="0 0 20 20") + path(d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z") + block content .bgtb-moon-white-pure.px-2 .md_flex.max-w-lg.m-auto - .navigation-sidebar.absolute.z-90.top-16.w-full.border-b.md_static.bg-white.md_bg-transparent.md_w-30.md_block.md_border-0 + .navigation-sidebar.hidden.absolute.z-90.-m-2.md_m-0.w-100.top-16.border-b.md_static.bg-white.md_bg-transparent.md_w-25.md_block.md_border-0.text-center.md_text-left // Adding subsections from markdown - .sticky.pin-t.top-3.h-100vh-3.pl-1.lg_pl-2.overflow-y-auto.pt-3 + .sticky.pin-t.top-3.h-100vh-3.overflow-y-auto.pt-4.md_pt-3 each category in sidebar - .category.text-nebula.poppins.uppercase.mb-0x=category.title - ul.list-reset.pt-05.pb-1.text-1.mb-1.ml-0x + .category.text-nebula.poppins.uppercase.mb-1.text-2.md_text-1=category.title + ul.list-reset.pb-1.text-1.mb-1.md_ml-0x each page in category.pages - var isCurrent = current.url === page.url - var additionalClasses = isCurrent ? 'text-nebula' : 'text-solstice' diff --git a/docs/src/_styles/docs.css b/docs/src/_styles/docs.css index bc179d47..775d0f35 100644 --- a/docs/src/_styles/docs.css +++ b/docs/src/_styles/docs.css @@ -32,5 +32,5 @@ } .navigation-sidebar{ - min-width: 200px; + min-width: 220px; } diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js index 3daf4f9f..442901a9 100644 --- a/docs/src/js/docs.js +++ b/docs/src/js/docs.js @@ -1,4 +1,8 @@ function toggleNav() { - console.log(this); - // element.classList.add("mystyle"); + const sidebar = document.getElementsByClassName('navigation-sidebar')[0]; + const open = document.getElementsByClassName('navigation-open')[0]; + const close = document.getElementsByClassName('navigation-close')[0]; + sidebar.classList.toggle('hidden'); + open.classList.toggle('hidden'); + close.classList.toggle('hidden'); } diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js index b321ec91..2180c506 100644 --- a/docs/tailwind.config.js +++ b/docs/tailwind.config.js @@ -11,6 +11,8 @@ const algoliaColors = { cosmos: '#21243d', nebula: '#5468ff', // links + 'moon--1': '#EBEBF2', // input focus + 'neptune-2': '#3A46A1', 'neptune-1': '#5560B5', neptune: '#707BCC',