49 lines
2.5 KiB
React
49 lines
2.5 KiB
React
import React, { useEffect, useId, useRef, useState } from 'react';
|
||
import { SlidersHorizontal, X } from 'lucide-react';
|
||
import { LeftSidebar } from './LeftSidebar';
|
||
|
||
export const MobilFiltreCekmecesi = () => {
|
||
const [acik, setAcik] = useState(false);
|
||
const dialog = useRef(null);
|
||
const trigger = useRef(null);
|
||
const titleId = useId();
|
||
useEffect(() => {
|
||
if (!acik) return;
|
||
const element = dialog.current;
|
||
element.showModal();
|
||
const previousOverflow = document.body.style.overflow;
|
||
document.body.style.overflow = 'hidden';
|
||
const desktop = window.matchMedia('(min-width: 1024px)');
|
||
const closeOnDesktop = () => { if (desktop.matches) setAcik(false); };
|
||
desktop.addEventListener('change', closeOnDesktop);
|
||
closeOnDesktop();
|
||
return () => {
|
||
desktop.removeEventListener('change', closeOnDesktop);
|
||
element.close();
|
||
document.body.style.overflow = previousOverflow;
|
||
if (trigger.current?.getClientRects().length) trigger.current.focus();
|
||
};
|
||
}, [acik]);
|
||
return (
|
||
<div className="lg:hidden">
|
||
<button ref={trigger} type="button" onClick={() => setAcik(true)} aria-haspopup="dialog" aria-expanded={acik}
|
||
className="w-full mb-3 bg-white border border-slate-200 rounded-xl px-4 py-2.5 text-xs font-bold text-slate-800 flex items-center justify-center gap-2 shadow-xs">
|
||
<SlidersHorizontal className="w-4 h-4 text-blue-600" /> Filtreler & Hızlı Erişim
|
||
</button>
|
||
{acik && <dialog ref={dialog} aria-labelledby={titleId} onCancel={() => setAcik(false)} onClose={() => setAcik(false)}
|
||
onClick={event => {
|
||
if (event.target !== event.currentTarget) return;
|
||
const box = event.currentTarget.getBoundingClientRect();
|
||
if (event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom) setAcik(false);
|
||
}}
|
||
className="fixed inset-y-0 left-0 right-auto m-0 h-dvh max-h-none w-[88%] max-w-sm border-0 bg-slate-100 shadow-2xl overflow-y-auto p-3 backdrop:bg-slate-900/50">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h2 id={titleId} className="text-xs font-black text-slate-800 uppercase tracking-wider">Filtreler</h2>
|
||
<button autoFocus onClick={() => setAcik(false)} className="p-2.5 rounded-lg bg-white border border-slate-200" aria-label="Filtreleri kapat"><X className="w-4 h-4" /></button>
|
||
</div>
|
||
<LeftSidebar onOpenProductSearch={() => setAcik(false)} />
|
||
</dialog>}
|
||
</div>
|
||
);
|
||
};
|