Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make sure mega menu closes on page navigation #317

Merged
merged 1 commit into from
Feb 28, 2025
+149 −137
Merged

Make sure mega menu closes on page navigation #317

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Loading status checks…
Make sure mega menu closes on page navigation
@alimpens
alimpens committed Feb 28, 2025

Verified

This commit was signed with the committer’s verified signature.
Infra-Red Andrei Krasnitski
GPG key ID: 4F24E2BC12A511CE
Verified
Learn about vigilant mode
commit a18e5851350df1099736ac755034708b9f975c86
138 changes: 1 addition & 137 deletions src/app/amsterdam/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -4,106 +4,17 @@ import {
Column,
Footer,
Grid,
Header,
Heading,
Link,
LinkList,
PageMenu,
Paragraph,
Screen,
SkipLink,
} from '@amsterdam/design-system-react'
import { ChattingIcon, PhoneIcon } from '@amsterdam/design-system-react-icons'
import NextLink from 'next/link'
import './amsterdam.css'

const megaMenuLinks = [
{
href: '#',
label: 'Afval',
},
{
href: '/amsterdam/bestuur-en-organisatie',
label: 'Bestuur en organisatie',
},
{
href: '/amsterdam/projecten',
label: 'Bouw- en verkeersprojecten',
},
{
href: '/amsterdam/burgerzaken',
label: 'Burgerzaken',
},
{
href: '#',
label: 'Gemeentebelastingen',
},
{
href: '#',
label: 'Gezondheidsdienst (GGD)',
},
{
href: '/amsterdam/kunst-en-cultuur',
label: 'Kunst, cultuur en vrije tijd',
},
{
href: '#',
label: 'Ondernemen',
},
{
href: '#',
label: 'Onderwijs en jeugd',
},
{
href: '#',
label: 'Parkeren',
},
{
href: '#',
label: 'Sport',
},
{
href: '#',
label: 'Stadsdelen',
},
{
href: '#',
label: 'Subsidies',
},
{
href: '#',
label: 'Vacatures',
},
{
href: '#',
label: 'Vergunningen',
},
{
href: '#',
label: 'Verkeer en vervoer',
},
{
href: '#',
label: 'Verkiezingen',
},
{
href: '#',
label: 'Werk aan de weg',
},
{
href: '#',
label: 'Werk en inkomen',
},
{
href: '#',
label: 'Wonen en leefomgeving',
},
{
href: '#',
label: 'Zorg en ondersteuning',
},
]

