@@ -25,6 +25,14 @@ interface NavProps {
25
25
} ;
26
26
}
27
27
28
+ // gets an array of entries and orders it alphabeticaly
29
+ const getAlphabeticalyOrderedList = ( list : Entry [ ] ) =>
30
+ list . slice ( ) . sort ( ( firstChild , secondChild ) => {
31
+ return firstChild . title
32
+ . toLowerCase ( )
33
+ . localeCompare ( secondChild . title . toLowerCase ( ) ) ;
34
+ } ) ;
35
+
28
36
// check if every item on the list has mainNavExclude as true
29
37
const shouldHideNavItem = ( list : EntryList [ "learn" | "reference" ] ) =>
30
38
list . filter ( ( { mainNavExclude } ) => mainNavExclude ) . length === list . length ;
@@ -60,11 +68,14 @@ function ListItemLink(props: { item: Entry }) {
60
68
) ;
61
69
}
62
70
63
- function DirList ( props : { list : Entry [ ] } ) {
71
+ function DirList ( props : { list : Entry [ ] ; sortAlphabeticaly ?: boolean } ) {
64
72
return (
65
73
< For each = { props . list } >
66
74
{ ( item ) => {
67
75
if ( Array . isArray ( item . children ) ) {
76
+ const itemChildren = props . sortAlphabeticaly
77
+ ? getAlphabeticalyOrderedList ( item . children )
78
+ : item . children ;
68
79
return (
69
80
< li >
70
81
< span class = "font-semibold text-slate-800 dark:text-slate-100" >
@@ -74,7 +85,7 @@ function DirList(props: { list: Entry[] }) {
74
85
role = "list"
75
86
class = "ml-2 mt-2 space-y-3 border-l-[1px] border-slate-400 dark:border-slate-700 lg:border-slate-400"
76
87
>
77
- < For each = { item . children } >
88
+ < For each = { itemChildren } >
78
89
{ ( child ) => {
79
90
if (
80
91
Array . isArray ( child . children ) &&
@@ -100,7 +111,10 @@ function DirList(props: { list: Entry[] }) {
100
111
role = "list"
101
112
class = "ml-4 mt-3 space-y-3 border-l-[1px] border-slate-400 dark:border-slate-700 dark:lg:border-slate-700"
102
113
>
103
- < DirList list = { child . children } />
114
+ < DirList
115
+ sortAlphabeticaly = { props . sortAlphabeticaly }
116
+ list = { child . children }
117
+ />
104
118
</ ul >
105
119
</ Collapsible . Content >
106
120
</ Collapsible . Root >
@@ -171,7 +185,7 @@ export function MainNavigation(props: NavProps) {
171
185
fallback = { < p > { i18n . t ( "main.nav.no.routes" ) } </ p > }
172
186
>
173
187
< ul role = "list" class = "space-y-3 px-4" >
174
- < DirList list = { reference ( ) } />
188
+ < DirList sortAlphabeticaly list = { reference ( ) } />
175
189
</ ul >
176
190
</ Show >
177
191
</ Tabs . Content >
0 commit comments