Bring back documentation link in the form of an action button

IMO this looks nicer than adding it as a normal page nav link as in
https://github.com/prometheus/prometheus/pull/14878

Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz 2024-09-09 18:55:32 +02:00
parent 43cf9ad7d6
commit c1080990ac
2 changed files with 24 additions and 12 deletions

View File

@ -6,6 +6,7 @@ import classes from "./App.module.css";
import PrometheusLogo from "./images/prometheus-logo.svg";
import {
ActionIcon,
AppShell,
Box,
Burger,
@ -22,6 +23,7 @@ import { useDisclosure } from "@mantine/hooks";
import {
IconBell,
IconBellFilled,
IconBook,
IconChevronDown,
IconChevronRight,
IconCloudDataConnection,
@ -306,17 +308,24 @@ function App() {
))}
</Menu.Dropdown>
</Menu>
</>
);
{/* <Button
const navActionIcons = (
<>
<ThemeSelector />
<SettingsMenu />
<ActionIcon
component="a"
href="https://prometheus.io/docs/prometheus/latest/getting_started/"
className={classes.link}
leftSection={<IconHelp style={navIconStyle} />}
target="_blank"
px={navLinkXPadding}
color="gray"
title="Documentation"
aria-label="Documentation"
size={32}
>
Help
</Button> */}
<IconBook size={20} />
</ActionIcon>
</>
);
@ -359,9 +368,8 @@ function App() {
{navLinks}
</Group>
</Group>
<Group visibleFrom="xs" wrap="nowrap">
<ThemeSelector />
<SettingsMenu />
<Group visibleFrom="xs" wrap="nowrap" gap="xs">
{navActionIcons}
</Group>
</Group>
<Burger
@ -377,8 +385,7 @@ function App() {
<AppShell.Navbar py="md" px={4} bg="rgb(65, 73, 81)" c="#fff">
{navLinks}
<Group mt="md" hiddenFrom="xs" justify="center">
<ThemeSelector />
<SettingsMenu />
{navActionIcons}
</Group>
</AppShell.Navbar>

View File

@ -18,7 +18,12 @@ const SettingsMenu: FC = () => {
return (
<Popover position="bottom" withArrow shadow="md">
<Popover.Target>
<ActionIcon color="gray" aria-label="Settings" size={32}>
<ActionIcon
color="gray"
title="Settings"
aria-label="Settings"
size={32}
>
<IconSettings size={20} />
</ActionIcon>
</Popover.Target>