import React, { ReactNode } from 'react';
import { Box, Line } from 'folds';
import { useAtom } from 'jotai';
import { bookmarksPanelAtom } from '../../state/bookmarksPanel';
import { BookmarksPanel } from '../../features/bookmarks/BookmarksPanel';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
type ClientLayoutProps = {
nav: ReactNode;
children: ReactNode;
};
export function ClientLayout({ nav, children }: ClientLayoutProps) {
const [bookmarksOpen, setBookmarksOpen] = useAtom(bookmarksPanelAtom);
const screenSize = useScreenSizeContext();
return (
<>
{
(e.currentTarget as HTMLElement).style.top = '0';
}}
onBlur={(e) => {
(e.currentTarget as HTMLElement).style.top = '-40px';
}}
// #185 P1: following the fragment left focus on (the target
// wasn't focusable), so screen readers announced nothing and the URL got
// a stray #main-content. Move focus to explicitly instead.
onClick={(e) => {
e.preventDefault();
document.getElementById('main-content')?.focus();
}}
>
Skip to main content
{nav}
{children}
{bookmarksOpen && (
<>
{screenSize === ScreenSize.Desktop && (
)}
setBookmarksOpen(false)} />
)}
);
}