Footer — Collapsible Site Map

1'use client'
2 
3import * as React from 'react'
4 
5import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/collapsible'
6import { Footer, FooterNavLink } from '@/components/footer'
7import { IconExpandMore } from '@/icons/expand-more'
8 
9// ── Sample content — replace with your service's own ────────────────────────
10const columnsSample = [
11  {
12    heading: 'Services',
13    links: [
14      { name: 'Apply for a licence', href: '#licence' },
15      { name: 'Renew a registration', href: '#renew' },
16      { name: 'Pay a fine', href: '#fine' },
17      { name: 'Book an appointment', href: '#appointment' },
18      { name: 'Check an application', href: '#application' },
19    ],
20  },
21  {
22    heading: 'About',
23    links: [
24      { name: 'Who we are', href: '#about' },
25      { name: 'Our strategy', href: '#strategy' },
26      { name: 'Annual reports', href: '#reports' },
27      { name: 'Careers', href: '#careers' },
28      { name: 'News', href: '#news' },
29    ],
30  },
31  {
32    heading: 'Help',
33    links: [
34      { name: 'Contact us', href: '#contact' },
35      { name: 'Accessibility help', href: '#accessibility-help' },
36      { name: 'Give feedback', href: '#feedback' },
37      { name: 'Report a problem', href: '#report' },
38      { name: 'Interpreting services', href: '#interpreting' },
39    ],
40  },
41  {
42    heading: 'Popular',
43    links: [
44      { name: 'Service NSW', href: '#service-nsw' },
45      { name: 'Digital NSW', href: '#digital-nsw' },
46      { name: 'Data.NSW', href: '#data-nsw' },
47      { name: 'Have your say', href: '#have-your-say' },
48      { name: 'NSW Government jobs', href: '#jobs' },
49    ],
50  },
51]
52 
53const legalLinksSample = [
54  { name: 'Accessibility', href: '#accessibility' },
55  { name: 'Privacy', href: '#privacy' },
56  { name: 'Copyright', href: '#copyright' },
57  { name: 'Disclaimer', href: '#disclaimer' },
58]
59 
60const departmentSample = 'Digital NSW, Department of Customer Service'
61 
62/** Matches Tailwind's `lg` breakpoint (64rem). Keep the two in step. */
63const DESKTOP_QUERY = '(min-width: 64rem)'
64 
65type FooterAccordionProps = Omit<React.ComponentProps<typeof Footer>, 'children'> & {
66  columns?: typeof columnsSample
67}
68 
69/**
70 * A long site map that collapses into accordions on small screens and lays out
71 * as plain columns from `lg` up. Use when there are more links than a mobile
72 * footer can show without burying the legal row and copyright below a wall of
73 * text.
74 *
75// … truncated