Skip to content

Commit 15557e6

Browse files
feat: order reference alphabeticaly (#701)
1 parent 1c49b6d commit 15557e6

File tree

1 file changed

+18
-4
lines changed

1 file changed

+18
-4
lines changed

src/ui/layout/main-navigation.tsx

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,14 @@ interface NavProps {
2525
};
2626
}
2727

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+
2836
// check if every item on the list has mainNavExclude as true
2937
const shouldHideNavItem = (list: EntryList["learn" | "reference"]) =>
3038
list.filter(({ mainNavExclude }) => mainNavExclude).length === list.length;
@@ -60,11 +68,14 @@ function ListItemLink(props: { item: Entry }) {
6068
);
6169
}
6270

63-
function DirList(props: { list: Entry[] }) {
71+
function DirList(props: { list: Entry[]; sortAlphabeticaly?: boolean }) {
6472
return (
6573
<For each={props.list}>
6674
{(item) => {
6775
if (Array.isArray(item.children)) {
76+
const itemChildren = props.sortAlphabeticaly
77+
? getAlphabeticalyOrderedList(item.children)
78+
: item.children;
6879
return (
6980
<li>
7081
<span class="font-semibold text-slate-800 dark:text-slate-100">
@@ -74,7 +85,7 @@ function DirList(props: { list: Entry[] }) {
7485
role="list"
7586
class="ml-2 mt-2 space-y-3 border-l-[1px] border-slate-400 dark:border-slate-700 lg:border-slate-400"
7687
>
77-
<For each={item.children}>
88+
<For each={itemChildren}>
7889
{(child) => {
7990
if (
8091
Array.isArray(child.children) &&
@@ -100,7 +111,10 @@ function DirList(props: { list: Entry[] }) {
100111
role="list"
101112
class="ml-4 mt-3 space-y-3 border-l-[1px] border-slate-400 dark:border-slate-700 dark:lg:border-slate-700"
102113
>
103-
<DirList list={child.children} />
114+
<DirList
115+
sortAlphabeticaly={props.sortAlphabeticaly}
116+
list={child.children}
117+
/>
104118
</ul>
105119
</Collapsible.Content>
106120
</Collapsible.Root>
@@ -171,7 +185,7 @@ export function MainNavigation(props: NavProps) {
171185
fallback={<p>{i18n.t("main.nav.no.routes")}</p>}
172186
>
173187
<ul role="list" class="space-y-3 px-4">
174-
<DirList list={reference()} />
188+
<DirList sortAlphabeticaly list={reference()} />
175189
</ul>
176190
</Show>
177191
</Tabs.Content>

0 commit comments

Comments
 (0)