98 lines
4.1 KiB
TypeScript
98 lines
4.1 KiB
TypeScript
"use client";
|
||
|
||
import React from 'react';
|
||
import { motion } from 'framer-motion';
|
||
import Link from 'next/link';
|
||
import { usePathname, useRouter } from 'next/navigation';
|
||
|
||
export default function AdminLayout({ children }: { children: React.ReactNode }) {
|
||
const pathname = usePathname();
|
||
const router = useRouter();
|
||
|
||
if (pathname === '/admin/login') {
|
||
return <>{children}</>;
|
||
}
|
||
|
||
const handleLogout = async () => {
|
||
document.cookie = "admin_session=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
|
||
router.push('/admin/login');
|
||
router.refresh();
|
||
};
|
||
|
||
const navItems = [
|
||
{ name: 'Projeler', href: '/admin/projects' },
|
||
];
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#050505] text-white flex font-sans selection:bg-cyan-500/30">
|
||
{/* Sidebar */}
|
||
<motion.aside
|
||
initial={{ x: -100, opacity: 0 }}
|
||
animate={{ x: 0, opacity: 1 }}
|
||
className="w-64 border-r border-white/10 bg-black/40 backdrop-blur-xl p-6 flex flex-col gap-8 sticky top-0 h-screen z-20"
|
||
>
|
||
<div className="flex items-center gap-3 px-2">
|
||
<div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-cyan-500 to-blue-600 shadow-lg shadow-cyan-500/20 flex items-center justify-center font-bold text-lg">A</div>
|
||
<span className="text-xl font-bold tracking-tight">AYCANUR <span className="text-cyan-400 text-[10px] font-mono ml-1 uppercase">Admin</span></span>
|
||
</div>
|
||
|
||
<nav className="flex flex-col gap-1">
|
||
{navItems.map((item) => {
|
||
const isActive = pathname === item.href;
|
||
return (
|
||
<Link
|
||
key={item.href}
|
||
href={item.href}
|
||
className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group
|
||
${isActive
|
||
? 'bg-gradient-to-r from-cyan-500/10 to-transparent text-cyan-400 border-l-2 border-cyan-500'
|
||
: 'text-gray-400 hover:text-white hover:bg-white/5'}`}
|
||
>
|
||
<div className={`w-1.5 h-1.5 rounded-full transition-all duration-300
|
||
${isActive ? 'bg-cyan-400 scale-110 shadow-[0_0_8px_rgba(34,211,238,0.8)]' : 'bg-transparent'}`}
|
||
/>
|
||
<span className="font-medium">{item.name}</span>
|
||
</Link>
|
||
);
|
||
})}
|
||
|
||
<button
|
||
onClick={handleLogout}
|
||
className="flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 text-gray-500 hover:text-rose-400 hover:bg-rose-500/5 mt-4 group"
|
||
>
|
||
<div className="w-1.5 h-1.5 rounded-full bg-transparent group-hover:bg-rose-400" />
|
||
<span className="font-medium">Çıkış Yap</span>
|
||
</button>
|
||
</nav>
|
||
|
||
<div className="mt-auto bg-gradient-to-br from-white/5 to-transparent p-4 rounded-2xl border border-white/5">
|
||
<p className="text-[10px] text-gray-500 mb-2 font-mono uppercase tracking-widest">Sistem Durumu</p>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
||
<p className="text-xs text-emerald-400">Tüm sistemler aktif</p>
|
||
</div>
|
||
</div>
|
||
</motion.aside>
|
||
|
||
{/* Main Content Area */}
|
||
<div className="flex-1 relative">
|
||
<div className="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden -z-10">
|
||
<div className="absolute top-[-10%] right-[-5%] w-[40%] h-[40%] bg-cyan-500/10 rounded-full blur-[120px]" />
|
||
<div className="absolute bottom-[-10%] left-[-5%] w-[30%] h-[30%] bg-purple-500/10 rounded-full blur-[120px]" />
|
||
</div>
|
||
|
||
<main className="min-h-screen p-8 overflow-y-auto">
|
||
{children}
|
||
</main>
|
||
</div>
|
||
|
||
<style jsx global>{`
|
||
::-webkit-scrollbar { width: 6px; }
|
||
::-webkit-scrollbar-track { background: transparent; }
|
||
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
|
||
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
|
||
`}</style>
|
||
</div>
|
||
);
|
||
}
|