feat(doclist): add mobile sidebar close handler to FinderWindow and DocumentList
Introduce onRequestSidebarClose prop to FinderWindow and implement its usage in DocumentList to enable closing the sidebar on mobile via backdrop tap or Esc key. Enhances mobile usability by allowing users to dismiss the sidebar more intuitively.
This commit is contained in:
parent
503319d46e
commit
b295d2f38d
2 changed files with 7 additions and 1 deletions
|
|
@ -544,6 +544,9 @@ function DocumentListInner({ brand, appActions }: DocumentListInnerProps) {
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
sidebarOpen={effectiveSidebarOpen}
|
sidebarOpen={effectiveSidebarOpen}
|
||||||
|
onRequestSidebarClose={() => {
|
||||||
|
if (isNarrow) setMobileSidebarOpen(false);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{!isLoading && showHint && allDocuments.length > 1 && (
|
{!isLoading && showHint && allDocuments.length > 1 && (
|
||||||
<div className="px-3 pt-3 shrink-0 bg-background">
|
<div className="px-3 pt-3 shrink-0 bg-background">
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,8 @@ interface FinderWindowProps {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
/** Controlled sidebar open/closed state (drives mobile drawer + desktop collapse). */
|
/** Controlled sidebar open/closed state (drives mobile drawer + desktop collapse). */
|
||||||
sidebarOpen: boolean;
|
sidebarOpen: boolean;
|
||||||
|
/** Handles close requests from mobile drawer interactions (backdrop tap, Esc). */
|
||||||
|
onRequestSidebarClose?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const NARROW_QUERY = '(max-width: 767px)';
|
const NARROW_QUERY = '(max-width: 767px)';
|
||||||
|
|
@ -37,6 +39,7 @@ export function FinderWindow({
|
||||||
statusBar,
|
statusBar,
|
||||||
children,
|
children,
|
||||||
sidebarOpen,
|
sidebarOpen,
|
||||||
|
onRequestSidebarClose,
|
||||||
}: FinderWindowProps) {
|
}: FinderWindowProps) {
|
||||||
const isNarrow = useIsNarrow();
|
const isNarrow = useIsNarrow();
|
||||||
|
|
||||||
|
|
@ -59,7 +62,7 @@ export function FinderWindow({
|
||||||
{/* Mobile drawer */}
|
{/* Mobile drawer */}
|
||||||
<Transition show={isNarrow && sidebarOpen} as={Fragment}>
|
<Transition show={isNarrow && sidebarOpen} as={Fragment}>
|
||||||
<Dialog
|
<Dialog
|
||||||
onClose={() => undefined}
|
onClose={onRequestSidebarClose ?? (() => undefined)}
|
||||||
className="relative z-40 md:hidden"
|
className="relative z-40 md:hidden"
|
||||||
>
|
>
|
||||||
<TransitionChild
|
<TransitionChild
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue