Der Fall kann aber gar nicht eintreten
Im aktuellen Zustand nicht, das habe ich erst falsch gedeutet und dir in dem Punkt ja auch schon Recht gegeben. Meine weiteren Bedenken gelten aber nicht dem status quo deiner Lösung, sondern der Frage, wie sie sich verhält, wenn sich äußere Umstände ändern. Eine robuste Lösung zeichnet sich durch gute Wartbarkeit und hohe Wiederverwendbarkeit aus. Ein Beispiel: wenn ich den Hamburger-Button nun doch auf breiteren Viewports anbieten möchte, reicht es dann den Button per CSS einzublenden und alles funktioniert erwartungsgemäß oder erlebe ich eine Überraschung?
Man kann sicherlich nicht alle Umweltfaktoren antizipieren und daher bleibt es Abwägungssache, wogegen man sich schützen möchte. Ich finde, dass eine CSS-Änderungen keine JavaScript-Änderungen hinter sich herziehen sollte und umgekehrt und würde daher die Kopplung auch so gering wie möglich halten, also die Abhängigkeiten zwischen CSS und JS reduzieren. Seperation of Concerns ist meiner Erfahrung nach ein ziemlich effektives Werkzeug, um robuste Lösungen zu bauen, nur dazu wollte ich dir hier raten.
Konkret würde ich deine Lösung verbessern, indem ich den expandend-Zustand der Navigation in der CSS-Welt, in der JavaScript-Welt und in der ARIA-Welt miteinander synchronisiere.