Navigation Start, Centre and End Regions Not Showing Block Content

I created a sub theme, but when I try and place blocks into the navigation start, centre or end regions the blocks are not showing up. I did a bit of digging and chat GPT has suggested that the issue may be in the way the regions are passed from the page template to the header component.

The page template passes the regions as an associative array:

{% embed 'mr:header' with {
  header_top: page.header_top,
  top: page.navigation_top,
  content: {
    navigation_start: page.navigation_start,
    navigation_center: page.navigation_center,
    navigation_end: page.navigation_end,
  },
  extra_classes: header_extra_classes,
} only %}

This then gets outputted in the component:

{% include 'artisan:drawer' with {
  drawer_id: 'header-drawer',
  drawer_content: [content.navigation_start, content.navigation_center, content.navigation_end],
  drawer_sidebar: [content.navigation_start, content.navigation_center],
} only %}

But because content is a slot in the header component Drupal converts the associative array to an indexed array so it can't refer to the key names anymore.

I was able to fix this by changing the content in the header component from a slot to prop. So the new header.component.yml becomes:

$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
name: Header
props:
  type: object
  properties:
    extra_classes:
      title: Header extra classes
      type: ['array', 'null']
      items:
        type: string

    content:
      title: Header content regions
      type: object
slots:
  top:
    title: Header top content

This works because associative arrays passed as a prop do not get converted to indexed arrays.