fix(web): consistent SiteHeader across all public pages
Blog and contact (and about/pricing/legal) pages rendered a stripped-down header (logo + auth buttons only) with no nav — the site nav "disappeared". Extracted the landing header into a shared <SiteHeader> (logo, nav, theme toggle, auth-aware actions, mobile menu) used on every public page for consistent UX. - new components/site-header.tsx (nav links work from any route via /#…) - landing nav gains Blog + İletişim so all pages share the same 5-link nav - about, contact, pricing, blog, blog/$slug, kvkk, privacy, terms → SiteHeader - demo keeps its purpose-built demo header (sticky + theme + CTA) typecheck + biome clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { usePageMeta } from "@/hooks/use-page-meta";
|
||||
import { SiteHeader } from "@/components/site-header";
|
||||
import { Button } from "@sase/ui";
|
||||
import { Link, createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
@@ -16,21 +17,7 @@ function AboutPage() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<header className="border-b">
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
||||
<Link to="/" className="text-xl font-bold tracking-wider">
|
||||
SASE
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/login">
|
||||
<Button variant="ghost">Giriş Yap</Button>
|
||||
</Link>
|
||||
<Link to="/register">
|
||||
<Button>Kayıt Ol</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<SiteHeader />
|
||||
|
||||
<main className="container mx-auto max-w-3xl px-4 py-16">
|
||||
<h1 className="text-4xl font-bold">Hakkımızda</h1>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { usePageMeta } from "@/hooks/use-page-meta";
|
||||
import { SiteHeader } from "@/components/site-header";
|
||||
import { useBlogPosts } from "@/hooks/use-blog";
|
||||
import { Button } from "@sase/ui";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@sase/ui";
|
||||
@@ -68,21 +69,7 @@ function BlogPage() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<header className="border-b">
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
||||
<Link to="/" className="text-xl font-bold tracking-wider">
|
||||
SASE
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/login">
|
||||
<Button variant="ghost">Giriş Yap</Button>
|
||||
</Link>
|
||||
<Link to="/register">
|
||||
<Button>Kayıt Ol</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<SiteHeader />
|
||||
|
||||
<main className="container mx-auto max-w-4xl px-4 py-16">
|
||||
<h1 className="text-4xl font-bold">Blog</h1>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { usePageMeta } from "@/hooks/use-page-meta";
|
||||
import { SiteHeader } from "@/components/site-header";
|
||||
import { useBlogPost } from "@/hooks/use-blog";
|
||||
import { Button } from "@sase/ui";
|
||||
import { Link, createFileRoute } from "@tanstack/react-router";
|
||||
@@ -412,21 +413,7 @@ function BlogPostPage() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<header className="border-b">
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
||||
<Link to="/" className="text-xl font-bold tracking-wider">
|
||||
SASE
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/login">
|
||||
<Button variant="ghost">Giriş Yap</Button>
|
||||
</Link>
|
||||
<Link to="/register">
|
||||
<Button>Kayıt Ol</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<SiteHeader />
|
||||
|
||||
<main className="container mx-auto max-w-3xl px-4 py-16">
|
||||
{/* Breadcrumb */}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { usePageMeta } from "@/hooks/use-page-meta";
|
||||
import { SiteHeader } from "@/components/site-header";
|
||||
import { Button } from "@sase/ui";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@sase/ui";
|
||||
import { Link, createFileRoute } from "@tanstack/react-router";
|
||||
@@ -16,21 +17,7 @@ function ContactPage() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<header className="border-b">
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
||||
<Link to="/" className="text-xl font-bold tracking-wider">
|
||||
SASE
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/login">
|
||||
<Button variant="ghost">Giriş Yap</Button>
|
||||
</Link>
|
||||
<Link to="/register">
|
||||
<Button>Kayıt Ol</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<SiteHeader />
|
||||
|
||||
<main className="container mx-auto max-w-3xl px-4 py-16">
|
||||
<h1 className="text-4xl font-bold">İletişim</h1>
|
||||
|
||||
@@ -639,6 +639,12 @@ export function HomePage() {
|
||||
<Link to="/pricing" className="transition hover:text-foreground">
|
||||
Fiyatlar
|
||||
</Link>
|
||||
<Link to="/blog" className="transition hover:text-foreground">
|
||||
Blog
|
||||
</Link>
|
||||
<Link to="/contact" className="transition hover:text-foreground">
|
||||
İletişim
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="hidden items-center gap-3 md:flex">
|
||||
@@ -726,6 +732,20 @@ export function HomePage() {
|
||||
>
|
||||
Fiyatlar
|
||||
</Link>
|
||||
<Link
|
||||
to="/blog"
|
||||
className="transition hover:text-foreground"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
Blog
|
||||
</Link>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="transition hover:text-foreground"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
İletişim
|
||||
</Link>
|
||||
<Separator className="bg-border" />
|
||||
{isAuthenticated ? (
|
||||
<Link to="/dashboard/search" onClick={() => setMobileMenuOpen(false)}>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Button } from "@sase/ui";
|
||||
import { SiteHeader } from "@/components/site-header";
|
||||
import { Link, createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/kvkk")({
|
||||
@@ -8,21 +9,7 @@ export const Route = createFileRoute("/kvkk")({
|
||||
function KvkkPage() {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<header className="border-b">
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
||||
<Link to="/" className="text-xl font-bold tracking-wider">
|
||||
SASE
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/login">
|
||||
<Button variant="ghost">Giriş Yap</Button>
|
||||
</Link>
|
||||
<Link to="/register">
|
||||
<Button>Kayıt Ol</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<SiteHeader />
|
||||
|
||||
<main className="container mx-auto max-w-3xl px-4 py-16">
|
||||
<h1 className="text-4xl font-bold">KVKK Aydınlatma Metni</h1>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { usePageMeta } from "@/hooks/use-page-meta";
|
||||
import { SiteHeader } from "@/components/site-header";
|
||||
import { useTranslation } from "@/lib/i18n";
|
||||
import { FULL_PLAN_BRAND_LIMIT, formatTRY } from "@sase/shared";
|
||||
import { Button } from "@sase/ui";
|
||||
@@ -61,21 +62,7 @@ function PricingPage() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<header className="border-b">
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
||||
<Link to="/" className="text-xl font-bold tracking-wider">
|
||||
SASE
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/login">
|
||||
<Button variant="ghost">{t("common.login")}</Button>
|
||||
</Link>
|
||||
<Link to="/register">
|
||||
<Button>{t("common.register")}</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<SiteHeader />
|
||||
|
||||
<main id="main-content" className="container mx-auto px-4 py-24">
|
||||
<div className="text-center">
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Button } from "@sase/ui";
|
||||
import { SiteHeader } from "@/components/site-header";
|
||||
import { Link, createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/privacy")({
|
||||
@@ -8,21 +9,7 @@ export const Route = createFileRoute("/privacy")({
|
||||
function PrivacyPage() {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<header className="border-b">
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
||||
<Link to="/" className="text-xl font-bold tracking-wider">
|
||||
SASE
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/login">
|
||||
<Button variant="ghost">Giriş Yap</Button>
|
||||
</Link>
|
||||
<Link to="/register">
|
||||
<Button>Kayıt Ol</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<SiteHeader />
|
||||
|
||||
<main className="container mx-auto max-w-3xl px-4 py-16">
|
||||
<h1 className="text-4xl font-bold">Gizlilik Politikası</h1>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Button } from "@sase/ui";
|
||||
import { SiteHeader } from "@/components/site-header";
|
||||
import { Link, createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/terms")({
|
||||
@@ -8,21 +9,7 @@ export const Route = createFileRoute("/terms")({
|
||||
function TermsPage() {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<header className="border-b">
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
||||
<Link to="/" className="text-xl font-bold tracking-wider">
|
||||
SASE
|
||||
</Link>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/login">
|
||||
<Button variant="ghost">Giriş Yap</Button>
|
||||
</Link>
|
||||
<Link to="/register">
|
||||
<Button>Kayıt Ol</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<SiteHeader />
|
||||
|
||||
<main className="container mx-auto max-w-3xl px-4 py-16">
|
||||
<h1 className="text-4xl font-bold">Kullanım Koşulları</h1>
|
||||
|
||||
Reference in New Issue
Block a user