diff --git a/frontend/src/components/ArticleReader.jsx b/frontend/src/components/ArticleReader.jsx index 01fc3a7..eaa5105 100644 --- a/frontend/src/components/ArticleReader.jsx +++ b/frontend/src/components/ArticleReader.jsx @@ -1,4 +1,6 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react' +import useMediaQuery from '../hooks/useMediaQuery' +import { useSessionDrawer } from '../context/SessionDrawer' import RichText from './RichText' /** * Article prose goes through the same renderer as everything else. @@ -111,6 +113,16 @@ export default function ArticleReader({ // you consult, and a wall of prose hides the one heading you came for. const [openIds, setOpenIds] = useState({}) const [drawerOpen, setDrawerOpen] = useState(false) + // On a phone the contents live behind the same button as the site menu, the + // way a session's questions do: one control at the top left whose contents + // change with where you are, rather than a second menu to hunt for. The rail + // is on screen above 1150px, so there is nothing to open there. + const narrow = useMediaQuery('(max-width: 1150px)') + const { register: registerDrawer } = useSessionDrawer() + useEffect(() => { + if (!narrow || bare) return undefined + return registerDrawer(() => setDrawerOpen(true)) + }, [narrow, bare, registerDrawer]) // Collapsing the contents rail hands its width to the prose. const [railOpen, setRailOpen] = useState(() => stored(RAIL_KEY, 'open') !== 'closed') const [size, setSize] = useState(() => (SIZES.includes(stored(SIZE_KEY, 'm')) ? stored(SIZE_KEY, 'm') : 'm')) diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx index a231e2e..85e743e 100644 --- a/frontend/src/components/Navbar.jsx +++ b/frontend/src/components/Navbar.jsx @@ -281,17 +281,37 @@ export default function Navbar({ onSignIn, onRegister, onSearch }) { for stays put; where you are going gets out of the way while you read. */}
- {/* While a session is open on a phone, the questions get their own - control on the left and the site menu keeps the right. One burger - that changed meaning depending on where you were meant the two - menus took turns, and the one you wanted was the other one. */} - {sessionDrawer.opener && ( - - )} - setMenuOpen(false)} + {/* One menu, at the left-hand end on a phone. What is inside it + changes with where you are — the site's sections always, plus the + questions in this session, or the contents of what you are + reading — but it is always the same button in the same place. Two + buttons was the previous attempt and it was wrong: a second menu + an inch from the first is a choice nobody wants to make. + + It opens the page's own drawer where there is one, because the + site menu is a tab inside that; otherwise the site menu itself. */} + + setMenuOpen(false)} onMouseEnter={() => setPeek(true)} onFocus={() => setPeek(true)}>🏥 PedsHub {user && } @@ -300,31 +320,7 @@ export default function Navbar({ onSignIn, onRegister, onSearch }) { - {/* Always the site menu. It used to become the session's list of - questions while a session was open, which put both menus on - the same button and neither where the thumb expected it; the - session now has its own control at the other end of the bar. */} - +
) : ( /* Logged-out: Sign In + Register */ diff --git a/frontend/src/index.css b/frontend/src/index.css index 27bbba5..cfe318b 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -218,15 +218,6 @@ html, body { overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { .navbar-sections { transition: none; } } [data-theme="markdown"] .navbar .logo { color: #d4a96a; } -/* The session's own control, at the left-hand end of the bar. Off the desktop - layout entirely: there the list of questions is a rail beside the question, - and a button for it would open a drawer over something already on screen. */ -.nav-session-burger { - display: none; margin-right: 2px; padding: 6px 8px; cursor: pointer; - border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; - background: none; color: var(--navbar-fg); font-size: 1rem; line-height: 1; -} -.nav-session-burger:hover { border-color: rgba(255, 255, 255, .45); } .nav-burger { display: none; background: none !important; border: 0 !important; cursor: pointer; color: var(--navbar-fg); padding: 6px; flex-direction: column; gap: 5px; opacity: 0.85; } /* Scoped to the dark bar. These were `.navbar a` and `.navbar button`, which also caught everything in the light section bar beneath it — near-white text @@ -810,8 +801,12 @@ html, body { overflow-x: hidden; } /* The burger carries the sections on a phone; the strip would be a second copy of the same links competing for the same thumb. */ .nav-burger { display: flex; } - .nav-session-burger { display: inline-flex; align-items: center; } .nav-logout { display: none; } + /* At the left-hand end, before the logo — it is the first child of the bar + now, so nothing here has to reorder it. A control that changes what it + holds must at least not change where it is: reaching for the top right and + finding the account chip is how a menu gets a reputation. */ + .navbar-inner > .nav-burger { margin-right: 2px; } /* Hide the whole strip, wrapper and arrows, not just the link row. */ .navbar-sections .ss-wrap { display: none; } .navbar-sections, .navbar-sections-inner, .navbar-sections:focus-within { height: 42px; }