const footerLinks = [
{
href: '#',
@@ -158,54 +69,7 @@ export default function Amsterdam({ children }) {
return (
<div className="ams-theme">
<Screen maxWidth="wide">
<Grid>
<Grid.Cell span="all">
<SkipLink href="#main">Direct naar inhoud</SkipLink>
</Grid.Cell>
</Grid>
<Header
menuItems={[
<Header.MenuLink href="https://mijn.amsterdam.nl/" key={1} rel="external">
Mijn Amsterdam
</Header.MenuLink>,
<Header.MenuLink href="#" key={2} lang="en">
English
</Header.MenuLink>,
<NextLink href="/amsterdam/zoeken" key={3} legacyBehavior passHref>
<Header.MenuLink fixed>Zoeken</Header.MenuLink>
</NextLink>,
]}
logoLink={`${process.env.basePath}amsterdam`} // TODO: je kunt hier geen NextLink gebruiken
logoLinkTitle="Naar de homepage van gemeente Amsterdam"
>
<Grid paddingBottom="large" paddingTop="small">
<Header.GridCellNarrowWindowOnly span="all">
<LinkList>
<LinkList.Link href="https://mijn.amsterdam.nl/" rel="external">
Mijn Amsterdam
</LinkList.Link>
<LinkList.Link href="#" lang="en">
English
</LinkList.Link>
</LinkList>
</Header.GridCellNarrowWindowOnly>
<Grid.Cell span="all">
<Heading className="ams-mb--sm" level={2} size="level-3">
Alle onderwerpen
</Heading>
<div className="ams-mega-menu__columns">
<LinkList>
{megaMenuLinks.map(({ href, label }) => (
<NextLink href={href} key={label} legacyBehavior passHref>
<LinkList.Link>{label}</LinkList.Link>
</NextLink>
))}
</LinkList>
</div>
</Grid.Cell>
</Grid>
</Header>
<main id="main">{children}</main>
{children}
<Footer>
<Footer.Top>
<Heading inverseColor className="ams-visually-hidden">
148 changes: 148 additions & 0 deletions src/app/amsterdam/template.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
'use client'

import { Header, Grid, LinkList, Heading, SkipLink } from '@amsterdam/design-system-react'
import NextLink from 'next/link'

const megaMenuLinks = [
{
href: '#',
label: 'Afval',
},
{
href: '/amsterdam/bestuur-en-organisatie',
label: 'Bestuur en organisatie',
},
{
href: '/amsterdam/projecten',
label: 'Bouw- en verkeersprojecten',
},
{
href: '/amsterdam/burgerzaken',
label: 'Burgerzaken',
},
{
href: '#',
label: 'Gemeentebelastingen',
},
{
href: '#',
label: 'Gezondheidsdienst (GGD)',
},
{
href: '/amsterdam/kunst-en-cultuur',
label: 'Kunst, cultuur en vrije tijd',
},
{
href: '#',
label: 'Ondernemen',
},
{
href: '#',
label: 'Onderwijs en jeugd',
},
{
href: '#',
label: 'Parkeren',
},
{
href: '#',
label: 'Sport',
},
{
href: '#',
label: 'Stadsdelen',
},
{
href: '#',
label: 'Subsidies',
},
{
href: '#',
label: 'Vacatures',
},
{
href: '#',
label: 'Vergunningen',
},
{
href: '#',
label: 'Verkeer en vervoer',
},
{
href: '#',
label: 'Verkiezingen',
},
{
href: '#',
label: 'Werk aan de weg',
},
{
href: '#',
label: 'Werk en inkomen',
},
{
href: '#',
label: 'Wonen en leefomgeving',
},
{
href: '#',
label: 'Zorg en ondersteuning',
},
]

function Template({ children }) {
return (
<>
<Grid>
<Grid.Cell span="all">
<SkipLink href="#main">Direct naar inhoud</SkipLink>
</Grid.Cell>
</Grid>
<Header
menuItems={[
<Header.MenuLink href="https://mijn.amsterdam.nl/" key={1} rel="external">
Mijn Amsterdam
</Header.MenuLink>,
<Header.MenuLink href="#" key={2} lang="en">
English
</Header.MenuLink>,
<NextLink href="/amsterdam/zoeken" key={3} legacyBehavior passHref>
<Header.MenuLink fixed>Zoeken</Header.MenuLink>
</NextLink>,
]}
logoLink={`${process.env.basePath}amsterdam`} // TODO: je kunt hier geen NextLink gebruiken
logoLinkTitle="Naar de homepage van gemeente Amsterdam"
>
<Grid paddingBottom="large" paddingTop="small">
<Header.GridCellNarrowWindowOnly span="all">
<LinkList>
<LinkList.Link href="https://mijn.amsterdam.nl/" rel="external">
Mijn Amsterdam
</LinkList.Link>
<LinkList.Link href="#" lang="en">
English
</LinkList.Link>
</LinkList>
</Header.GridCellNarrowWindowOnly>
<Grid.Cell span="all">
<Heading className="ams-mb--sm" level={2} size="level-3">
Alle onderwerpen
</Heading>
<div className="ams-mega-menu__columns">
<LinkList>
{megaMenuLinks.map(({ href, label }) => (
<NextLink href={href} key={label} legacyBehavior passHref>
<LinkList.Link>{label}</LinkList.Link>
</NextLink>
))}
</LinkList>
</div>
</Grid.Cell>
</Grid>
</Header>
<main id="main">{children}</main>
</>
)
}

export default Template