Skip to content

Commit 553d433

Browse files
SakshiKekreSakshiKekre
committed
feat: Add api page link to homepage header
1 parent f1d2f54 commit 553d433

File tree

9 files changed

+98
-2
lines changed

9 files changed

+98
-2
lines changed

‎app/src/components/home-header/DesktopNavigation.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@ interface NavLink {
1111
interface DesktopNavigationProps {
1212
navLinks: NavLink[];
1313
aboutLinks: NavLink[];
14+
learnLinks: NavLink[];
1415
onNavClick: (path?: string) => void;
1516
}
1617

1718
export default function DesktopNavigation({
1819
navLinks,
1920
aboutLinks,
21+
learnLinks,
2022
onNavClick,
2123
}: DesktopNavigationProps) {
2224
const countryId = useCurrentCountry();
@@ -74,6 +76,31 @@ export default function DesktopNavigation({
7476
{link.label}
7577
</Anchor>
7678
))}
79+
80+
<Menu shadow="md" width={200} zIndex={1001} position="bottom" offset={10}>
81+
<Menu.Target>
82+
<UnstyledButton>
83+
<Group gap={4} align="center">
84+
<Text
85+
c={colors.text.inverse}
86+
fw={typography.fontWeight.medium}
87+
size="18px"
88+
style={{ fontFamily: typography.fontFamily.primary }}
89+
>
90+
Learn
91+
</Text>
92+
<IconChevronDown size={18} color={colors.text.inverse} />
93+
</Group>
94+
</UnstyledButton>
95+
</Menu.Target>
96+
<Menu.Dropdown>
97+
{learnLinks.map((link) => (
98+
<Menu.Item key={link.label} onClick={() => onNavClick(link.path)}>
99+
{link.label}
100+
</Menu.Item>
101+
))}
102+
</Menu.Dropdown>
103+
</Menu>
77104
</Group>
78105
);
79106
}

‎app/src/components/home-header/HeaderContent.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ interface HeaderContentProps {
1515
onClose: () => void;
1616
navLinks: NavLink[];
1717
aboutLinks: NavLink[];
18+
learnLinks: NavLink[];
1819
onNavClick: (path?: string) => void;
1920
}
2021

