Package Exports

@startnext/chrome
@startnext/chrome/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@startnext/chrome) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@startnext/chrome

Startnext Header/Footer Web Components

Wiederverwendbare Header- und Footer-Components für alle Startnext Microservices.

Installation

npm install @startnext/chrome
# or
pnpm add @startnext/chrome

Quick Start

Modern JavaScript (React, Vue, etc.)

import '@startnext/chrome';

<startnext-header></startnext-header>
<startnext-footer></startnext-footer>

Via CDN (PHP, Vanilla HTML)

<script type="module" src="https://unpkg.com/@startnext/chrome@latest/dist/index.js"></script>

<startnext-header></startnext-header>
<startnext-footer></startnext-footer>

API

`<startnext-header>`

Attributes:

Attribute	Type	Default	Description
`api-url`	`string`	-	URL des SCS API (z. B. `https://scs-api.vercel.app` oder relativ `/scs-api`). Ohne Attribut: statische Default-Daten
`lang`	`string`	`'de'`	Aktive Sprache (beliebiger 2-Buchstaben-Code, z. B. `'de'`, `'en'`, `'fr'`)
`languages`	`string`	-	Kommagetrennte Liste von Sprachcodes, auf die der Language-Switcher eingeschränkt wird, z. B. `'de,en'`. Ohne Attribut: alle vom API gelieferten Sprachen. Der Switcher wird automatisch ausgeblendet, wenn nach dem Filtern nur noch 1 Sprache übrig bleibt
`light`	`boolean`	`false`	Heller Header: weiße Schrift/Icons (unabhängig von `color-mode`, z. B. über einem dunklen Hero-Bild)
`large-animation`	`boolean`	`false`	Große Lottie-Logo-Animation mit Claim und horizontaler Navigation (z. B. für die Startseite). Erfordert `api-url`
`authenticated`	`boolean`	`false`	Zeigt User-Avatar statt "Anmelden" Button
`user-name`	`string`	-	Name des eingeloggten Users
`user-avatar`	`string`	-	Avatar-URL des Users
`color-mode`	`'light' \| 'dark'`	auto	Seitenweiter Farbmodus. Setzt/liest `<html class="dark/light">`. Ohne Attribut: Header scannt `<html>` beim Mount. Der Toggle-Button im Header wechselt `<html>`-Klasse und emittet `color-mode-change`
`hide-color-mode`	`boolean`	`false`	Versteckt den Color-Mode Toggle-Button
`hide-lang`	`boolean`	`false`	Versteckt den Language-Switcher komplett
`hide-login`	`boolean`	`false`	Versteckt den "Anmelden" Button (auch wenn nicht eingeloggt)
`hide-cta`	`boolean`	`false`	Versteckt den CTA-Button ("Projekt starten")
`show-back-link`	`boolean`	`false`	Zeigt den aus der API gelieferten "Zurück"-Link links neben dem Logo. Nur sichtbar wenn in Notion konfiguriert

Events:

Event	Detail	Description
`burger-menu-toggle`	`{ open: boolean }`	Burger-Menü geöffnet/geschlossen
`user-menu-toggle`	`{ open: boolean }`	User-Menü geöffnet/geschlossen
`navigation-click`	`{ item: NavigationItem }`	Navigation-Link geklickt
`cta-click`	`{ url: string }`	"Projekt starten" Button geklickt
`logout`	`{}`	Abmelden geklickt
`language-change`	`{ language: string }`	Sprache gewechselt
`scroll-state-change`	`{ scrolled: boolean, slideUp: boolean }`	Scroll-Zustand geändert
`color-mode-change`	`{ mode: 'light' \| 'dark' }`	Farbmodus gewechselt (per Toggle-Button)

Usage Examples:

<!-- Default: dunkler Header (dunkle Schrift für helle Seiten) -->
<startnext-header></startnext-header>

<!-- Mit Live-Daten vom SCS API -->
<startnext-header api-url="https://scs-api.vercel.app" lang="de"></startnext-header>

<!-- Sprachauswahl auf DE und EN einschränken -->
<startnext-header api-url="/scs-api" lang="de" languages="de,en"></startnext-header>

<!-- Heller Header (weiße Schrift über dunklem Hero) -->
<startnext-header light></startnext-header>

<!-- Heller Header + große Animation (z.B. Startseite) -->
<startnext-header api-url="/scs-api" light large-animation></startnext-header>

<!-- Heller Header + groß + eingeloggt -->
<startnext-header
  api-url="/scs-api"
  light
  large-animation
  authenticated
  user-name="Elias Groesel"
  user-avatar="https://..."
></startnext-header>

<!-- Zurück-Link anzeigen (aus Notion/API, z.B. auf Unterseiten) -->
<startnext-header api-url="/scs-api" show-back-link></startnext-header>

