Create dynamic menus from file/folder structure

We want to build our main menu (Topbar menu) dynamically from the File/Folder structure inside our content Folder.

So, let's say, we have a menu like this:

pages/
├─ fchh/
│  ├─ about.mdx
│  ├─ team.mdx
│  ├─ index.mdx
├─ projects/
│  ├─ farmbot.mdx
│  ├─ interfacer/
│  │  ├─ interfacer-first-project.mdx
│  │  ├─ interfacer-second-project.mdx
│  │  ├─ index.mdx
│  ├─ index.mdx

This should result in the Following menu inside of the UI:

Fab City Hamburg/
├─ About Us
├─ Team
Projects/
├─ Farmbot
├─ INTERFACER/
│  ├─ First Project
│  ├─ Second Project

The "pretty" titles of the menu items are generated from the index.mdx in every folder. These are just frontmatter files, that could look like this:

---
title: My fancy menu item
___

You can see how menus are built from the file system in general, in this snippet (currently it only works for content inside the blog folder – but it should work for all folders). https://gitlab.fabcity.hamburg/software/fchh-website/-/blob/main/src/components/DataHeaderWrapper.astro#L7