Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update header to allow homepage only and add to the login page #71

Merged
merged 1 commit into from
Jan 5, 2025
Merged

update header to allow homepage only and add to the login page #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/admin/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const metadata: Metadata = {
export default function Login() {
return (
<>
<Header noCrumbs={true} />
<Header noCrumbs={true} homeOnly={true} />

<main id="main-content">
<LoginForm />
Expand Down
24 changes: 21 additions & 3 deletions src/components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ import {
IconChevronLeft,
IconGlass,
IconMovie,
IconHome,
} from "@tabler/icons-react";
import playConfetti from "@/components/playconfetti";
import { IconMoon, IconSun } from "@tabler/icons-react";
import cx from "clsx";
import classes from "@/styles/togglecolour.module.css";
import WhiskyJournal from "./whiskyjournal";

interface BreadcrumbItem {
title: string;
Expand All @@ -34,17 +34,19 @@ interface HeaderProps {
game?: boolean; // Back button for our games pages
whiskyJournal?: boolean; // Back button for our whisky journal pages
filmList?: boolean; // Back button for our film list pages
homeOnly?: boolean; // Just show the home button
}

export default function Header({
crumbs,
noCrumbs = false,
noCrumbs = false, // This needs to be set to true if you want to use any of the other buttons
game = false,
whiskyJournal = false,
filmList = false,
homeOnly = false,
}: HeaderProps) {
const mainJustify =
noCrumbs && !game && !whiskyJournal && !filmList
noCrumbs && !game && !whiskyJournal && !filmList && !homeOnly
? "flex-end"
: "space-between"; // This keeps the icon buttons on the right when there's no crumbs
const { setColorScheme } = useMantineColorScheme();
Expand All @@ -67,6 +69,22 @@ export default function Header({
</Group>
)}

{homeOnly && (
<Tooltip label="Back to our homepage" openDelay={250}>
<ActionIcon
variant="default"
component="a"
href="/"
size="xl"
aria-label="Back to our homepage"
style={{ width: 70 }}
>
<IconChevronLeft />
<IconHome />
</ActionIcon>
</Tooltip>
)}

{game && (
<Tooltip label="Back to our games list" openDelay={250}>
<ActionIcon
Expand Down
17 changes: 17 additions & 0 deletions tests/public/01_navigation.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,3 +64,20 @@ test("Navigate to the decision maker page", async ({ page }) => {
await expect(page).toHaveURL("/");
await expect(page).toHaveTitle("Almost Yellow");
});

test("Navigate to the login page and back", async ({ page }) => {
await page.goto("/");

await page.getByRole("link", { name: "Admin stuff" }).click();
await expect(page).toHaveURL(
"/admin/login?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fadmin",
);
await expect(page).toHaveTitle("Login | Almost Yellow");
await expect(page.locator("h1")).toContainText(
"Want to access the good stuff?",
);

await page.getByRole("link", { name: "Back to our homepage" }).click();
await expect(page).toHaveURL("/");
await expect(page).toHaveTitle("Almost Yellow");
});
Loading