Centered Header

Brand name in the center, navigation links split left and right. On mobile, the navigation collapses into a hamburger menu. Same props and actions slot as the Classic header.

Layout logic

Nav items are split in half at render time. The first half appears to the left of the brand, the second half to the right alongside the actions. With an odd number of links, the extra link goes to the left side.

Characteristics

  • position: sticky — same as Classic
  • Split nav: first half left, second half + actions right
  • data-testid="header-centered" for E2E tests
  • Mobile: hamburger opens all links vertically