fix: hide menu on click

This commit is contained in:
iCrawl
2022-09-07 19:19:58 +02:00
parent 8d07ea9a62
commit 74dc8c10d5

View File

@@ -58,8 +58,8 @@ export function SidebarLayout({
const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light'); const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
const matches = useMedia('(min-width: 992px)', false); const matches = useMedia('(min-width: 992px)', false);
const [opened, setOpened] = useState(false); const [opened, setOpened] = useState(false);
const packageMenu = useMenuState({ gutter: 8, sameWidth: true }); const packageMenu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
const versionMenu = useMenuState({ gutter: 8, sameWidth: true }); const versionMenu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
// useLockBodyScroll(opened); // useLockBodyScroll(opened);
useEffect(() => { useEffect(() => {
@@ -78,6 +78,7 @@ export function SidebarLayout({
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm" className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
as="a" as="a"
state={packageMenu} state={packageMenu}
onClick={() => packageMenu.setOpen(false)}
> >
{pkg} {pkg}
</MenuItem> </MenuItem>
@@ -93,6 +94,7 @@ export function SidebarLayout({
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm" className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 rounded bg-white p-3 text-sm"
as="a" as="a"
state={versionMenu} state={versionMenu}
onClick={() => versionMenu.setOpen(false)}
> >
{item} {item}
</MenuItem> </MenuItem>
@@ -198,7 +200,7 @@ export function SidebarLayout({
</div> </div>
</MenuButton> </MenuButton>
<Menu <Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 rounded border bg-white p-1" className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
state={packageMenu} state={packageMenu}
> >
{packageMenuItems} {packageMenuItems}
@@ -222,7 +224,7 @@ export function SidebarLayout({
</div> </div>
</MenuButton> </MenuButton>
<Menu <Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 rounded border bg-white p-1" className="dark:bg-dark-600 border-light-800 dark:border-dark-100 z-20 flex flex-col rounded border bg-white p-1"
state={versionMenu} state={versionMenu}
> >
{versionMenuItems} {versionMenuItems}