dejanandClaude Opus 5
e85ceb6f9d
Der Prototyp hatte eine eigene Seitenleiste mit den fünf Analyse-Seiten als Menüpunkten. Die Software hat eine andere Navigation, in der Analytics noch gar nicht vorkommt. Beides zusammen ergab kein Bild davon, wo die Analyse später sitzt. Jetzt: - Die Seitenleiste spiegelt die von HiveGrid Cloud — dieselbe Komponente (SidebarWithSections aus der Cloud-Fassung portiert, inkl. der dortigen lokalen Fixes: Collapse-Breite, verdrahteter Toggle, Logo-Slot, Hover-Sweep), dieselben Gruppen, dieselbe Reihenfolge, dasselbe Logo. - 'Analytics' ist ein einzelner Menüpunkt, gleichrangig neben 'Dashboard'. - Die fünf Analyse-Seiten sind darin über Reiter erreichbar, nicht als Unterpunkte in der Navigation. Zwei Navigationsebenen für dieselbe Sache würden nur konkurrieren. Die Reiter folgen dem Hausmuster aus SettingsHubShell (Link um Tabs.Item), damit jeder Reiter eine echte Adresse hat und mittelklickbar bleibt. - Routen: /analytics, /analytics/finanzen, /auftraege, /kunden, /team. '/' leitet auf /analytics; das Dashboard liegt in der Software unter '/'. - Alle übrigen Einträge sind Kontext: Sie zeigen den Ort in der fertigen Anwendung und melden beim Klick, dass sie zur Software gehören. Kopfzeile und Filterleiste sind aus den fünf Seiten in die Analytics-Hülle gewandert — sie sind für alle gleich, und der Filterzustand gilt bereichsweit. Nebenbei: @radix-ui/react-slot war eine Phantom-Dependency (nur transitiv über @subframe/core vorhanden, vom portierten IconButton direkt importiert) und ist jetzt deklariert. verify-layout prüfte noch die alten Routen und lief damit auf 404-Seiten, die naturgemäß keine Kollisionen haben — Routen korrigiert und eine Absicherung ergänzt, die bei Statuscode >= 400 abbricht. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
67 lines
4.8 KiB
TypeScript
67 lines
4.8 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Logo — https://app.subframe.com/f023064a5ca0/library?component=Logo_609493cb-7054-4018-bcb4-26d43de9ef41
|
|
*/
|
|
|
|
import React from "react";
|
|
import * as SubframeUtils from "../../utils";
|
|
|
|
export interface LogoRootProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
size?: "8" | "16" | "24" | "28" | "32" | "64" | "128";
|
|
showIcon?: boolean;
|
|
hideText?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const LogoRoot = React.forwardRef<HTMLDivElement, LogoRootProps>(function LogoRoot(
|
|
{ size = "28", showIcon = false, hideText = false, className, ...otherProps }: LogoRootProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/609493cb flex w-fit items-center justify-center gap-3",
|
|
{
|
|
"gap-6": size === "128",
|
|
"gap-4": size === "64",
|
|
"gap-2": size === "32",
|
|
"gap-1": size === "16" || size === "8",
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<img
|
|
className={SubframeUtils.twClassNames("hidden h-7 flex-none object-contain", {
|
|
block: showIcon,
|
|
"h-32": size === "128",
|
|
"h-16": size === "64",
|
|
"h-8": size === "32",
|
|
"h-6": size === "24",
|
|
"h-4": size === "16",
|
|
"h-2": size === "8",
|
|
})}
|
|
src="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_302_142' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='96' height='84'%3E%3Cpath d='M0 0H96V83.12H0V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_302_142)'%3E%3Cpath d='M95.9449 41.52L83.9589 20.76L48.0009 41.52H71.9719L59.9869 62.281H36.0139L24.0279 41.52L36.0139 20.76H83.9589L74.3919 4.188L71.9719 0H24.0279L0.0549316 41.52L24.0279 83.042H71.9719L95.9449 41.52Z' fill='%23F1B729'/%3E%3C/g%3E%3C/svg%3E"
|
|
alt={hideText ? "HiveGrid" : ""}
|
|
/>
|
|
<img
|
|
className={SubframeUtils.twClassNames("h-7 flex-none object-contain", {
|
|
hidden: hideText,
|
|
"h-32": size === "128",
|
|
"h-16": size === "64",
|
|
"h-8": size === "32",
|
|
"h-6": size === "24",
|
|
"h-4": size === "16",
|
|
"h-2": size === "8",
|
|
})}
|
|
src="data:image/svg+xml,%3Csvg width='243' height='44' viewBox='3.4 3.6 243 44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_15_21' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='123' height='55'%3E%3Cpath d='M122.88 0H0V55H122.88V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_15_21)'%3E%3Cpath d='M3.48022 8.81384H11.1272V22.1967H28.3362V8.81384H35.9831V42.2736H28.3362V28.8803H11.1285V42.2736H3.48022V8.81384Z' fill='%23111111'/%3E%3Cpath d='M42.4373 8.81384H50.0842V42.2736H42.4373V8.81384Z' fill='%23111111'/%3E%3Cpath d='M53.9084 12.6387V8.81519H61.0803L71.1187 34.8656H71.5978L81.6336 8.81519H88.8054V12.6387L76.3755 42.2736H66.3371L53.9084 12.6387Z' fill='%23111111'/%3E%3C/g%3E%3Cmask id='mask1_15_21' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='154' y='0' width='93' height='55'%3E%3Cpath d='M246.806 0H154.907V55H246.806V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask1_15_21)'%3E%3Cpath d='M197.555 8.78772H205.202V42.2462H197.555V8.78772Z' fill='%23111111'/%3E%3Cpath d='M211.657 8.78772H236.274C238.663 8.78772 240.575 9.50438 242.01 10.939C243.443 12.3736 244.161 14.286 244.161 16.6749V34.3603C244.161 36.7505 243.444 38.6616 242.01 40.0962C240.575 41.5308 238.663 42.2475 236.274 42.2475H211.657V8.78772ZM233.405 35.5547C235.478 35.5547 236.513 34.5196 236.513 32.4492V18.5873C236.513 16.5143 235.476 15.4791 233.405 15.4791H219.304V35.5547H233.405Z' fill='%23111111'/%3E%3C/g%3E%3Cpath d='M185.126 29.819C186.306 29.5958 187.374 29.1976 188.33 28.6246C189.157 28.1155 189.907 27.3753 190.576 26.4028C191.245 25.429 191.58 24.0988 191.58 22.4109V16.675C191.58 14.2861 190.864 12.3737 189.429 10.9391C187.994 9.50581 186.082 8.78784 183.693 8.78784H159.554V10.5501L168.179 25.5047L159.554 40.4135V42.2463H167.201V28.8948L174.939 28.8791L185.365 42.2463H192.297V38.4228L185.126 29.819ZM183.933 20.4985C183.933 22.5688 182.79 22.1968 180.718 22.1968H167.203V15.478H180.825C182.898 15.478 183.933 16.5144 183.933 18.5861V20.4985Z' fill='%23111111'/%3E%3Cpath d='M118.412 35.5797H100.041V28.8791H114.548L112.566 25.442L114.444 22.1968H100.041V15.5041H118.314L121.075 10.7329V8.81396H92.3943V42.2737H121.075V40.1968L118.412 35.5797Z' fill='%23111111'/%3E%3Cpath d='M165.334 25.3873L159.062 14.5213L140.242 25.3873H152.788L146.516 36.2521H133.968L127.696 25.3873L133.968 14.5213H159.062L154.054 5.84824L152.788 3.65649H127.696L115.15 25.3873L127.696 47.1181H152.788L165.334 25.3873Z' fill='%23F1B729'/%3E%3C/svg%3E"
|
|
alt={showIcon ? "" : "HiveGrid"}
|
|
/>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export const Logo = LogoRoot;
|