fix(in-app-menu): implement auto close

This commit is contained in:
JellyBrick
2024-02-18 20:00:52 +09:00
parent 4657aeca45
commit 5edb2131d2
2 changed files with 15 additions and 1 deletions

View File

@ -132,6 +132,7 @@ export const Panel = (props: PanelProps) => {
<Show when={local.open}>
<ul
{...leftProps}
id={'sub-panel'}
ref={setPanel}
class={panelStyle()}
style={{

View File

@ -244,6 +244,19 @@ export const TitleBar = (props: TitleBarProps) => {
props.ipc.on('window-maximize', refetchMaximize);
props.ipc.on('window-unmaximize', refetchMaximize);
// close menu when the outside of the panel or sub-panel is clicked
document.body.addEventListener('click', (e) => {
if (
e.target instanceof HTMLElement &&
!(
e.target.closest('#main-panel') ||
e.target.closest('#sub-panel')
)
) {
setOpenTarget(null);
}
});
});
createEffect(() => {
@ -253,7 +266,7 @@ export const TitleBar = (props: TitleBarProps) => {
});
return (
<nav class={titleStyle()} data-macos={props.isMacOS}>
<nav id={'main-panel'} class={titleStyle()} data-macos={props.isMacOS}>
<IconButton
onClick={() => setCollapsed(!collapsed())}
style={{