FilesExpand file tree

main

/

Breadcrumbs.tsx

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

59 lines (55 loc) · 1.77 KB

main

/

Breadcrumbs.tsx

Copy path

Top

File metadata and controls

• Code
• Blame

59 lines (55 loc) · 1.77 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

import cx from 'classnames'

import { useRouter } from 'next/router'

import { useMainContext } from './context/MainContext'

import { Link } from 'components/Link'

export type BreadcrumbT = {

title: string

documentType?: string

href?: string

}

export const Breadcrumbs = () => {

const router = useRouter()

const pathWithLocale = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string

const { breadcrumbs } = useMainContext()

return (

/*

NOTE: The breadcrumbs class and the nav tag are used by the

LUNR search scripts. The a tag generated by the Link is also used.

If these change, please also change

updating script/search/parse-page-sections-into-records.js.

*/

<nav data-testid="breadcrumbs" className="f5 breadcrumbs" aria-label="Breadcrumb">

{Object.values(breadcrumbs).map((breadcrumb, i, arr) => {

if (!breadcrumb) {

return null

}

const title = `${breadcrumb.documentType}: ${breadcrumb.title}`

return [

!breadcrumb.href ? (

<span data-testid="breadcrumb-title" key={title} title={title} className="px-2">

{breadcrumb.title}

</span>

) : (

<Link

key={title}

data-testid="breadcrumb-link"

href={breadcrumb.href}

title={title}

className={cx(

'd-inline-block px-2',

pathWithLocale === breadcrumb.href && 'color-text-tertiary'

)}

>

{breadcrumb.title}

</Link>

),

i !== arr.length - 1 ? (

<span className="color-text-tertiary" key={`${i}-slash`}>

/

</span>

) : null,

]

})}

</nav>

)

}