Architecture Decision Record · 0008

SOLCOM-Header: `byte_theme:navbar` SDC bleibt, `links`-Slot wird Meta-Nav statt CTA, Menü-Items reusen `.solcom-btn-link`

TL;DR — Refactor in place statt neuer SDC: byte_theme:navbar Schema bleibt unverändert, Twig-Markup und CSS werden angepasst, links-Slot von „CTA-Buttons" zu „Meta-Nav" umgewidmet via Canvas-Config-Update.

Kontext

Das Figma-Design-System der SOLCOM-Site (figma.com/design/CHHDfbpX8Ys2LBiGs5HVK0, Node 824:14769 „Navigation") definiert den Site-Header: dunkelblauer BG (--brand-bg-blue), Logo links, drei zentrierte Top-Level-Menü-Items in Lime/ScalaSansLF-Bold 19 px ohne führendes Icon, Login-Link rechts mit Phosphor-user-Icon leading, Sprachschalter DE | EN mit Lime-Border-Trenner und 50 % Opacity für die inaktive Sprache. Container 1280 px mit 80 px Horizontal-Padding.

Bestehend:

byte_theme:navbar SDC (Slots logo / navigation / links) ist bereits über Canvas-page_region (canvas.page_region.byte_theme.header) verdrahtet — der links-Slot enthielt einen Placeholder-„Sign up"-Button (byte_theme:button).
.solcom-btn-link (src/main.css:389, ADR-0004) liefert Lime-Text + Hover (white) + Focus-Outline + Disabled-State für Dark-Context — visuell exakt das, was Figma für Menü-Items, Login-Link und Sprachschalter fordert.
byte_theme:icon (Phosphor-Set + custom solcom-Set) ist etabliert.
Page-BG ist nach ADR-0003 --brand-bg-blue — Dark-Context-Linkstyling funktioniert ohne Anpassungen.
--navbar-height als CSS-Variable existiert in theme.css (genutzt von hero-billboard's overlap_navbar: true).

Entscheidung

Refactor in place statt neuer SDC. Konkret:

byte_theme:navbar SDC bleibt strukturell erhalten — Schema (logo / navigation / links Slots, menu_align-Prop) wird nicht geändert. Nur Twig-Markup und CSS werden angepasst. Cherry-Pick-Kompatibilität zum Upstream-Byte-Theme bleibt hoch. Mobile-Hamburger-Mechanik (navbar.js, .navbar--menu--open-State) bleibt unverändert.
links-Slot wird semantisch umgewidmet von „CTA-Buttons" zu „Meta-Nav" — über Canvas-Config-Update: Sign-up-Button raus, block.system_menu_block.account und block.language_block.language_interface rein. Schema unverändert, nur Slot-Inhalt wechselt.
menu--main.html.twig-Override-Refactor inline mit Klassen-Reuse von .solcom-btn-link — Drupal-Menü-Semantik (in_active_trail, is_expanded, item.attributes) bleibt erhalten, kein byte_theme:button-link-Include. Items rendern als <a class="solcom-btn-link"> ohne leading Brand-Pfeil. Active-Trail bekommt solcom-btn-link--active-trail-Modifier mit Underline-Style.
Neuer Override menu--account.html.twig: Items als <a class="solcom-btn-link"> mit Phosphor-user-Icon leading (16 px).
Neuer Override links--language-block.html.twig: Items rendern als <a class="solcom-btn-link"> mit upper-cased langcode (DE, EN). Aktiv-Erkennung via 'is-active' in item.link['#options']['attributes']['class']. Inaktive Sprache: opacity-50. Trenner: border-r border-brand-lime auf jedem Item außer dem letzten.
Logo: byte_theme.info.yml zeigt jetzt auf solcom-logo.svg. .navbar--logo .branding Höhe auf h-12 mobile / h-[72px] desktop (Figma-Maße).
Container-Padding: navbar.twig Root erhält md:px-20 (80 px Horizontal-Padding) und items-center.
--navbar-height-Token-Korrektur: Variable von spacing × 15/18 (60/72 px) auf spacing × 16/26 (64/104 px) — entspricht der tatsächlich gerenderten Navbar-Höhe. hero-billboard's overlap_navbar: true zieht den Hero über das exakte Maß nach oben.
.navbar--links CSS-Layout-Reset: Replace von Button-gepinntem CSS mit flex w-full flex-col items-stretch gap-4 md:w-auto md:flex-row md:items-center md:gap-10.
Render-Contract-Tests als Kernel-Tests in tests/src/Kernel/HeaderTemplatesTest.php: 7 Tests pinnen die solcom-btn-link-Klasse, das No-Icon-Contract auf Main-Nav, den Active-Trail-Modifier, das Account-Menü mit User-Icon und die Sprachschalter-Mechanik.

Rejected alternatives

Expand each rejected option to see the rationale.

Vierter Slot meta einführen rejected

Bricht das Byte-Theme-Schema, erhöht Cherry-Pick-Reibung. Block-Layer kennt keine semantische Slot-Spezialisierung, nur „rechts vom Menü". Slot-Re-Purposing ist redaktionell sauber.

Neue SDC navbar-solcom parallel zur upstream navbar rejected

Dupliziert die Mobile-/Hamburger-Mechanik in navbar.js (~80 Zeilen), erhöht den Maintenance-Footprint. Die Visual-Anpassungen sind klein genug, um in CSS und Templates zu leben.

Menü-Items als byte_theme:button-link-Includes rejected

byte_theme:button-link zwingt zu führendem Brand-Pfeil und kennt keine Drupal-Menü-Semantik (in_active_trail, is_expanded, item.attributes). Direkter Klassen-Reuse über .solcom-btn-link ist besser.

Hardgecodete Login-/Sprachschalter-Markup im navbar.twig rejected

Bricht Drupal-Konventionen (User-Account-Menü ist der etablierte Ort für Auth-Management), würde Auth-Status-Switch im Twig nachbauen und Mehrsprachigkeit hardcoden.

Volle deutsche/englische Sprachnamen als Switcher-Label rejected

Figma 824:14916 zeigt explizit DE | EN. Volle Namen würden den Header-Real-Estate sprengen und sind Designer-Intention nicht zu folgen.

.solcom-nav-link als neue CSS-Klasse parallel zu .solcom-btn-link rejected

Wäre Token-Drift. Das visuelle Brand-Identity ist exakt das, was .solcom-btn-link schon hat. Eigene Klasse mit denselben @apply-Regeln wäre Code-Duplikation.

Brand-Pfeil leading auf Top-Level-Items rejected

Initial im Plan, nach User-Review verworfen: Figma 824:14769 Default-State zeigt keine führenden Pfeile. Mein erster Lese-Eindruck aus dem Figma-Code-Snippet war falsch — die arrow-Container im Figma-Source repräsentieren wahrscheinlich Hover-/Focus-Indikator oder einen alten Designstand, nicht den Default.

--navbar-height an die alten 72 px lassen und stattdessen Navbar-Padding reduzieren rejected

Würde den Logo-Spacing brechen — die md:py-4-Padding (16 px oben/unten) ist Brand-konform mit dem 209×79-Logo-Frame im Figma.

Consequences

Cherry-Pick-Kompatibilität zum Upstream-Byte-Theme bleibt hoch. Schema-Änderung am navbar.component.yml: keine. Twig-Markup-Änderung im navbar.twig: minimal. Wer Upstream-Updates mergt, hat ggf. Konflikte in navbar.tailwind.css, aber nicht im Schema.
Menü-Item-Refactor ist auf SOLCOM-Use-Case optimiert. Drupal-Sites, die das Byte-Theme als Basis nutzen aber SOLCOM-Brand nicht wollen, müssen menu--main.html.twig zurückrollen oder eigenen Override schreiben. Das ist OK, weil das Byte-Theme bereits forked ist (siehe ADR-0001).
Account-Menü- und Sprachschalter-Templates sind Drupal-spezifisch. block.language_block.language_interface braucht das language-Modul aktiviert und ≥2 konfigurierte Sprachen — bei nur einer Sprache rendert der Block leer. Aktuell ist nur de konfiguriert; en muss separat unter /admin/config/regional/language aktiviert werden.
Hauptmenü-Items im DB sind weiterhin Drupal-Default-Placeholders. Die SOLCOM-Brand-Items müssen unter /admin/structure/menu/manage/main eingepflegt werden — das ist Content, kein Code.
Canvas-Config-Update ist nicht versioniert. Page-Region-Edit und das Aktivieren von canvas.component.block.system_menu_block.account leben im Live-DB der Dev-Umgebung; für ein neues Setup müssten sie manuell im Page-Region-Editor nachgebaut werden.
--navbar-height-Token-Korrektur kann bestehende Hero-Konsumenten beeinflussen. Pages mit hero-billboard + overlap_navbar: true ziehen jetzt 104 px statt 72 px nach oben. Aktuell betrifft das nur die Homepage (Entity 7).
Pflicht-Verfahren bei SDC-Schema-Änderungen am Theme: cache:rebuild regeneriert SDC-Component-Definitionen und ändert deren active_version-Hashes. Canvas-Content-Entities, die mit der alten Version gespeichert sind, müssen via entity::save() neu materialisiert werden. Drupal\canvas\ComponentSource\ComponentSourceManager::generateComponents('sdc') ist die kanonische Eintrittsstelle.
Active-Trail-Underline ist Standard-Default, nicht final-Brand. Wenn das Designteam später eine echte „Active"-Visualisierung definiert, tauscht das einen @apply-Block in src/main.css. Templates bleiben unangetastet.
Brand-Pfeil-Wegfall im Main-Nav ist mit Test 1 explizit eingehalten. Wer den Pfeil später doch wieder will, muss den Test umdrehen.