nested / hierarchical menu items

[sleidig]

When there are a lot of different menu items on the left (many different entities), the menu becomes hard to navigate. Nested items, expanding upon hovering on an entry, will be useful.

• work in NavigationComponent
• maybe create a storybook file for this component for easier testing and design
• check Angular Material menu and nav-list components and experiment with them to figure out the best way to handle this
• adapt MenuItem config structure to allow nested items (in a backwards-compatible way; see comments below in discussion)
• implement code for nested items

[sleidig]

For the config format, I would suggest the following:

interface NavigationMenuConfig {
  items: MenuItem[];
}

interface MenuItem {
  label: string;
  icon?: string;
  target: string | MenuItem[]; // allow recursively an expanded menu
}

if the recursion makes things too difficult, we could also restrict to maximum one level of indentation. But I would love a generic approach.

--> need to add a config migration to rename "link" to "target" (which would sound more general)

---

currently existing format:

interface NavigationMenuConfig {
  items: MenuItem[];
}

interface MenuItem {
  label: string;
  icon?: string;
  link: string;
}