twotalesanimation
40b99f3add
Deploy / deploy (push) Successful in 3m19s
At phone width the sidebar stayed 240px wide, leaving pages a ~135px strip. Below md it is now hidden behind a menu button in the header and opens as a drawer (closes on navigation, backdrop, X or Escape); from md up the sidebar is unchanged. Page wrappers use p-4 on phones and keep p-6/p-8 from md. Shot detail: on phones the thumbnail takes the full width with the details below it instead of pushing them off screen, the action buttons wrap, and the tab bar scrolls sideways. Desktop sizing is kept as it was. Every change is behind a md: breakpoint, so the desktop layout is the same. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
21 lines
740 B
TypeScript
21 lines
740 B
TypeScript
'use client';
|
|
|
|
import { createContext, useContext, useState } from 'react';
|
|
|
|
/**
|
|
* Open/closed state of the phone-width navigation drawer, shared between the
|
|
* Header (which has the menu button) and the Sidebar (which is the drawer).
|
|
* At md and up the sidebar is always visible and this state is unused.
|
|
*/
|
|
const MobileNavContext = createContext<{ open: boolean; setOpen: (open: boolean) => void }>({
|
|
open: false,
|
|
setOpen: () => {},
|
|
});
|
|
|
|
export function MobileNavProvider({ children }: { children: React.ReactNode }) {
|
|
const [open, setOpen] = useState(false);
|
|
return <MobileNavContext.Provider value={{ open, setOpen }}>{children}</MobileNavContext.Provider>;
|
|
}
|
|
|
|
export const useMobileNav = () => useContext(MobileNavContext);
|