prometheus/docs
1
0
Fork 0
mirror of https://github.com/prometheus/docs.git synced 2026-02-05 06:45:01 +01:00
Code Issues Releases Activity

Use dropdown instead of AppShell.Navbar for mobile nav

Browse Source 
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz
2025-05-24 17:09:28 +02:00
parent 3a7ea2b511
commit 902b535492
2 changed files with 34 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/layout.tsx
View File

@@ -25,7 +25,6 @@ import { Header } from "@/components/Header";
import { theme } from "@/theme";
import "@docsearch/css";
import { useDisclosure } from "@mantine/hooks";
const interFont = Inter({
variable: "--font-inter",
@@ -40,18 +39,11 @@ const latoFont = Lato({
display: "swap",
});
// export const metadata: Metadata = {
// title: "Create Next App",
// description: "Generated by create next app",
// };
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const [burgerOpened, { toggle: toggleBurger }] = useDisclosure();
return (
<html
lang="en"
@@ -63,15 +55,8 @@ export default function RootLayout({
</head>
<body>
<MantineProvider theme={theme}>
<AppShell
header={{ height: "var(--header-height)" }}
navbar={{
width: 300,
breakpoint: "sm",
collapsed: { desktop: true, mobile: !burgerOpened },
}}
>
<Header burgerOpened={burgerOpened} toggleBurger={toggleBurger} />
<AppShell header={{ height: "var(--header-height)" }}>
<Header />
<AppShell.Main>
<Container size="xl" mt="xl" px={{ base: "md", xs: "xl" }}>

51
src/components/Header.tsx
View File

@@ -7,6 +7,7 @@ import {
TextInput,
ActionIcon,
AppShell,
Popover,
} from "@mantine/core";
import Image from "next/image";
import { IconSearch } from "@tabler/icons-react";
@@ -18,6 +19,7 @@ import { ThemeSelector } from "./ThemeSelector";
import { usePathname } from "next/navigation";
import { spotlight } from "@mantine/spotlight";
import SpotlightSearch from "./SpotlightSearch";
import { useDisclosure } from "@mantine/hooks";
const links = [
{
@@ -31,14 +33,9 @@ const links = [
{ link: "/blog", label: "Blog" },
];
export const Header = ({
burgerOpened,
toggleBurger,
}: {
burgerOpened: boolean;
toggleBurger: () => void;
}) => {
export const Header = () => {
const path = usePathname();
const [burgerOpened, { toggle: toggleBurger }] = useDisclosure(false);
const items = links.map((link) => (
<Link
@@ -48,6 +45,12 @@ export const Header = ({
aria-current={
path.startsWith(link.activeBasePath || link.link) ? "page" : undefined
}
// Close burger menu when clicking a link.
onClick={() => {
if (burgerOpened) {
toggleBurger();
}
}}
>
{link.label}
</Link>
@@ -160,24 +163,34 @@ export const Header = ({
/>
{actionIcons}
</Group>
<Burger
<Popover
opened={burgerOpened}
onClick={toggleBurger}
color="gray.3"
size="sm"
hiddenFrom="sm"
/>
onChange={toggleBurger}
position="bottom"
withArrow
shadow="md"
>
<Popover.Target>
<Burger
opened={burgerOpened}
onClick={toggleBurger}
color="gray.5"
size="sm"
hiddenFrom="sm"
/>
</Popover.Target>
<Popover.Dropdown>
{items}
<Group m="xs" gap="xs">
{actionIcons}
</Group>
</Popover.Dropdown>
</Popover>
</Group>
</div>
</Container>
<SpotlightSearch />
</AppShell.Header>
<AppShell.Navbar p="lg">
{items}
<Group m="xs" gap="xs">
{actionIcons}
</Group>
</AppShell.Navbar>
</>
);
};