powerlifting.pt/site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: mobile menu overlays content, auto-collapse on item click

Browse source
This commit is contained in:
headpatsyou 2026-01-07 08:42:36 +00:00
parent 97a33eb6a4
commit 91caef2c65
2 changed files with 23 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/app/globals.css
View file

@ -113,6 +113,9 @@ p { font-size: 1rem; line-height: 1.6; color: var(--foreground); }
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0 2px 10px rgba(0,0,0,0.06); box-shadow: 0 2px 10px rgba(0,0,0,0.06);
} }
.nav {
position: relative;
}
.top-accent { .top-accent {
height: 6px; height: 6px;
background-color: var(--color-red); background-color: var(--color-red);
@ -299,10 +302,20 @@ p { font-size: 1rem; line-height: 1.6; color: var(--foreground); }
display: none; display: none;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
margin-top: 0.75rem; position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%; width: 100%;
background: #ffffff;
border-bottom: 1px solid var(--color-border);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
padding: 1rem;
z-index: 100;
max-height: calc(100vh - 80px);
overflow-y: auto;
} }
.nav-toggle[aria-expanded="true"] + .nav-list { .nav-list[data-expanded="true"] {
display: flex; display: flex;
} }
.nav-item { .nav-item {

11
src/components/layout/Navigation.tsx
View file

@ -17,6 +17,11 @@ export function Navigation() {
); );
}; };
const closeMenu = () => {
setExpanded(false);
setExpandedSubs([]);
};
const sections = useMemo(() => [ const sections = useMemo(() => [
{ {
key: "home", key: "home",
@ -75,7 +80,7 @@ export function Navigation() {
<span className="sr-only">{expanded ? (locale === "en" ? "Close menu" : "Fechar menu") : (locale === "en" ? "Open menu" : "Abrir menu")}</span> <span className="sr-only">{expanded ? (locale === "en" ? "Close menu" : "Fechar menu") : (locale === "en" ? "Open menu" : "Abrir menu")}</span>
☰ ☰
</button> </button>
<ul id="primary-menu" className="nav-list"> <ul id="primary-menu" className="nav-list" data-expanded={expanded}>
{sections.map((s) => ( {sections.map((s) => (
<li key={s.key} className={s.items.length ? "nav-item has-sub" : "nav-item"}> <li key={s.key} className={s.items.length ? "nav-item has-sub" : "nav-item"}>
{s.items.length > 0 ? ( {s.items.length > 0 ? (
@ -100,13 +105,13 @@ export function Navigation() {
<ul className={`submenu ${expandedSubs.includes(s.key) ? "expanded" : ""}`} role="menu" aria-label={s.label}> <ul className={`submenu ${expandedSubs.includes(s.key) ? "expanded" : ""}`} role="menu" aria-label={s.label}>
{s.items.map((it) => ( {s.items.map((it) => (
<li key={it.href} role="none"> <li key={it.href} role="none">
<Link role="menuitem" href={it.href} className={isActive(it.href) ? "active" : ""}>{it.label}</Link> <Link role="menuitem" href={it.href} className={isActive(it.href) ? "active" : ""} onClick={closeMenu}>{it.label}</Link>
</li> </li>
))} ))}
</ul> </ul>
</> </>
) : ( ) : (
<Link className={isActive(s.path) ? "active" : ""} href={s.path}>{s.label}</Link> <Link className={isActive(s.path) ? "active" : ""} href={s.path} onClick={closeMenu}>{s.label}</Link>
)} )}
</li> </li>
))} ))}