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 size(min-width: 400px) {
.navigation__brand span {
height: auto;
overflow: unset;
position: unset;
}
}

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

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