TopNav.jsx 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. import React from "react";
  2. import Link from "next/link";
  3. import { Button } from "@/components/ui/button";
  4. import UserStatus from "@/components/app-shell/UserStatus";
  5. import LogoutButton from "@/components/auth/LogoutButton";
  6. import QuickNav from "@/components/app-shell/QuickNav";
  7. export default function TopNav() {
  8. return (
  9. <header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur">
  10. {/*
  11. TopNav alignment strategy (2xl+):
  12. - Use the same 40% center column as the AppShell content grid.
  13. - This keeps header content perfectly aligned with Explorer/Search.
  14. Below 2xl:
  15. - Full width for usability.
  16. */}
  17. <div className="px-4">
  18. <div className="mx-auto grid h-14 w-full items-center 2xl:grid-cols-[1fr_minmax(0,40%)_1fr]">
  19. <div className="flex items-center justify-between gap-3 2xl:col-start-2">
  20. <div className="flex items-center gap-3">
  21. <Link href="/" className="font-semibold tracking-tight">
  22. RHL Lieferscheine
  23. </Link>
  24. <span className="text-xs text-muted-foreground">
  25. Lieferschein-Explorer
  26. </span>
  27. </div>
  28. <div className="flex items-center gap-2">
  29. <UserStatus />
  30. <QuickNav />
  31. <Button
  32. variant="outline"
  33. size="sm"
  34. disabled
  35. aria-disabled="true"
  36. title="Design-Umschaltung kommt später"
  37. >
  38. Design
  39. </Button>
  40. <LogoutButton />
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </header>
  46. );
  47. }