Skip to content

Commit

Permalink
fix layout and test
Browse files Browse the repository at this point in the history
  • Loading branch information
edmundhung committed Mar 16, 2024
1 parent eae35cb commit 296b64d
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 4 deletions.
10 changes: 7 additions & 3 deletions app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import chevronUpIcon from '~/assets/chevron-up.svg';
import chevronRightIcon from '~/assets/chevron-right.svg';
import remixLetterLogo from '~/assets/remix-letter-light.svg';
import { Link, useLocation } from '@remix-run/react';
import { Fragment, useLayoutEffect, useRef } from 'react';
import { Fragment, useEffect, useLayoutEffect, useRef } from 'react';

export interface Menu {
title: string;
Expand All @@ -12,6 +12,9 @@ export interface Menu {
}>;
}

export const useSafeLayoutEffect =
typeof document === 'undefined' ? useEffect : useLayoutEffect;

export function Breadcrumbs({
locationKey,
trails,
Expand All @@ -23,7 +26,7 @@ export function Breadcrumbs({
}) {
const detailsRef = useRef<HTMLDetailsElement>(null);

useLayoutEffect(() => {
useSafeLayoutEffect(() => {
if (detailsRef.current) {
detailsRef.current.open = false;
}
Expand All @@ -32,6 +35,7 @@ export function Breadcrumbs({
return (
<>
<details
id="breadcrumbs"
ref={detailsRef}
className="group peer h-12 border-t bg-white open:bg-neutral-100 hover:bg-neutral-100 lg:hidden"
>
Expand Down Expand Up @@ -62,7 +66,7 @@ export function Breadcrumbs({
</div>
</summary>
</details>
<div className="fixed inset-x-0 bottom-12 hidden max-h-[calc(100vh-3rem)] flex-1 overflow-y-auto border-t bg-white peer-open:block lg:relative lg:inset-x-auto lg:bottom-auto lg:flex lg:max-h-none">
<div className="fixed inset-x-0 bottom-12 top-0 hidden max-h-[calc(100vh-3rem)] flex-1 overflow-y-auto border-t bg-white peer-open:block lg:relative lg:inset-x-auto lg:bottom-auto lg:flex lg:max-h-none">
{children}
</div>
</>
Expand Down
7 changes: 7 additions & 0 deletions app/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,10 @@
summary.marker\:content-none::-webkit-details-marker {
display: none;
}

/**
* To prevent the background scrolling when the navigation overlay is opened
*/
html:has(details#breadcrumbs[open]) {
overflow: hidden;
}
2 changes: 1 addition & 1 deletion tests/e2e/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ test('shows the package name', async ({ page }) => {

const title = page.getByRole('heading', {
name: 'remix-cloudflare-template',
level: 2,
level: 1,
});

await expect(title).toBeVisible();
Expand Down

0 comments on commit 296b64d

Please sign in to comment.