k.karaer/personel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobil uyumu

Browse Source
This commit is contained in:
Kenan KARAER
2026-03-18 15:42:02 +03:00
parent 0bbfa2f636
commit a50fd188df
9 changed files with 178 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Sidebar.tsx
+32 -30
View File
@@ -1,6 +1,6 @@
'use client'
import { useState } from 'react'
import { useState, useEffect } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { usePathname } from 'next/navigation'
@@ -27,67 +27,61 @@ export function Sidebar() {
const pathname = usePathname()
const [sidebarOpen, setSidebarOpen] = useState(false)
// Listen for mobile menu open event from Header
useEffect(() => {
const handleOpen = () => setSidebarOpen(true);
window.addEventListener('open-mobile-menu', handleOpen);
return () => window.removeEventListener('open-mobile-menu', handleOpen);
}, []);
return (
<>
{/* Mobile sidebar trigger */}
<div className="lg:hidden fixed top-0 left-0 w-full h-16 bg-white dark:bg-zinc-900 border-b border-slate-200 dark:border-zinc-800 flex items-center px-4 z-40">
<button
className="p-2 text-slate-500 hover:text-slate-900 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 rounded-lg"
onClick={() => setSidebarOpen(true)}
>
<span className="sr-only">Menüyü Aç</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</button>
<div className="ml-4 flex items-center gap-3 group">
<Image src="/logo.png" alt="Abisena Logo" width={120} height={40} className="h-8 w-auto object-contain" />
<div className="h-4 w-px bg-gray-300 dark:bg-zinc-700 mx-1" />
<span className="text-[10px] font-bold text-gray-500 dark:text-zinc-400 uppercase tracking-tighter leading-tight">Personel<br/>Sistemi</span>
</div>
</div>
{/* Drawer logic is below, Mobile Header is now in Header.tsx */}
{/* Mobile Sidebar Overlay */}
{/* Mobile Sidebar Overlay (Drawer) */}
{sidebarOpen && (
<div className="relative z-50 lg:hidden" aria-modal="true">
<div className="fixed inset-0 bg-gray-900/80 transition-opacity" onClick={() => setSidebarOpen(false)} />
<div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" onClick={() => setSidebarOpen(false)} />
<div className="fixed inset-0 flex">
<div className="relative mr-16 flex w-full max-w-xs flex-1 transform transition duration-300 ease-in-out">
<div className="absolute left-full top-0 flex w-16 justify-center pt-5">
<div className="relative flex w-full max-w-xs flex-1 transform transition duration-300 ease-in-out">
<div className="absolute right-0 top-0 -mr-12 pt-4">
<button
type="button"
className="-m-2.5 p-2.5"
className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
onClick={() => setSidebarOpen(false)}
>
<span className="sr-only">Menüyü Kapat</span>
<XMarkIcon className="h-6 w-6 text-white" aria-hidden="true" />
</button>
</div>
{/* Mobile Sidebar Content */}
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-[#173363] px-6 pb-4 shadow-xl">
<div className="flex h-20 shrink-0 items-center border-b border-gray-100 dark:border-zinc-900">
{/* Mobile Sidebar Content - Reusing Desktop Style */}
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-[#173363] px-6 pb-4 shadow-2xl">
<div className="flex h-24 shrink-0 items-center mt-4 border-b border-white/10">
<div className="flex flex-col gap-1">
<Image src="/logo.png" alt="Abisena Logo" width={140} height={45} className="h-10 w-auto object-contain" />
<span className="text-[10px] font-bold text-gray-400 dark:text-zinc-500 uppercase tracking-[0.2em] ml-1">TAKİP SİSTEMİ</span>
<span className="text-[9px] font-black text-slate-400 tracking-[0.3em] uppercase ml-1">Personel Takip Sistemi</span>
</div>
</div>
<nav className="flex flex-1 flex-col">
<ul role="list" className="flex flex-1 flex-col gap-y-7">
<li>
<ul role="list" className="-mx-2 space-y-1">
<ul role="list" className="-mx-2 space-y-2">
{navigation.map((item) => (
<li key={item.name}>
<Link
href={item.href}
onClick={() => setSidebarOpen(false)}
className={`
group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold
group flex items-center gap-x-3 rounded-xl p-3 text-sm leading-6 font-semibold transition-all
${pathname === item.href
? 'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400'
: 'text-slate-600 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-slate-50 dark:hover:bg-zinc-800/50'
? 'bg-[#CE0515] text-white'
: 'text-slate-300 hover:text-white hover:bg-white/5'
}
`}
>
<item.icon
className={`h-6 w-6 shrink-0 ${pathname === item.href ? 'text-indigo-600 dark:text-indigo-400' : 'text-slate-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400'}`}
className={`h-5 w-5 shrink-0 ${pathname === item.href ? 'text-white' : 'text-slate-400 group-hover:text-white'}`}
aria-hidden="true"
/>
{item.name}
@@ -96,6 +90,14 @@ export function Sidebar() {
))}
</ul>
</li>
<li className="mt-auto">
<form action="/auth/signout" method="post" className="-mx-2 pb-4">
<button type="submit" className="group flex w-full items-center gap-x-3 rounded-xl p-3 text-sm font-bold text-slate-400 hover:text-white transition-all">
<ArrowRightOnRectangleIcon className="h-5 w-5 shrink-0" />
Güvenli Çıkış
</button>
</form>
</li>
</ul>
</nav>
</div>