<!-- Nur DE, kein Login, kein CTA -->
<startnext-header languages="de" hide-login hide-cta></startnext-header>

<!-- light und color-mode sind unabhängig voneinander -->

<!-- Heller Header über dunklem Hero, Seite selbst im Light Mode -->
<html class="light">
  <startnext-header light large-animation></startnext-header>
</html>

<!-- Seite im Dark Mode (html.dark), Header ebenfalls hell -->
<html class="dark">
  <startnext-header color-mode="dark" light large-animation></startnext-header>
</html>

<!-- Seite im Dark Mode, Header dunkel (z.B. nach dem Scrollen) -->
<!-- light wird nicht gesetzt → Header zeigt dunkle Schrift -->
<html class="dark">
  <startnext-header color-mode="dark"></startnext-header>
</html>

const header = document.querySelector('startnext-header');

header.addEventListener('navigation-click', (e) => {
  console.log(e.detail.item);
  // e.preventDefault() to handle navigation yourself
});

header.addEventListener('language-change', (e) => {
  // Sprache auch im Footer synchronisieren
  document.querySelector('startnext-footer').setAttribute('lang', e.detail.language);
});

header.addEventListener('logout', () => {
  // Handle logout
});

header.addEventListener('color-mode-change', (e) => {
  console.log(`Color mode: ${e.detail.mode}`); // 'light' | 'dark'
  // <html>-Klasse wird automatisch vom Header gesetzt
});

`<startnext-footer>`

Attributes:

Attribute	Type	Default	Description
`lang`	`string`	`'de'`	Aktive Sprache (beliebiger 2-Buchstaben-Code)
`api-url`	`string`	-	URL des SCS API. Ohne Attribut: statische Default-Daten
`lang-sync`	`boolean`	`true`	Synchronisiert `lang` automatisch beim `language-change`-Event des Headers. Mit `lang-sync="false"` deaktivieren

Events:

Event	Detail	Description
`navigation-click`	`{ item: { url, label } }`	Footer-Link geklickt

Theming

Override CSS Custom Properties:

startnext-header {
  --primary-color: #0066FF;
  --btn-primary-bg: #0066FF;
  --header-bg-scrolled: #FAFAFA;
}

startnext-footer {
  --footer-bg: #111111;
  --footer-link-hover: #0066FF;
}

Fonts

Standardmäßig nutzen die Components System-Fonts als Fallback. Für eigene Schriftarten @font-face im eigenen CSS deklarieren und --font-family setzen:

@font-face {
  font-family: "PFDin";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/PFDin-subset.woff2") format("woff2");
}

startnext-header, startnext-footer {
  --font-family: "PFDin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Browser Support

Chrome/Edge 90+
Firefox 88+
Safari 14+

Development

# Install deps (from monorepo root)
pnpm install

# Dev mode (watch)
pnpm --filter @startnext/chrome dev

# Build
pnpm --filter @startnext/chrome build

# Lint
pnpm --filter @startnext/chrome lint

Demo-Seite öffnen: packages/scs-web-component/demo/index.html

Architecture

Jede Component ist modular in drei Dateien aufgeteilt:

src/
├── components/
│   ├── base/
│   │   ├── BaseComponent.ts    # Abstrakte Basis (Shadow DOM, Events, Theming)
│   │   ├── icons.ts            # SVG-Icon-Registry
│   │   └── styles.ts           # Shared Reset-CSS
│   ├── header/
│   │   ├── StartnextHeader.ts  # Logik (Scroll, Drawers, Lottie, Events)
│   │   ├── header.css.ts       # CSS als Template-Literal-Export
│   │   └── header.template.ts  # Render-Funktionen (HTML-Strings)
│   └── footer/
│       ├── StartnextFooter.ts  # Logik (Render, Events)
│       ├── footer.css.ts       # CSS als Template-Literal-Export
│       └── footer.template.ts  # Render-Funktion (HTML-String)
├── data/
│   ├── defaults.ts             # Statische Default-Daten (ohne API)
│   └── uiStrings.ts            # ARIA-Labels / UI-Strings (de/en)
├── types/
│   └── index.ts                # Alle TypeScript-Interfaces
└── index.ts                    # Barrel-Export

Konventionen:

CSS in *.css.ts als exportierter Template-Literal-String (kein extra Build-Plugin nötig)
Templates in *.template.ts als reine Funktionen die HTML-Strings zurückgeben
Logik in der Hauptdatei: Event-Handling, State, Lifecycle
BEM-Naming für CSS-Klassen (headbar__left, drawer__item--highlighted)
Shadow DOM (open mode), kein Virtual DOM

Monorepo Structure

packages/
  scs-web-component/   ← this package
  scs-api/             ← Express API service