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:
parent
43cf9ad7d6
commit
c1080990ac
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue