Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | import { Link, useLocation } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import { AppBar, Toolbar, Button, Box } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import ViewModeToggle from '@/components/settings/ViewModeToggle/ViewModeToggle';
import ThemeToggle from '@/components/settings/ThemeToggle/ThemeToggle';
import LanguageSelector from '@/components/settings/LanguageSelector/LanguageSelector';
import FontSizeToggle from '@/components/settings/FontSizeToggle/FontSizeToggle';
import DataSourceToggle from '@/components/settings/DataSourceToggle/DataSourceToggle';
function Navigation() {
const theme = useTheme();
const location = useLocation();
return (
<AppBar
position="fixed"
component="nav"
aria-label="Main navigation"
sx={{
backgroundColor: theme.palette.navigation.background,
borderBottom: `2px solid ${theme.palette.navigation.active}`,
}}
>
<Toolbar>
<Button
component={Link}
to="/"
variant="outlined"
aria-label="Hacker News Home"
sx={{
fontWeight: 'bold',
fontSize: '1.25rem',
letterSpacing: 2,
color: theme.palette.navigation.text,
borderColor: theme.palette.navigation.text,
marginRight: 4,
}}
>
HN
</Button>
<Box sx={{ flexGrow: 1, display: 'flex', gap: 1 }}>
<Button
component={Link}
to="/"
data-testid="nav-new-posts"
aria-current={location.pathname === '/' ? 'page' : undefined}
sx={{
color: location.pathname === '/' ? theme.palette.navigation.active : theme.palette.navigation.text,
fontWeight: location.pathname === '/' ? 700 : 500,
'&:hover': {
backgroundColor: theme.palette.navigation.hover,
color: theme.palette.navigation.active,
},
}}
>
<FormattedMessage id="navigation.newPosts" />
</Button>
<Button
component={Link}
to="/top"
data-testid="nav-top-posts"
aria-current={location.pathname === '/top' ? 'page' : undefined}
sx={{
color: location.pathname === '/top' ? theme.palette.navigation.active : theme.palette.navigation.text,
fontWeight: location.pathname === '/top' ? 700 : 500,
'&:hover': {
backgroundColor: theme.palette.navigation.hover,
color: theme.palette.navigation.active,
},
}}
>
<FormattedMessage id="navigation.topPosts" />
</Button>
</Box>
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }} aria-label="Settings">
<ViewModeToggle />
<FontSizeToggle />
<DataSourceToggle />
<LanguageSelector />
<ThemeToggle />
</Box>
</Toolbar>
</AppBar>
);
}
export default Navigation;
|