kopia lustrzana https://github.com/bugout-dev/moonstream
menus needed portal in fixed navbar state
rodzic
f1a67881ec
commit
be05b474e5
|
@ -12,6 +12,7 @@ import {
|
||||||
MenuButton,
|
MenuButton,
|
||||||
MenuList,
|
MenuList,
|
||||||
MenuItem,
|
MenuItem,
|
||||||
|
Portal,
|
||||||
} from "@chakra-ui/react";
|
} from "@chakra-ui/react";
|
||||||
import { ChevronDownIcon, HamburgerIcon } from "@chakra-ui/icons";
|
import { ChevronDownIcon, HamburgerIcon } from "@chakra-ui/icons";
|
||||||
import useModals from "../core/hooks/useModals";
|
import useModals from "../core/hooks/useModals";
|
||||||
|
@ -41,7 +42,7 @@ const LandingNavbar = () => {
|
||||||
<Flex
|
<Flex
|
||||||
pl={ui.isMobileView ? 2 : 8}
|
pl={ui.isMobileView ? 2 : 8}
|
||||||
justifySelf="flex-start"
|
justifySelf="flex-start"
|
||||||
h="100%"
|
h="48px"
|
||||||
py={1}
|
py={1}
|
||||||
flexBasis="200px"
|
flexBasis="200px"
|
||||||
flexGrow={1}
|
flexGrow={1}
|
||||||
|
@ -51,7 +52,7 @@ const LandingNavbar = () => {
|
||||||
<Link
|
<Link
|
||||||
as={Image}
|
as={Image}
|
||||||
w="auto"
|
w="auto"
|
||||||
h="full"
|
h="100%"
|
||||||
justifyContent="left"
|
justifyContent="left"
|
||||||
src={WHITE_LOGO_W_TEXT_URL}
|
src={WHITE_LOGO_W_TEXT_URL}
|
||||||
alt="Moonstream logo"
|
alt="Moonstream logo"
|
||||||
|
@ -81,19 +82,22 @@ const LandingNavbar = () => {
|
||||||
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
|
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
|
||||||
{item.title}
|
{item.title}
|
||||||
</MenuButton>
|
</MenuButton>
|
||||||
<MenuList>
|
<Portal>
|
||||||
{item.children.map((child, idx) => (
|
<MenuList zIndex={100}>
|
||||||
<RouterLink
|
{item.children.map((child, idx) => (
|
||||||
key={`${idx}-${item.title}-menu-links`}
|
<RouterLink
|
||||||
href={child.path}
|
shallow={true}
|
||||||
passHref
|
key={`${idx}-${item.title}-menu-links`}
|
||||||
>
|
href={child.path}
|
||||||
<MenuItem as={"a"} m={0}>
|
passHref
|
||||||
{child.title}
|
>
|
||||||
</MenuItem>
|
<MenuItem key={`menu-${idx}`} as={"a"} m={0}>
|
||||||
</RouterLink>
|
{child.title}
|
||||||
))}
|
</MenuItem>
|
||||||
</MenuList>
|
</RouterLink>
|
||||||
|
))}
|
||||||
|
</MenuList>
|
||||||
|
</Portal>
|
||||||
</Menu>
|
</Menu>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|
Ładowanie…
Reference in New Issue