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

refactor menu/nav a bit

Browse source
This commit is contained in:
Emi Matchu 2020-11-03 19:36:48 -08:00
parent 2de840b53e
commit e47bec0abc
1 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/app/GlobalHeader.js
View file

@ -154,6 +154,12 @@ function UserNavBarSection() {
} }
} }
/**
* Renders the given <NavLinkItem /> children as a dropdown menu or as a list
* of buttons, depending on the screen size.
*
* It actually renders both, and shows/hides them by media query!
*/
function NavLinksList({ children }) { function NavLinksList({ children }) {
return ( return (
<> <>
@ -163,27 +169,27 @@ function NavLinksList({ children }) {
<NavButton icon={<HamburgerIcon />} /> <NavButton icon={<HamburgerIcon />} />
</MenuButton> </MenuButton>
<MenuList> <MenuList>
{React.Children.map(children, (c) => {React.Children.map(children, (c) => (
React.cloneElement(c, { listVariant: "menu" }) <MenuItem {...c.props} />
)} ))}
</MenuList> </MenuList>
</Menu> </Menu>
</Box> </Box>
<HStack spacing="2" display={{ base: "none", md: "flex" }}> <HStack spacing="2" display={{ base: "none", md: "flex" }}>
{React.Children.map(children, (c) => {React.Children.map(children, (c) => (
React.cloneElement(c, { listVariant: "buttons" }) <NavButton {...c.props} />
)} ))}
</HStack> </HStack>
</> </>
); );
} }
function NavLinkItem({ listVariant, ...props }) { function NavLinkItem() {
if (listVariant === "menu") { throw new Error(
return <MenuItem {...props} />; `NavLinkItem should only be rendered in a NavLinksList, which should ` +
} else { `render it as both a MenuItem or NavButton element. That way, we can ` +
return <NavButton {...props} />; `show the best layout depending on a CSS media query!`
} );
} }
const NavButton = React.forwardRef(({ icon, ...props }, ref) => { const NavButton = React.forwardRef(({ icon, ...props }, ref) => {