diff --git a/client/src/mobile/components/MSectionNav.tsx b/client/src/mobile/components/MSectionNav.tsx index 45a5dd7d6..98291a73a 100644 --- a/client/src/mobile/components/MSectionNav.tsx +++ b/client/src/mobile/components/MSectionNav.tsx @@ -6,6 +6,11 @@ export interface MSection { id: string; label: string; icon: LucideIcon; + /** + * The heading the section stands under. Consecutive sections with the same + * group share one heading; a screen whose sections name none shows none. + */ + group?: string; } interface MSectionRowProps { @@ -33,6 +38,50 @@ export function MSectionRow({ section, active, current = false, onPick }: MSecti ); } +/** + * The sections in order, each run of one group under its heading: the same list + * in the dropdown of a phone and in the list beside the page. + */ +export function MSectionList({ + sections, + activeId, + markCurrent = false, + onPick, +}: { + sections: MSection[]; + activeId: string; + /** Marks the active row as the page on show (the list beside the page). */ + markCurrent?: boolean; + onPick: (id: string) => void; +}) { + return ( + <> + {sections.map((section, i) => { + const heading = section.group && section.group !== sections[i - 1]?.group ? section.group : null; + return ( +