hikmettan/ihaleist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sekme şeridi: 19 sekmeye kendi rengi (ikon tonu + aktif dolgu) — menü daha belirgin

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
hikmettan
2026-09-05 08:32:03 +03:00
co-authored by Claude Fable 5.1
parent 6f33adc1b6
commit 6d7d938711
1 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TopNavigation.jsx
+31 -5
View File
@@ -2,6 +2,31 @@ import React, { useRef, useState, useEffect, useCallback, useTransition } from '
import { useApp } from '../context/AppContext';
import { Newspaper, Trophy, CalendarDays, FileCheck2, Calculator, TrendingUp, LayoutGrid, Kanban, Radar, FolderKanban, BarChart3, Webhook, Smartphone, Cpu, ShieldAlert, Globe2, Gavel, CreditCard, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
// Her sekmenin kendi rengi — pasifken ikon tonu, aktifken dolgu. Tailwind JIT
// için sınıf adları tam yazılıdır.
const RENK = {
list: { ikon: 'text-sky-600', aktif: 'border-sky-300 bg-sky-100 text-sky-900', hover: 'hover:bg-sky-50' },
bulten: { ikon: 'text-amber-600', aktif: 'border-amber-300 bg-amber-100 text-amber-900', hover: 'hover:bg-amber-50' },
sonuc: { ikon: 'text-lime-600', aktif: 'border-lime-300 bg-lime-100 text-lime-900', hover: 'hover:bg-lime-50' },
takvim: { ikon: 'text-rose-600', aktif: 'border-rose-300 bg-rose-100 text-rose-900', hover: 'hover:bg-rose-50' },
sozlesme: { ikon: 'text-emerald-600', aktif: 'border-emerald-300 bg-emerald-100 text-emerald-900', hover: 'hover:bg-emerald-50' },
kdv: { ikon: 'text-teal-600', aktif: 'border-teal-300 bg-teal-100 text-teal-900', hover: 'hover:bg-teal-50' },
sinir: { ikon: 'text-orange-600', aktif: 'border-orange-300 bg-orange-100 text-orange-900', hover: 'hover:bg-orange-50' },
fiyat: { ikon: 'text-green-600', aktif: 'border-green-300 bg-green-100 text-green-900', hover: 'hover:bg-green-50' },
kanban: { ikon: 'text-violet-600', aktif: 'border-violet-300 bg-violet-100 text-violet-900', hover: 'hover:bg-violet-50' },
rakip_radar: { ikon: 'text-red-600', aktif: 'border-red-300 bg-red-100 text-red-900', hover: 'hover:bg-red-50' },
dokuman_deposu: { ikon: 'text-indigo-600', aktif: 'border-indigo-300 bg-indigo-100 text-indigo-900', hover: 'hover:bg-indigo-50' },
analitik_dashboard: { ikon: 'text-cyan-600', aktif: 'border-cyan-300 bg-cyan-100 text-cyan-900', hover: 'hover:bg-cyan-50' },
kirmizi_bayrak: { ikon: 'text-rose-700', aktif: 'border-rose-400 bg-rose-100 text-rose-900', hover: 'hover:bg-rose-50' },
kik_kararlari: { ikon: 'text-stone-600', aktif: 'border-stone-400 bg-stone-200 text-stone-900', hover: 'hover:bg-stone-100' },
ted_eu: { ikon: 'text-blue-600', aktif: 'border-blue-300 bg-blue-100 text-blue-900', hover: 'hover:bg-blue-50' },
planlar: { ikon: 'text-pink-600', aktif: 'border-pink-300 bg-pink-100 text-pink-900', hover: 'hover:bg-pink-50' },
api_webhooks: { ikon: 'text-slate-600', aktif: 'border-slate-400 bg-slate-200 text-slate-900', hover: 'hover:bg-slate-100' },
ai_ayarlari: { ikon: 'text-purple-600', aktif: 'border-purple-300 bg-purple-100 text-purple-900', hover: 'hover:bg-purple-50' },
pwa_settings: { ikon: 'text-fuchsia-600', aktif: 'border-fuchsia-300 bg-fuchsia-100 text-fuchsia-900', hover: 'hover:bg-fuchsia-50' },
};
const RENK_VARSAYILAN = { ikon: 'text-slate-500', aktif: 'border-blue-200 bg-blue-50 text-blue-700', hover: 'hover:bg-slate-50' };
export const TopNavigation = () => {
const { activeTab, setActiveTab, isAdmin } = useApp();
@@ -104,6 +129,7 @@ export const TopNavigation = () => {
<div ref={seritRef} className="flex items-center gap-1 overflow-x-auto py-1 scrollbar-none scroll-smooth">
{navItems.map(item => {
const Icon = item.icon;
const renk = RENK[item.id] || RENK_VARSAYILAN;
const isActive = bekleyen ? bekleyen === item.id : activeTab === item.id;
const yukleniyor = bekleyen === item.id;
return (
@@ -112,15 +138,15 @@ export const TopNavigation = () => {
data-tab={item.id}
aria-busy={yukleniyor || undefined}
onClick={() => sekmeSec(item.id)}
className={`flex items-center gap-2 px-3.5 py-2 rounded-lg text-xs font-semibold whitespace-nowrap transition-all select-none ${
className={`flex items-center gap-2 px-3.5 py-2 rounded-lg border text-xs font-semibold whitespace-nowrap transition-all select-none ${
isActive
? 'bg-blue-50 text-blue-700 border border-blue-200 shadow-2xs'
: 'text-slate-600 hover:text-slate-900 hover:bg-slate-50'
? `${renk.aktif} shadow-2xs`
: `border-transparent text-slate-700 hover:text-slate-900 ${renk.hover}`
}`}
>
{yukleniyor
? <Loader2 className="w-4 h-4 text-blue-600 animate-spin" />
: <Icon className={`w-4 h-4 ${isActive ? 'text-blue-600' : 'text-slate-400'}`} />}
? <Loader2 className={`w-4 h-4 animate-spin ${renk.ikon}`} />
: <Icon className={`w-4 h-4 ${renk.ikon}`} />}
<span>{item.label}</span>
{item.badge && (
<span className="bg-amber-100 text-amber-800 font-bold text-[10px] px-1.5 py-0.5 rounded-full border border-amber-200">