dejanandClaude Opus 5
466c079644
Abwägung an der Quelle statt nach Gefühl. Das Zielsystem nutzt beide Muster, aber für verschiedene Aufgaben: - Innere Leiste (SidebarIconsLayout, 17 Aufrufstellen): Arbeitsbereiche mit Geschwisterseiten — Leads, Termine, HR, Einstellungen. - Reiter (Tabs): Abschnitte innerhalb EINER Seite — Formular-Editor, Chat-Dateien, Projekt-Teilbereiche, Übergabe-Dialog. Analytics mit fünf Analyse-Seiten ist der erste Fall, strukturell dasselbe wie Leads mit acht. Drei Gründe: 1. Kohärenz: dieselbe Bedienung an derselben Stelle wie in Leads. 2. Der Platzeinwand trägt nicht. Die Leiste ist eine 32 px schmale Icon-Spalte und klappt erst bei Zeigerkontakt oder Tastaturfokus auf 191 px aus, verzögert (300 ms auf, 350 ms zu), damit sie beim Überstreichen nicht aufspringt. Die Breite brauchen die Analyse-Seiten mit ihren fünfspaltigen Kennzahlenreihen. 3. Reiter sind dort der Rückfall, nicht die Wahl: SidebarIconsLayout zeigt unterhalb sm selbst eine Reiterleiste. Auf dem Schreibtisch Reiter zu nehmen hieße, die Handy-Notlösung zur Hauptform zu machen. Der Nachbau übernimmt diesen Rückfall mit. Nachgemessen: 32 px eingeklappt, 191 px bei Zeigerkontakt, aktiver Eintrag hervorgehoben, aria-current gesetzt. verify-layout weiterhin grün. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { PageHeader } from "./PageHeader";
|
|
import { AnalyticsInnerNav } from "./AnalyticsInnerNav";
|
|
import { AnalyticsToolbar } from "../filters/AnalyticsToolbar";
|
|
import { ANALYSE_SEITEN } from "./navigation";
|
|
import type { SeitenId } from "../../data/filtering";
|
|
import type { FilterOptionen } from "../../view-models/filter-optionen";
|
|
|
|
/**
|
|
* Rahmen des Analytics-Bereichs.
|
|
*
|
|
* „Analytics" ist in der Seitenleiste **ein** Menüpunkt. Die fünf Analyse-Seiten
|
|
* sind darin über Reiter erreichbar und tauchen nicht als Unterpunkte in der
|
|
* Navigation auf — sonst konkurrieren zwei Navigationsebenen um dieselbe Sache.
|
|
*
|
|
* Die Unter-Navigation ist eine **innere Leiste**, kein Reiterband: Das
|
|
* Zielsystem benutzt für Arbeitsbereiche mit Geschwisterseiten durchgängig
|
|
* `SidebarIconsLayout` (Leads, Termine, HR, Einstellungen). Reiter sind dort
|
|
* für Abschnitte *innerhalb einer Seite* reserviert — und sind zugleich der
|
|
* Rückfall der inneren Leiste auf schmalen Fenstern. Begründung ausführlich
|
|
* in docs/NAVIGATION.md.
|
|
*
|
|
* Kopfzeile und Filterleiste liegen hier und nicht in den Seiten: Sie sind für
|
|
* alle fünf gleich, und der Filterzustand gilt bereichsweit.
|
|
*/
|
|
export function AnalyticsShell({
|
|
aktiv,
|
|
optionen,
|
|
children,
|
|
}: {
|
|
aktiv: SeitenId;
|
|
optionen: FilterOptionen;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const seite = ANALYSE_SEITEN.find((s) => s.id === aktiv) ?? ANALYSE_SEITEN[0];
|
|
|
|
return (
|
|
<AnalyticsInnerNav aktiv={aktiv}>
|
|
<PageHeader titel={seite.label} beschreibung={seite.beschreibung} />
|
|
<AnalyticsToolbar seite={aktiv} optionen={optionen} />
|
|
{children}
|
|
</AnalyticsInnerNav>
|
|
);
|
|
}
|