11---
22import { siteName , siteTitle , siteThemeColor , siteColorScheme , siteKeywords , twitterCard } from ' ../seo.config.ts'
33import { Root } from ' @components/root/root'
4- import { Body } from ' @components/body/body'
54import { PageBody } from ' @components/page-body/page-body'
5+ import { PageHeader } from ' @components/page-header/page-header'
6+ import { PageFooter } from ' @components/page-footer/page-footer'
7+ import { NavBar } from ' @components/nav-bar/nav-bar'
68import { PageLayout } from ' @components/page-layout/page-layout'
79import { SkipLink } from ' @components/skip-link/skip-link.tsx'
10+ import { NavList } from ' @components/nav-list/nav-list'
11+ import { NavListLink } from ' @components/nav-list/nav-list'
12+ import { Logo } from ' @components/logo/logo'
13+ import { LinkList , LinkListLink } from ' @components/link-list/link-list'
14+ import { BreadcrumbNav , BreadcrumbNavLink , BreadcrumbNavSeparator } from ' @components/breadcrumb-nav/breadcrumb-nav'
15+ import { IconChevronRight } from ' @tabler/icons-react'
816
917import ' @fontsource/fira-code'
1018import ' @fontsource/fira-sans/700'
@@ -21,9 +29,21 @@ interface Props {
2129 keywords? : string [];
2230 index? : boolean ;
2331 follow? : boolean ;
32+ showBreadcrumbs? : boolean ;
2433}
2534
26- const = ' nl' = true , follow } = Astro .props ;
35+ const
36+ title,
37+ titleSm,
38+ description,
39+ lang = ' nl'
40+ keywords,
41+ seoImage,
42+ seoImageAlt,
43+ index = true ,
44+ follow,
45+ showBreadcrumbs = true ,
46+ } = Astro .props ;
2747
2848const = ' /social-image_nl-design-system.png'
2949const = ' Logo van NL Design System'
@@ -35,6 +55,28 @@ const _seoImageAlt = seoImage ? seoImageAlt : fallbackSeoImageAlt;
3555const = new Set ([... siteKeywords , ... (keywords || [])]);
3656const = follow === undefined ? index : follow ;
3757const = ` ${index ? ' index' : ' noindex' _follow ? ' follow' : ' nofollow' ` ;
58+
59+ const = [
60+ { href: ' /' ' Home'
61+ { href: ' /handboek/' ' Handboek'
62+ { href: ' /richtlijnen/' ' Richtlijnen'
63+ { href: ' /componenten/' ' Componenten'
64+ { href: ' /voorbeelden/' ' Voorbeelden'
65+ { href: ' /community/' ' Community'
66+ { href: ' /project/' ' Project'
67+ ];
68+
69+ const = [
70+ { href: ' /blog/' ' Blog'
71+ { href: ' /project/kernteam/' ' Contact'
72+ { href: ' /toegankelijkheidsverklaring/' ' Toegankelijkheid'
73+ { href: ' /privacyverklaring/' ' Privacyverklaring'
74+ { href: ' /colofon/' ' Colofon'
75+ { href: ' /github/' ' GitHub'
76+ { href: ' /slack/' ' Slack'
77+ { href: ' /figma/' ' Figma'
78+ { href: ' https://www.linkedin.com/company/nl-design-system/' ' LinkedIn' true },
79+ ];
3880---
3981
4082<Root lang ={ lang } dir =" ltr"
@@ -67,37 +109,58 @@ const _robots = `${index ? 'index' : 'noindex'} ${_follow ? 'follow' : 'nofollow
67109 <slot name =" head"
68110 </head >
69111
70- <Body >
112+ <body >
71113 <SkipLink href =" #main" SkipLink >
72114 <PageLayout >
73- <header >
74- TODO: PageHeader
75- <nav aria-labelledby =" hoofdnavigatie-label"
76- <h2 id =" hoofdnavigatie-label" h2 >
77- TODO: Hoofd navigatie
78- </nav >
79- </header >
80-
115+ <PageHeader >
116+ <a href =" /" aria-label =" Link naar Homepagina" Logo /></a >
117+ </PageHeader >
118+ <NavBar aria-labelledby =" hoofdnavigatie-label"
119+ <h2 hidden id =" hoofdnavigatie-label" h2 >
120+ <NavList >
121+ { mainNavigationItems .map (({ href , label }) => <NavListLink href = { href } >{ label } </NavListLink }
122+ </NavList >
123+ </NavBar >
81124 <PageBody >
82- <nav aria-labelledby =" breadcrumb-label"
83- <h2 id =" breadcrumb-label" h2 >
84- TODO: Breadcrumb navigatie
85- </nav >
125+ {
126+ showBreadcrumbs && (
127+ <nav aria-labelledby = " breadcrumb-label"
128+ <h2 hidden id = " breadcrumb-label"
129+ Kruimelpad
130+ </h2 >
131+ <BreadcrumbNav
132+ <BreadcrumbNavLink href = " /" BreadcrumbNavLink
133+ <BreadcrumbNavSeparator
134+ <IconChevronRight
135+ </BreadcrumbNavSeparator
136+ <BreadcrumbNavLink href = " #" { title } </BreadcrumbNavLink
137+ </BreadcrumbNav
138+ </nav >
139+ )
140+ }
86141
87142 <main id =" main"
88143 <slot />
89144 </main >
90145 </PageBody >
91146
92- <footer >
93- TODO: PageFooter
147+ <PageFooter >
94148 <nav aria-labelledby =" site-navigatie-label"
95- <h2 id =" site-navigatie-label" h2 >
96- TODO: Footer navigatie
149+ <h2 hidden id =" site-navigatie-label" h2 >
150+ <LinkList >
151+ {
152+ footerNavigationItems .map (({ href , label }) => (
153+ <LinkListLink href = { href } >
154+ { label }
155+ <IconChevronRight slot = " icon"
156+ </LinkListLink
157+ ))
158+ }
159+ </LinkList >
97160 </nav >
98- </footer >
161+ </PageFooter >
99162 </PageLayout >
100- </Body >
163+ </body >
101164</Root >
102165
103166<style is:global >
0 commit comments