etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 02:23:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve mobile menu interaction in Layout component: add click handler to close menu on outside click and prevent event propagation for mobile menu button, enhancing user experience and interaction consistency.

Browse Source
This commit is contained in:
PEDZEO
2026-01-20 03:59:17 +03:00
parent 92b1d30cbb
commit a76803f4ea
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/layout/Layout.tsx
View File

@@ -367,7 +367,7 @@ export default function Layout({ children }: LayoutProps) {
paddingTop: isFullscreen ? `${Math.max(safeAreaInset.top, contentSafeAreaInset.top) + 45}px` : undefined, paddingTop: isFullscreen ? `${Math.max(safeAreaInset.top, contentSafeAreaInset.top) + 45}px` : undefined,
}} }}
> >
<div className="w-full mx-auto px-4 sm:px-6"> <div className="w-full mx-auto px-4 sm:px-6" onClick={() => mobileMenuOpen && setMobileMenuOpen(false)}>
<div className="flex justify-between items-center h-16 lg:h-20"> <div className="flex justify-between items-center h-16 lg:h-20">
{/* Logo */} {/* Logo */}
<Link to="/" onClick={() => setMobileMenuOpen(false)} className={`flex items-center gap-2.5 flex-shrink-0 ${!appName ? 'lg:mr-4' : ''}`}> <Link to="/" onClick={() => setMobileMenuOpen(false)} className={`flex items-center gap-2.5 flex-shrink-0 ${!appName ? 'lg:mr-4' : ''}`}>
@@ -492,7 +492,10 @@ export default function Layout({ children }: LayoutProps) {
{/* Mobile menu button */} {/* Mobile menu button */}
<button <button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)} onClick={(e) => {
e.stopPropagation()
setMobileMenuOpen(!mobileMenuOpen)
}}
className="lg:hidden btn-icon" className="lg:hidden btn-icon"
aria-label={mobileMenuOpen ? t('common.close') || 'Close menu' : t('nav.menu') || 'Open menu'} aria-label={mobileMenuOpen ? t('common.close') || 'Close menu' : t('nav.menu') || 'Open menu'}
aria-expanded={mobileMenuOpen} aria-expanded={mobileMenuOpen}