fix: Planlar sekmesi erişilemiyordu (gizli taşma) + isim menüsündeki ölü bağlantılar ve uydurma '7 gün kalan' etiketi
This commit is contained in:
@@ -17,9 +17,14 @@ export const Header = () => {
|
||||
refreshLiveEKAPData,
|
||||
authUser,
|
||||
isAdmin,
|
||||
plan,
|
||||
handleLogout
|
||||
} = useApp();
|
||||
|
||||
// Plan rozeti gerçek /api/me/plan yanıtından gelir (uydurma "7 gün kalan" değil).
|
||||
const PLAN_ADLARI = { ucretsiz: 'Ücretsiz', pro: 'Pro', kurumsal: 'Kurumsal' };
|
||||
const planAdi = PLAN_ADLARI[plan?.plan] || 'Ücretsiz';
|
||||
|
||||
const [showNotifications, setShowNotifications] = useState(false);
|
||||
const [showUserMenu, setShowUserMenu] = useState(false);
|
||||
|
||||
@@ -184,15 +189,28 @@ export const Header = () => {
|
||||
<p className="text-xs text-slate-500 truncate">{authUser?.email || userProfile.company}</p>
|
||||
</div>
|
||||
<div className="py-1 text-xs">
|
||||
<a href="#profile" className="px-4 py-2 hover:bg-slate-50 flex items-center gap-2 text-slate-700">
|
||||
<button
|
||||
onClick={() => { setShowUserMenu(false); setActiveTab('list'); }}
|
||||
className="w-full text-left px-4 py-2 hover:bg-slate-50 flex items-center gap-2 text-slate-700"
|
||||
>
|
||||
<User className="w-4 h-4 text-slate-400" /> Firma Bilgileri & Üyeler
|
||||
</a>
|
||||
<a href="#trial" className="px-4 py-2 hover:bg-slate-50 flex items-center gap-2 text-slate-700">
|
||||
<Gift className="w-4 h-4 text-amber-500" /> Abonelik Planları (7 Gün Kalan)
|
||||
</a>
|
||||
<a href="#settings" className="px-4 py-2 hover:bg-slate-50 flex items-center gap-2 text-slate-700">
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setShowUserMenu(false); setActiveTab('planlar'); }}
|
||||
className="w-full text-left px-4 py-2 hover:bg-slate-50 flex items-center gap-2 text-slate-700"
|
||||
>
|
||||
<Gift className="w-4 h-4 text-amber-500" />
|
||||
<span>Abonelik & Planlar</span>
|
||||
<span className="ml-auto text-[10px] font-bold px-1.5 py-0.5 rounded-full bg-slate-100 text-slate-600 border border-slate-200">
|
||||
{planAdi}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setShowUserMenu(false); setActiveTab('pwa_settings'); }}
|
||||
className="w-full text-left px-4 py-2 hover:bg-slate-50 flex items-center gap-2 text-slate-700"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 text-slate-400" /> Bildirim Tercihleri
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<div className="border-t border-slate-100 pt-1 text-xs">
|
||||
<button
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import React, { useRef, useState, useEffect, useCallback } from 'react';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import { Newspaper, Trophy, CalendarDays, FileCheck2, Calculator, TrendingUp, LayoutGrid, Kanban, Radar, FolderKanban, BarChart3, Webhook, Smartphone, Cpu, ShieldAlert, Globe2, Gavel, CreditCard } from 'lucide-react';
|
||||
import { Newspaper, Trophy, CalendarDays, FileCheck2, Calculator, TrendingUp, LayoutGrid, Kanban, Radar, FolderKanban, BarChart3, Webhook, Smartphone, Cpu, ShieldAlert, Globe2, Gavel, CreditCard, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
export const TopNavigation = () => {
|
||||
const { activeTab, setActiveTab, isAdmin } = useApp();
|
||||
@@ -27,15 +27,74 @@ export const TopNavigation = () => {
|
||||
{ id: 'pwa_settings', label: 'Mobil PWA', icon: Smartphone }
|
||||
];
|
||||
|
||||
// 18 sekme çoğu ekrana sığmıyor. Kaydırma çubuğu gizli olduğu için sondaki
|
||||
// sekmeler (Planlar, API & Webhooks, Mobil PWA) görünmez kalıyordu; taşma
|
||||
// olduğunda ok düğmeleri gösterilir ve etkin sekme görünür alana kaydırılır.
|
||||
const seritRef = useRef(null);
|
||||
const [tasma, setTasma] = useState({ sol: false, sag: false });
|
||||
|
||||
const tasmaHesapla = useCallback(() => {
|
||||
const el = seritRef.current;
|
||||
if (!el) return;
|
||||
setTasma({
|
||||
sol: el.scrollLeft > 4,
|
||||
sag: el.scrollLeft + el.clientWidth < el.scrollWidth - 4,
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
tasmaHesapla();
|
||||
const el = seritRef.current;
|
||||
if (!el) return;
|
||||
el.addEventListener('scroll', tasmaHesapla, { passive: true });
|
||||
window.addEventListener('resize', tasmaHesapla);
|
||||
return () => {
|
||||
el.removeEventListener('scroll', tasmaHesapla);
|
||||
window.removeEventListener('resize', tasmaHesapla);
|
||||
};
|
||||
}, [tasmaHesapla]);
|
||||
|
||||
// Etkin sekme (ör. menüden 'Planlar' seçilince) görünür alana getirilir.
|
||||
useEffect(() => {
|
||||
const el = seritRef.current?.querySelector(`[data-tab="${activeTab}"]`);
|
||||
el?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
|
||||
}, [activeTab]);
|
||||
|
||||
const kaydir = (yon) => {
|
||||
seritRef.current?.scrollBy({ left: yon * 280, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white border-b border-slate-200 shadow-xs sticky top-16 z-30">
|
||||
<div className="max-w-[1600px] mx-auto px-4 flex items-center gap-1 overflow-x-auto py-1 scrollbar-none">
|
||||
<div className="max-w-[1600px] mx-auto px-4 relative">
|
||||
{tasma.sol && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => kaydir(-1)}
|
||||
aria-label="Önceki sekmeler"
|
||||
className="absolute left-1 top-1/2 -translate-y-1/2 z-10 w-7 h-7 rounded-full bg-white border border-slate-200 shadow-md flex items-center justify-center text-slate-600 hover:text-slate-900 hover:bg-slate-50"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
{tasma.sag && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => kaydir(1)}
|
||||
aria-label="Sonraki sekmeler"
|
||||
className="absolute right-1 top-1/2 -translate-y-1/2 z-10 w-7 h-7 rounded-full bg-white border border-slate-200 shadow-md flex items-center justify-center text-slate-600 hover:text-slate-900 hover:bg-slate-50"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
<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 isActive = activeTab === item.id;
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
data-tab={item.id}
|
||||
onClick={() => setActiveTab(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 ${
|
||||
isActive
|
||||
@@ -55,5 +114,6 @@ export const TopNavigation = () => {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user