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