Skip to content

Commit

Permalink
Add toggle button
Browse files Browse the repository at this point in the history
  • Loading branch information
@alimpens
alimpens committed Oct 23, 2024
1 parent 3e20118 commit 5685c69
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 76 deletions.
4 changes: 4 additions & 0 deletions packages/css/src/components/header/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,7 @@
padding-inline-end: var(--ams-grid-padding-inline);
pointer-events: auto;
}

.ams-header__mega-menu--closed.ams-header__mega-menu--closed {
display: none;
}
170 changes: 94 additions & 76 deletions packages/react/src/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import { MenuIcon } from '@amsterdam/design-system-react-icons'
import clsx from 'clsx'
import { forwardRef } from 'react'
import { forwardRef, useState } from 'react'
import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react'
import { Grid } from '../Grid'
import { Heading } from '../Heading'
Expand Down Expand Up @@ -39,83 +39,101 @@ export const Header = forwardRef(
...restProps
}: HeaderProps,
ref: ForwardedRef<HTMLElement>,
) => (
<>
<header {...restProps} ref={ref} className={clsx('ams-header', className)}>
<div className="ams-header__section">
<a className="ams-header__logo-link" href={logoLink}>
<span className="ams-visually-hidden">{logoLinkTitle}</span>
<Logo brand={logoBrand} />
</a>
{appName && (
<Heading className="ams-header__app-name" level={1} size="level-5">
{appName}
</Heading>
)}
</div>
<nav className="ams-header__navigation" aria-labelledby="primary-navigation">
<h2 id="primary-navigation" className="ams-visually-hidden">
Hoofdnavigatie
</h2>
{/* The logo and app name section is recreated here, to make sure the page menu breaks at the right spot */}
<div className="ams-header__section" aria-hidden style={{ opacity: 0 }}>
<div className="ams-header__logo-link">
) => {
const [open, setOpen] = useState(false)

const handleClick = () => {
setOpen(!open)
}

return (
<>
<header {...restProps} ref={ref} className={clsx('ams-header', className)}>
<div className="ams-header__section">
<a className="ams-header__logo-link" href={logoLink}>
<span className="ams-visually-hidden">{logoLinkTitle}</span>
<Logo brand={logoBrand} />
</div>
{appName && <span className="ams-heading ams-heading--level-5 ams-header__app-name">{appName}</span>}
</div>
<PageMenu alignEnd className="ams-header__page-menu">
<PageMenu.Item rank="secondary">
<PageMenu.Link href="#" lang="en">
English
</PageMenu.Link>
</PageMenu.Item>
<PageMenu.Item rank="secondary">
<PageMenu.Link href="#">Mijn Amsterdam</PageMenu.Link>
</PageMenu.Item>
<PageMenu.Item>
<PageMenu.Button icon={MenuIcon} onClick={() => {}}>
Menu
</PageMenu.Button>
</PageMenu.Item>
</PageMenu>
<Grid paddingBottom="large" style={{ width: '100%', pointerEvents: 'auto' }}>
<Grid.Cell span="all">
<Heading level={1} size="level-2">
Alle onderwerpen
</a>
{appName && (
<Heading className="ams-header__app-name" level={1} size="level-5">
{appName}
</Heading>
<MegaMenu.ListCategory>
<LinkList>
<LinkList.Link href="#">Afval</LinkList.Link>
<LinkList.Link href="#">Bestuur en organisatie</LinkList.Link>
<LinkList.Link href="#">Bouw- en verkeersprojecten</LinkList.Link>
<LinkList.Link href="#">Burgerzaken</LinkList.Link>
<LinkList.Link href="#">Diversiteit</LinkList.Link>
<LinkList.Link href="#">Gemeentebelastingen</LinkList.Link>
<LinkList.Link href="#">Gezondheidsdienst (GGD)</LinkList.Link>
<LinkList.Link href="#">Kunst en cultuur</LinkList.Link>
<LinkList.Link href="#">Ondernemen</LinkList.Link>
<LinkList.Link href="#">Onderwijs en jeugd</LinkList.Link>
<LinkList.Link href="#">Parkeren</LinkList.Link>
<LinkList.Link href="#">Sport</LinkList.Link>
<LinkList.Link href="#">Stadsdelen</LinkList.Link>
<LinkList.Link href="#">Subsidies</LinkList.Link>
<LinkList.Link href="#">Vacatures</LinkList.Link>
<LinkList.Link href="#">Verkeer en vervoer</LinkList.Link>
<LinkList.Link href="#">Vrije tijd</LinkList.Link>
<LinkList.Link href="#">Werk aan de weg</LinkList.Link>
<LinkList.Link href="#">Werk en inkomen</LinkList.Link>
<LinkList.Link href="#">Wonen en leefomgeving</LinkList.Link>
<LinkList.Link href="#">Zorg en ondersteuning</LinkList.Link>
</LinkList>
</MegaMenu.ListCategory>
</Grid.Cell>
</Grid>
</nav>
</header>
<p>hallo</p>
</>
),
)}
</div>
<nav className="ams-header__navigation" aria-labelledby="primary-navigation">
<h2 id="primary-navigation" className="ams-visually-hidden">
Hoofdnavigatie
</h2>
{/* The logo and app name section is recreated here, to make sure the page menu breaks at the right spot */}
<div className="ams-header__section" aria-hidden style={{ opacity: 0 }}>
<div className="ams-header__logo-link">
<Logo brand={logoBrand} />
</div>
{appName && <span className="ams-heading ams-heading--level-5 ams-header__app-name">{appName}</span>}
</div>
<PageMenu alignEnd className="ams-header__page-menu">
<PageMenu.Item rank="secondary">
<PageMenu.Link href="#" lang="en">
English
</PageMenu.Link>
</PageMenu.Item>
<PageMenu.Item rank="secondary">
<PageMenu.Link href="#">Mijn Amsterdam</PageMenu.Link>
</PageMenu.Item>
<PageMenu.Item>
<PageMenu.Button
icon={MenuIcon}
onClick={handleClick}
aria-expanded={open}
aria-controls="ams-mega-menu"
>
<span className="ams-visually-hidden">{`${open ? 'Verberg' : 'Toon'} `}</span>Menu
</PageMenu.Button>
</PageMenu.Item>
</PageMenu>
<Grid
className={!open ? 'ams-header__mega-menu--closed' : ''}
paddingBottom="large"
style={{ width: '100%', pointerEvents: 'auto' }}
id="ams-mega-menu"
>
<Grid.Cell span="all">
<Heading level={1} size="level-2">
Alle onderwerpen
</Heading>
<MegaMenu.ListCategory>
<LinkList>
<LinkList.Link href="#">Afval</LinkList.Link>
<LinkList.Link href="#">Bestuur en organisatie</LinkList.Link>
<LinkList.Link href="#">Bouw- en verkeersprojecten</LinkList.Link>
<LinkList.Link href="#">Burgerzaken</LinkList.Link>
<LinkList.Link href="#">Diversiteit</LinkList.Link>
<LinkList.Link href="#">Gemeentebelastingen</LinkList.Link>
<LinkList.Link href="#">Gezondheidsdienst (GGD)</LinkList.Link>
<LinkList.Link href="#">Kunst en cultuur</LinkList.Link>
<LinkList.Link href="#">Ondernemen</LinkList.Link>
<LinkList.Link href="#">Onderwijs en jeugd</LinkList.Link>
<LinkList.Link href="#">Parkeren</LinkList.Link>
<LinkList.Link href="#">Sport</LinkList.Link>
<LinkList.Link href="#">Stadsdelen</LinkList.Link>
<LinkList.Link href="#">Subsidies</LinkList.Link>
<LinkList.Link href="#">Vacatures</LinkList.Link>
<LinkList.Link href="#">Verkeer en vervoer</LinkList.Link>
<LinkList.Link href="#">Vrije tijd</LinkList.Link>
<LinkList.Link href="#">Werk aan de weg</LinkList.Link>
<LinkList.Link href="#">Werk en inkomen</LinkList.Link>
<LinkList.Link href="#">Wonen en leefomgeving</LinkList.Link>
<LinkList.Link href="#">Zorg en ondersteuning</LinkList.Link>
</LinkList>
</MegaMenu.ListCategory>
</Grid.Cell>
</Grid>
</nav>
</header>
<p>hallo</p>
</>
)
},
)

Header.displayName = 'Header'

0 comments on commit 5685c69

Please sign in to comment.