@@ -24,6 +25,7 @@ export default function HeaderContent({
2425
onClose,
2526
navLinks,
2627
aboutLinks,
28+
learnLinks,
2729
onNavClick,
2830
}: HeaderContentProps) {
2931
return (
@@ -41,7 +43,12 @@ export default function HeaderContent({
4143
<Group justify="space-between" h="100%">
4244
<Group>
4345
<HeaderLogo />
44-
<DesktopNavigation navLinks={navLinks} aboutLinks={aboutLinks} onNavClick={onNavClick} />
46+
<DesktopNavigation
47+
navLinks={navLinks}
48+
aboutLinks={aboutLinks}
49+
learnLinks={learnLinks}
50+
onNavClick={onNavClick}
51+
/>
4552
</Group>
4653

4754
<Group visibleFrom="lg">
@@ -54,6 +61,7 @@ export default function HeaderContent({
5461
onClose={onClose}
5562
navLinks={navLinks}
5663
aboutLinks={aboutLinks}
64+
learnLinks={learnLinks}
5765
onNavClick={onNavClick}
5866
/>
5967
</Group>

‎app/src/components/home-header/MobileMenu.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ interface MobileMenuProps {
1313
onClose: () => void;
1414
navLinks: NavLink[];
1515
aboutLinks: NavLink[];
16+
learnLinks: NavLink[];
1617
onNavClick: (path?: string) => void;
1718
}
1819

@@ -22,6 +23,7 @@ export default function MobileMenu({
2223
onClose,
2324
navLinks,
2425
aboutLinks,
26+
learnLinks,
2527
onNavClick,
2628
}: MobileMenuProps) {
2729
return (
@@ -95,6 +97,37 @@ export default function MobileMenu({
9597
</Anchor>
9698
))}
9799
</Box>
100+
101+
<Divider color={colors.border.dark} />
102+
103+
{/* Learn Section */}
104+
<Box>
105+
<Text
106+
c={colors.text.inverse}
107+
fw={typography.fontWeight.medium}
108+
size="sm"
109+
mb={spacing.xs}
110+
style={{ fontFamily: typography.fontFamily.primary }}
111+
>
112+
Learn
113+
</Text>
114+
<Stack gap={spacing.xs} pl={spacing.md}>
115+
{learnLinks.map((link) => (
116+
<Anchor
117+
key={link.label}
118+
c={colors.text.inverse}
119+
variant="subtle"
120+
td="none"
121+
fw={typography.fontWeight.normal}
122+
size="sm"
123+
onClick={() => onNavClick(link.path)}
124+
style={{ fontFamily: typography.fontFamily.primary }}
125+
>
126+
{link.label}
127+
</Anchor>
128+
))}
129+
</Stack>
130+
</Box>
98131
</Stack>
99132
</Drawer>
100133
</>

‎app/src/components/shared/HomeHeader.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ export default function HeaderNavigation() {
1919
{ label: 'Supporters', path: `/${countryId}/supporters` },
2020
];
2121

22+
const learnLinks: NavLink[] = [{ label: 'API', path: `/${countryId}/api` }];
23+
2224
const navLinks: NavLink[] = [{ label: 'Donate', path: `/${countryId}/donate` }];
2325

2426
const handleNavClick = (path?: string) => {
@@ -61,6 +63,7 @@ export default function HeaderNavigation() {
6163
onClose={close}
6264
navLinks={navLinks}
6365
aboutLinks={aboutLinks}
66+
learnLinks={learnLinks}
6467
onNavClick={handleNavClick}
6568
/>
6669
</div>

‎app/src/tests/fixtures/components/home-header/HeaderMocks.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,15 @@ export const MOCK_ABOUT_LINKS = [
55
{ label: 'Supporters', path: '/us/supporters' },
66
];
77

8+
export const MOCK_LEARN_LINKS = [{ label: 'API', path: '/us/api' }];
9+
810
export const MOCK_HEADER_PROPS = {
911
opened: false,
1012
onOpen: () => {},
1113
onClose: () => {},
1214
navLinks: MOCK_NAV_LINKS,
1315
aboutLinks: MOCK_ABOUT_LINKS,
16+
learnLinks: MOCK_LEARN_LINKS,
1417
onNavClick: () => {},
1518
} as const;
1619

‎app/src/tests/fixtures/components/home/HomeMocks.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ export const MOCK_ABOUT_LINKS = [
55
{ label: 'Supporters', path: '/us/supporters' },
66
];
77

8+
export const MOCK_LEARN_LINKS = [{ label: 'API', path: '/us/api' }];
9+
810
export const EXPECTED_TEXT = {
911
US: {
1012
HERO_TITLE: 'Computing public policy for everyone',

‎app/src/tests/unit/components/home-header/DesktopNavigation.test.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { renderWithCountry, screen } from '@test-utils';
22
import { describe, expect, test, vi } from 'vitest';
33
import DesktopNavigation from '@/components/home-header/DesktopNavigation';
4-
import { MOCK_ABOUT_LINKS, MOCK_NAV_LINKS } from '@/tests/fixtures/components/home/HomeMocks';
4+
import {
5+
MOCK_ABOUT_LINKS,
6+
MOCK_LEARN_LINKS,
7+
MOCK_NAV_LINKS,
8+
} from '@/tests/fixtures/components/home/HomeMocks';
59

610
describe('DesktopNavigation', () => {
711
test('given nav links then displays nav items', () => {
@@ -13,6 +17,7 @@ describe('DesktopNavigation', () => {
1317
<DesktopNavigation
1418
navLinks={MOCK_NAV_LINKS}
1519
aboutLinks={MOCK_ABOUT_LINKS}
20+
learnLinks={MOCK_LEARN_LINKS}
1621
onNavClick={onNavClick}
1722
/>,
1823
'us'
@@ -33,6 +38,7 @@ describe('DesktopNavigation', () => {
3338
<DesktopNavigation
3439
navLinks={MOCK_NAV_LINKS}
3540
aboutLinks={MOCK_ABOUT_LINKS}
41+
learnLinks={MOCK_LEARN_LINKS}
3642
onNavClick={onNavClick}
3743
/>,
3844
'us'
@@ -55,6 +61,7 @@ describe('DesktopNavigation', () => {
5561
<DesktopNavigation
5662
navLinks={MOCK_NAV_LINKS}
5763
aboutLinks={MOCK_ABOUT_LINKS}
64+
learnLinks={MOCK_LEARN_LINKS}
5865
onNavClick={onNavClick}
5966
/>,
6067
'us'
@@ -76,6 +83,7 @@ describe('DesktopNavigation', () => {
7683
<DesktopNavigation
7784
navLinks={MOCK_NAV_LINKS}
7885
aboutLinks={MOCK_ABOUT_LINKS}
86+
learnLinks={MOCK_LEARN_LINKS}
7987
onNavClick={onNavClick}
8088
/>,
8189
'us'
@@ -98,6 +106,7 @@ describe('DesktopNavigation', () => {
98106
<DesktopNavigation
99107
navLinks={MOCK_NAV_LINKS}
100108
aboutLinks={MOCK_ABOUT_LINKS}
109+
learnLinks={MOCK_LEARN_LINKS}
101110
onNavClick={onNavClick}
102111
/>,
103112
'us'

‎app/src/tests/unit/components/home-header/HeaderContent.test.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { describe, expect, test, vi } from 'vitest';
33
import HeaderContent from '@/components/home-header/HeaderContent';
44
import {
55
MOCK_ABOUT_LINKS,
6+
MOCK_LEARN_LINKS,
67
MOCK_NAV_LINKS,
78
} from '@/tests/fixtures/components/home-header/HeaderMocks';
89

@@ -21,6 +22,7 @@ describe('HeaderContent', () => {
2122
onClose={onClose}
2223
navLinks={MOCK_NAV_LINKS}
2324
aboutLinks={MOCK_ABOUT_LINKS}
25+
learnLinks={MOCK_LEARN_LINKS}
2426
onNavClick={onNavClick}
2527
/>,
2628
'us'
@@ -45,6 +47,7 @@ describe('HeaderContent', () => {
4547
onClose={onClose}
4648
navLinks={MOCK_NAV_LINKS}
4749
aboutLinks={MOCK_ABOUT_LINKS}
50+
learnLinks={MOCK_LEARN_LINKS}
4851
onNavClick={onNavClick}
4952
/>,
5053
'us'
@@ -70,6 +73,7 @@ describe('HeaderContent', () => {
7073
onClose={onClose}
7174
navLinks={MOCK_NAV_LINKS}
7275
aboutLinks={MOCK_ABOUT_LINKS}
76+
learnLinks={MOCK_LEARN_LINKS}
7377
onNavClick={onNavClick}
7478
/>,
7579
'us'

‎app/src/tests/unit/components/home-header/MobileMenu.test.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { beforeEach, describe, expect, test, vi } from 'vitest';
33
import MobileMenu from '@/components/home-header/MobileMenu';
44
import {
55
MOCK_ABOUT_LINKS,
6+
MOCK_LEARN_LINKS,
67
MOCK_NAV_LINKS,
78
} from '@/tests/fixtures/components/home-header/HeaderMocks';
89

@@ -25,6 +26,7 @@ describe('MobileMenu', () => {
2526
onClose={onClose}
2627
navLinks={MOCK_NAV_LINKS}
2728
aboutLinks={MOCK_ABOUT_LINKS}
29+
learnLinks={MOCK_LEARN_LINKS}
2830
onNavClick={onNavClick}
2931
/>,
3032
'us'
@@ -52,6 +54,7 @@ describe('MobileMenu', () => {
5254
onClose={onClose}
5355
navLinks={MOCK_NAV_LINKS}
5456
aboutLinks={MOCK_ABOUT_LINKS}
57+
learnLinks={MOCK_LEARN_LINKS}
5558
onNavClick={onNavClick}
5659
/>,
5760
'us'
@@ -79,6 +82,7 @@ describe('MobileMenu', () => {
7982
onClose={onClose}
8083
navLinks={MOCK_NAV_LINKS}
8184
aboutLinks={MOCK_ABOUT_LINKS}
85+
learnLinks={MOCK_LEARN_LINKS}
8286
onNavClick={onNavClick}
8387
/>,
8488
'us'
@@ -104,6 +108,7 @@ describe('MobileMenu', () => {
104108
onClose={onClose}
105109
navLinks={MOCK_NAV_LINKS}
106110
aboutLinks={MOCK_ABOUT_LINKS}
111+
learnLinks={MOCK_LEARN_LINKS}
107112
onNavClick={onNavClick}
108113
/>,
109114
'us'
@@ -130,6 +135,7 @@ describe('MobileMenu', () => {
130135
onClose={onClose}
131136
navLinks={MOCK_NAV_LINKS}
132137
aboutLinks={MOCK_ABOUT_LINKS}
138+
learnLinks={MOCK_LEARN_LINKS}
133139
onNavClick={onNavClick}
134140
/>,
135141
'us'
@@ -157,6 +163,7 @@ describe('MobileMenu', () => {
157163
onClose={onClose}
158164
navLinks={MOCK_NAV_LINKS}
159165
aboutLinks={MOCK_ABOUT_LINKS}
166+
learnLinks={MOCK_LEARN_LINKS}
160167
onNavClick={onNavClick}
161168
/>,
162169
'us'

0 commit comments

Comments
 (0)