Navigation

The trick is setting 1fr as the column width for the menu section. This enables the menu to have a flexible width that fills all remaining space in the nav. Since it flexes, we watch it as an independent container to determine when to switch between a dropdown menu and displaying all menu items.

.navigation {
  container-type: inline-size;
  container-name: navigation;

  display: grid;
  grid-template-columns: auto 1fr auto;
}

.navigation__menu {
  container-type: inline-size;
  container-name: menu;
}

[aria-expanded="false"] + ul {
  display: none;
}

.navigation__brand span {
  /* Inclusively hidden so it is still read as a label by assistive tech */
  height: 1px;
  overflow: hidden;
  position: absolute;
}

@container navigation (min-width: 400px) {
  .navigation__brand span {
    height: auto;
    overflow: unset;
    position: unset;
  }
}

@container menu (min-width: 450px) {
  .navigation__menu button {
    display: none;
  }

  .navigation__menu ul {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}