OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

fix mobile flash-of-wrong-nav-menu

Browse source 
In the previous impl, the buttons variant of the menu would appear on first render, and then the breakpoint stuff would adjust and re-render as the compact nav menu. Now I'm using CSS to show/hide instead!
This commit is contained in:
Emi Matchu 2020-11-03 14:57:26 -08:00
parent 2772c3e090
commit 2de840b53e
1 changed files with 23 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/app/GlobalHeader.js
View file

@ -155,26 +155,31 @@ function UserNavBarSection() {
} }
function NavLinksList({ children }) { function NavLinksList({ children }) {
const navStyle = useBreakpointValue({ base: "menu", md: "buttons" }); return (
<>
if (navStyle === "menu") { <Box display={{ base: "block", md: "none" }}>
return ( <Menu>
<Menu> <MenuButton>
<MenuButton> <NavButton icon={<HamburgerIcon />} />
<NavButton icon={<HamburgerIcon />} /> </MenuButton>
</MenuButton> <MenuList>
<MenuList>{children}</MenuList> {React.Children.map(children, (c) =>
</Menu> React.cloneElement(c, { listVariant: "menu" })
); )}
} else { </MenuList>
return children; </Menu>
} </Box>
<HStack spacing="2" display={{ base: "none", md: "flex" }}>
{React.Children.map(children, (c) =>
React.cloneElement(c, { listVariant: "buttons" })
)}
</HStack>
</>
);
} }
function NavLinkItem(props) { function NavLinkItem({ listVariant, ...props }) {
const navStyle = useBreakpointValue({ base: "menu", md: "buttons" }); if (listVariant === "menu") {
if (navStyle === "menu") {
return <MenuItem {...props} />; return <MenuItem {...props} />;
} else { } else {
return <NavButton {...props} />; return <NavButton {...props} />;