Skip to content

Commit c62f85d

Browse files
dbanksdesign0618hbuchelcalebpollman
authored
New docs layout and menu (#1948)
Co-authored-by: MJ <[email protected]> Co-authored-by: Heather Buchel <[email protected]> Co-authored-by: Caleb Pollman <[email protected]>
1 parent fa7babd commit c62f85d

File tree

19 files changed

+800
-642
lines changed

19 files changed

+800
-642
lines changed

‎docs/src/components/Layout/ColorModeSwitcher.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import {
2+
ToggleButton,
3+
ToggleButtonGroup,
4+
VisuallyHidden,
5+
ColorMode,
6+
} from '@aws-amplify/ui-react';
7+
import { MdWbSunny, MdBedtime, MdTonality } from 'react-icons/md';
8+
9+
export const ColorModeSwitcher = ({ colorMode, setColorMode }) => {
10+
return (
11+
<ToggleButtonGroup
12+
value={colorMode}
13+
size="small"
14+
onChange={(value: ColorMode) => setColorMode(value)}
15+
isExclusive
16+
isSelectionRequired
17+
className="color-switcher"
18+
>
19+
<ToggleButton value="light" title="Light mode">
20+
<VisuallyHidden>Light mode</VisuallyHidden>
21+
<MdWbSunny className="docs-header-icon" />
22+
</ToggleButton>
23+
<ToggleButton value="dark" title="Dark mode">
24+
<VisuallyHidden>Dark mode</VisuallyHidden>
25+
<MdBedtime className="docs-header-icon" />
26+
</ToggleButton>
27+
<ToggleButton value="system" title="System preferences">
28+
<VisuallyHidden>System preference</VisuallyHidden>
29+
<MdTonality className="docs-header-icon" />
30+
</ToggleButton>
31+
</ToggleButtonGroup>
32+
);
33+
};

‎docs/src/components/Layout/FrameworkChooser.tsx‎

Lines changed: 43 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,56 @@
1-
import {
2-
Image,
3-
ToggleButton,
4-
ToggleButtonGroup,
5-
VisuallyHidden,
6-
} from '@aws-amplify/ui-react';
1+
import { Flex, Image, Button, useTheme } from '@aws-amplify/ui-react';
72

3+
import { capitalize } from 'lodash';
84
import { useCustomRouter } from '@/components/useCustomRouter';
5+
import Link from 'next/link';
96
import { FRAMEWORKS } from '@/data/frameworks';
107

11-
export const FrameworkChooser = ({ platform }) => {
12-
const { replace, pathname } = useCustomRouter();
8+
interface FrameworkLinkProps extends FrameworkChooserProps {
9+
framework: string;
10+
}
1311

14-
const chooseFramework = (platform) => {
15-
const { hash } = window.location;
16-
replace(
17-
{
18-
hash,
19-
pathname: pathname === '/' ? '/[platform]' : pathname,
20-
query: { platform },
21-
},
22-
// `as?` prop isn't needed when URL is already provided
23-
undefined,
24-
{
25-
// Scroll to top if a new page
26-
scroll: hash ? false : true,
27-
}
28-
);
12+
const platformPath = '[platform]';
2913

30-
// Because layout may change, explicitly tell the browser to scroll to that anchor
31-
// e.g. <a id="#variation" />
32-
if (hash) {
33-
document.getElementById(hash.slice(1)).scrollIntoView();
34-
}
35-
};
14+
const FrameworkLink = ({ framework, onClick }: FrameworkLinkProps) => {
15+
const { pathname, query } = useCustomRouter();
3616

17+
const isCurrent = query.platform === framework;
18+
const classNames = `docs-framework-link ${isCurrent ? 'current' : ''}`;
19+
const href = pathname.includes(platformPath)
20+
? pathname.replace(platformPath, framework)
21+
: `/${framework}`;
22+
23+
return (
24+
<Link href={href} passHref>
25+
<Button as="a" size="small" className={classNames} onClick={onClick}>
26+
<Image
27+
alt={framework}
28+
height="1.25rem"
29+
width="1.25rem"
30+
display="block"
31+
src={`/svg/integrations/${framework}.svg`}
32+
/>
33+
{capitalize(framework)}
34+
</Button>
35+
</Link>
36+
);
37+
};
38+
39+
interface FrameworkChooserProps {
40+
onClick: () => void;
41+
}
42+
43+
export const FrameworkChooser = ({ onClick }: FrameworkChooserProps) => {
44+
const { tokens } = useTheme();
3745
return (
38-
<ToggleButtonGroup
39-
value={platform}
40-
size="small"
41-
onChange={(value: string) => {
42-
chooseFramework(value);
43-
}}
44-
isExclusive
45-
isSelectionRequired
46-
>
46+
<Flex direction="column" gap={tokens.space.xs}>
4747
{FRAMEWORKS.map((framework) => (
48-
<ToggleButton
48+
<FrameworkLink
4949
key={framework}
50-
value={framework}
51-
size="small"
52-
title={framework}
53-
padding={{ base: '4px', medium: undefined }}
54-
>
55-
<VisuallyHidden>{framework}</VisuallyHidden>
56-
<Image
57-
alt=""
58-
height={{ base: '1.5rem', medium: '1rem' }}
59-
display="block"
60-
src={`/svg/integrations/${framework}.svg`}
61-
/>
62-
</ToggleButton>
50+
framework={framework}
51+
onClick={onClick}
52+
/>
6353
))}
64-
</ToggleButtonGroup>
54+
</Flex>
6555
);
6656
};

‎docs/src/components/Layout/Header.tsx‎

Lines changed: 37 additions & 176 deletions
Original file line numberDiff line numberDiff line change
@@ -1,180 +1,41 @@
1-
import * as React from 'react';
2-
3-
import {
4-
Button,
5-
ColorMode,
6-
Divider,
7-
Flex,
8-
Link,
9-
ToggleButton,
10-
ToggleButtonGroup,
11-
View,
12-
VisuallyHidden,
13-
} from '@aws-amplify/ui-react';
14-
import {
15-
MdBedtime,
16-
MdClose,
17-
MdMenu,
18-
MdOpenInNew,
19-
MdTonality,
20-
MdWbSunny,
21-
} from 'react-icons/md';
22-
23-
import { FrameworkChooser } from './FrameworkChooser';
24-
import LinkButton from './LinkButton';
25-
import { Logo } from '@/components/Logo';
26-
import NextLink from 'next/link';
27-
import { SecondaryNav } from './SecondaryNav';
28-
import { useCustomRouter } from '@/components/useCustomRouter';
29-
30-
const NavLink = ({
31-
href,
32-
children,
33-
isExternal = false,
34-
onClick,
35-
}: {
36-
href: string;
37-
children: React.ReactElement;
38-
isExternal?: boolean;
39-
onClick?: React.MouseEventHandler<HTMLAnchorElement>;
1+
import { Flex, Image } from '@aws-amplify/ui-react';
2+
3+
import { ColorModeSwitcher } from './ColorModeSwitcher';
4+
import { Sidebar } from './Sidebar';
5+
import { LogoLink } from './LogoLink';
6+
import { MenuButton } from './MenuButton';
7+
8+
export const Header = ({
9+
expanded,
10+
setExpanded,
11+
colorMode,
12+
setColorMode,
13+
platform,
4014
}) => {
41-
const { pathname } = useCustomRouter();
42-
const pathnameHeader = pathname.split('/')[2];
43-
const hrefHeader = href.split('/')[2];
44-
const isCurrent = pathnameHeader === hrefHeader && href !== `/`;
45-
const className = `docs-nav-link ${isCurrent ? 'current' : ''}`;
46-
47-
if (isExternal) {
48-
return (
49-
<Link isExternal href={href} className={className}>
50-
{children}
51-
</Link>
52-
);
53-
}
54-
return (
55-
<NextLink href={href} passHref>
56-
<LinkButton href={href} classNames={className} onClick={onClick}>
57-
{children}
58-
</LinkButton>
59-
</NextLink>
60-
);
61-
};
62-
63-
const Nav = (props) => (
64-
<Flex
65-
as="nav"
66-
aria-label="Main navigation"
67-
className="docs-nav"
68-
alignItems="center"
69-
gap="0"
70-
grow="1"
71-
>
72-
<NavLink
73-
{...props}
74-
href={`/${props.platform}/getting-started/installation`}
75-
>
76-
Getting started
77-
</NavLink>
78-
<NavLink {...props} href={`/${props.platform}/components`}>
79-
Components
80-
</NavLink>
81-
<NavLink {...props} href={`/${props.platform}/theming`}>
82-
Theming
83-
</NavLink>
84-
<NavLink {...props} href={`/${props.platform}/guides`}>
85-
Guides
86-
</NavLink>
87-
<Divider orientation="vertical" />
88-
<NavLink {...props} isExternal href="https://docs.amplify.aws">
89-
Amplify docs <MdOpenInNew />
90-
</NavLink>
91-
</Flex>
92-
);
93-
94-
const Settings = ({ platform, setColorMode, colorMode }) => (
95-
<Flex className="docs-settings" justifyContent="center" alignItems="center">
96-
<FrameworkChooser platform={platform} />
97-
<ColorModeSwitcher setColorMode={setColorMode} colorMode={colorMode} />
98-
</Flex>
99-
);
100-
101-
const ColorModeSwitcher = ({ colorMode, setColorMode }) => {
102-
return (
103-
<ToggleButtonGroup
104-
value={colorMode}
105-
size="small"
106-
onChange={(value: ColorMode) => setColorMode(value)}
107-
isExclusive
108-
isSelectionRequired
109-
className="color-switcher"
110-
>
111-
<ToggleButton value="light" title="Light mode">
112-
<VisuallyHidden>Light mode</VisuallyHidden>
113-
<MdWbSunny />
114-
</ToggleButton>
115-
<ToggleButton value="dark" title="Dark mode">
116-
<VisuallyHidden>Dark mode</VisuallyHidden>
117-
<MdBedtime />
118-
</ToggleButton>
119-
<ToggleButton value="system" title="System preferences">
120-
<VisuallyHidden>System preference</VisuallyHidden>
121-
<MdTonality />
122-
</ToggleButton>
123-
</ToggleButtonGroup>
124-
);
125-
};
126-
127-
export const Header = ({ platform, colorMode, setColorMode }) => {
128-
const [expanded, setExpanded] = React.useState(false);
12915
return (
130-
<>
131-
<header className={`docs-header ${expanded ? 'expanded' : ''}`}>
132-
<Button
133-
className="docs-header-menu-button"
134-
onClick={() => setExpanded(!expanded)}
135-
ariaLabel="Docs header menu button"
136-
>
137-
{expanded ? (
138-
<MdClose style={{ width: '1.5rem', height: '1.5rem' }} />
139-
) : (
140-
<MdMenu style={{ width: '1.5rem', height: '1.5rem' }} />
141-
)}
142-
</Button>
143-
144-
<NavLink href={`/`}>
145-
<span className="docs-logo-link">
146-
<VisuallyHidden>Amplify UI Home</VisuallyHidden>
147-
<Logo />
148-
</span>
149-
</NavLink>
150-
151-
<Nav platform={platform} />
152-
153-
<Settings
154-
colorMode={colorMode}
155-
setColorMode={setColorMode}
156-
platform={platform}
157-
/>
158-
</header>
159-
{expanded ? (
160-
<View className="docs-header-mobile-nav">
161-
<Flex
162-
className="color-switcher__wrapper"
163-
justifyContent="center"
164-
alignItems="center"
165-
>
166-
<ColorModeSwitcher
167-
setColorMode={setColorMode}
168-
colorMode={colorMode}
169-
/>
170-
</Flex>
171-
172-
<Nav onClick={() => setExpanded(false)} platform={platform} />
173-
<nav aria-label="Section navigation" className="docs-sidebar-nav">
174-
<SecondaryNav onClick={() => setExpanded(false)} />
175-
</nav>
176-
</View>
177-
) : null}
178-
</>
16+
<Flex as="header" className="docs-header">
17+
<div className="docs-header-bg" />
18+
<MenuButton expanded={expanded} setExpanded={setExpanded} />
19+
20+
<Sidebar
21+
expanded={expanded}
22+
setExpanded={setExpanded}
23+
platform={platform}
24+
/>
25+
26+
<LogoLink platform={platform} />
27+
28+
<Image
29+
alt={platform}
30+
height="1.5rem"
31+
width="1.5rem"
32+
display="block"
33+
src={`/svg/integrations/${platform}.svg`}
34+
/>
35+
36+
<Flex flex="1" justifyContent="flex-end">
37+
<ColorModeSwitcher colorMode={colorMode} setColorMode={setColorMode} />
38+
</Flex>
39+
</Flex>
17940
);
18041
};

‎docs/src/components/Layout/LinkButton.tsx‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

0 commit comments

Comments
 (0)