@@ -41,12 +41,16 @@ const DocsData = (() => {
4141const DocsState = {
4242 currentPage : document . body . dataset . page || "index.html" ,
4343 currentSection : document . body . dataset . defaultSection || "home" ,
44- navOpen : false
44+ navOpen : false ,
45+ navGroupFilter : "All" ,
46+ searchOpen : false
4547} ;
4648
4749const DocsElements = {
4850 body : document . body ,
51+ topbarSearch : document . getElementById ( "topbar-search" ) ,
4952 sidebar : document . getElementById ( "sidebar" ) ,
53+ sidebarTabs : document . getElementById ( "sidebar-tabs" ) ,
5054 sidebarNav : document . getElementById ( "sidebar-nav" ) ,
5155 sidebarBackdrop : document . getElementById ( "sidebar-backdrop" ) ,
5256 menuToggle : document . getElementById ( "menu-toggle" ) ,
@@ -164,7 +168,9 @@ const Sidebar = (() => {
164168 }
165169
166170 function render ( ) {
167- DocsElements . sidebarNav . innerHTML = DocsData . groups . map ( renderGroup ) . join ( "" ) ;
171+ renderTabs ( ) ;
172+ const groups = DocsState . navGroupFilter === "All" ? DocsData . groups : [ DocsState . navGroupFilter ] ;
173+ DocsElements . sidebarNav . innerHTML = groups . map ( renderGroup ) . join ( "" ) ;
168174
169175 DocsElements . sidebarNav . querySelectorAll ( ".nav-item" ) . forEach ( ( item ) => {
170176 item . addEventListener ( "click" , ( event ) => {
@@ -178,6 +184,36 @@ const Sidebar = (() => {
178184 syncActive ( ) ;
179185 }
180186
187+ function renderTabs ( ) {
188+ if ( ! DocsElements . sidebarTabs ) {
189+ return ;
190+ }
191+
192+ const tabs = [ "All" , ...DocsData . groups ] ;
193+ DocsElements . sidebarTabs . innerHTML = tabs . map ( ( group ) => `
194+ <button type="button" class="sidebar-tab" data-group="${ group } ${ group }
195+ ` ) . join ( "" ) ;
196+
197+ DocsElements . sidebarTabs . querySelectorAll ( ".sidebar-tab" ) . forEach ( ( button ) => {
198+ button . addEventListener ( "click" , ( ) => {
199+ DocsState . navGroupFilter = button . dataset . group || "All" ;
200+ render ( ) ;
201+ } ) ;
202+ } ) ;
203+
204+ syncTabs ( ) ;
205+ }
206+
207+ function syncTabs ( ) {
208+ if ( ! DocsElements . sidebarTabs ) {
209+ return ;
210+ }
211+
212+ DocsElements . sidebarTabs . querySelectorAll ( ".sidebar-tab" ) . forEach ( ( button ) => {
213+ button . classList . toggle ( "active" , button . dataset . group === DocsState . navGroupFilter ) ;
214+ } ) ;
215+ }
216+
181217 function syncActive ( ) {
182218 const active = DocsHelpers . currentEntry ( ) ;
183219
@@ -205,11 +241,23 @@ const Sidebar = (() => {
205241} ) ( ) ;
206242
207243const Search = ( ( ) => {
244+ function setOpen ( open ) {
245+ DocsState . searchOpen = open ;
246+ DocsElements . topbarSearch ?. classList . toggle ( "open" , open ) ;
247+ if ( ! open && DocsElements . searchResults ) {
248+ DocsElements . searchResults . innerHTML = "" ;
249+ }
250+ }
251+
208252 function renderResults ( query = "" ) {
253+ if ( ! DocsElements . searchResults ) {
254+ return ;
255+ }
256+
209257 const needle = query . trim ( ) . toLowerCase ( ) ;
210258 const results = DocsData . entries . filter ( ( entry ) => {
211259 if ( needle . length === 0 ) {
212- return DocsData . pages [ entry . page ] ?. title === DocsData . pages [ DocsState . currentPage ] ?. title ;
260+ return true ;
213261 }
214262
215263 return [
@@ -237,21 +285,38 @@ const Search = (() => {
237285 button . addEventListener ( "click" , ( ) => {
238286 const entry = DocsHelpers . findEntry ( button . dataset . sectionId ) ;
239287 Sidebar . setOpen ( false ) ;
288+ setOpen ( false ) ;
289+ DocsElements . searchInput ?. blur ( ) ;
240290 DocsHelpers . goToEntry ( entry ) ;
241291 } ) ;
242292 } ) ;
243293 }
244294
245295 function bind ( ) {
246296 DocsElements . searchInput ?. addEventListener ( "input" , ( event ) => {
297+ setOpen ( true ) ;
247298 renderResults ( event . target . value ) ;
248299 } ) ;
249300 DocsElements . searchInput ?. addEventListener ( "focus" , ( ) => {
301+ setOpen ( true ) ;
302+ renderResults ( DocsElements . searchInput . value ) ;
303+ } ) ;
304+ DocsElements . searchInput ?. addEventListener ( "click" , ( ) => {
305+ setOpen ( true ) ;
250306 renderResults ( DocsElements . searchInput . value ) ;
251307 } ) ;
308+ document . addEventListener ( "click" , ( event ) => {
309+ if ( ! DocsElements . topbarSearch ) {
310+ return ;
311+ }
312+ if ( DocsElements . topbarSearch . contains ( event . target ) ) {
313+ return ;
314+ }
315+ setOpen ( false ) ;
316+ } ) ;
252317 }
253318
254- return { bind, renderResults } ;
319+ return { bind, renderResults, setOpen } ;
255320} ) ( ) ;
256321
257322const ContactPanel = ( ( ) => {
@@ -394,6 +459,8 @@ const App = (() => {
394459 if ( ( event . ctrlKey || event . metaKey ) && event . key . toLowerCase ( ) === "k" ) {
395460 event . preventDefault ( ) ;
396461 DocsElements . searchInput ?. focus ( ) ;
462+ Search . setOpen ( true ) ;
463+ Search . renderResults ( DocsElements . searchInput ?. value || "" ) ;
397464 return ;
398465 }
399466
@@ -406,6 +473,8 @@ const App = (() => {
406473 if ( ! editable ) {
407474 event . preventDefault ( ) ;
408475 DocsElements . searchInput ?. focus ( ) ;
476+ Search . setOpen ( true ) ;
477+ Search . renderResults ( DocsElements . searchInput ?. value || "" ) ;
409478 }
410479 return ;
411480 }
@@ -415,6 +484,11 @@ const App = (() => {
415484 ContactPanel . closeOpen ( ) ;
416485 return ;
417486 }
487+ if ( DocsState . searchOpen ) {
488+ Search . setOpen ( false ) ;
489+ DocsElements . searchInput ?. blur ( ) ;
490+ return ;
491+ }
418492 if ( DocsState . navOpen ) {
419493 Sidebar . setOpen ( false ) ;
420494 } else if ( DocsElements . searchInput && document . activeElement === DocsElements . searchInput ) {
@@ -428,7 +502,7 @@ const App = (() => {
428502 DocsHelpers . syncCurrentSection ( ) ;
429503 Sidebar . render ( ) ;
430504 Search . bind ( ) ;
431- Search . renderResults ( "" ) ;
505+ Search . setOpen ( false ) ;
432506 bindHomeEasterEgg ( ) ;
433507 bindGlobalEvents ( ) ;
434508
0 commit comments