Make nav switching entirely css-based
This commit is contained in:
parent
cba05d6b86
commit
6f9e073198
GPG Key ID:
5D4196DA269EF520
@ -2,7 +2,6 @@ import {
|
|||||||
Avatar,
|
Avatar,
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
Center,
|
|
||||||
CloseButton,
|
CloseButton,
|
||||||
Container,
|
Container,
|
||||||
Drawer,
|
Drawer,
|
||||||
@ -70,26 +69,74 @@ export default function (props: {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<style media="(min-width: 1281px)">
|
||||||
|
{`
|
||||||
|
#nav-menu {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
<Box as="section" pb={{ base: "6" }}>
|
<Box as="section" pb={{ base: "6" }}>
|
||||||
<Box as="nav" boxSizing="unset">
|
<Box as="nav" boxSizing="unset">
|
||||||
<Container display="grid" maxW="container.xl" py={{ base: "6" }}>
|
<Container display="grid" maxW="container.xl" py={{ base: "6" }}>
|
||||||
<Container
|
<Flex
|
||||||
alignItems="center"
|
alignSelf="center"
|
||||||
className="mobile-nav"
|
gap="0.5rem"
|
||||||
display="flex"
|
|
||||||
gridColumn="1"
|
gridColumn="1"
|
||||||
gridRow="1"
|
gridRow="1"
|
||||||
justifyContent="space-between"
|
justifyContent="space-between"
|
||||||
p="0"
|
p="0"
|
||||||
w="calc(100vw - 6rem)"
|
textAlign="center"
|
||||||
>
|
>
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<img
|
<img
|
||||||
src="/files/logo192.png"
|
|
||||||
alt="Car Crushers Logo"
|
alt="Car Crushers Logo"
|
||||||
style={{ width: "36px" }}
|
height="36"
|
||||||
|
src="/files/logo192.png"
|
||||||
|
width="36"
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
|
<Spacer />
|
||||||
|
<Spacer />
|
||||||
|
<Flex alignItems="center" className="nav-links">
|
||||||
|
<HStack gap="3rem" whiteSpace="nowrap">
|
||||||
|
<Link href="/about" size="lg">
|
||||||
|
About Us
|
||||||
|
</Link>
|
||||||
|
<Link href="/team" size="lg">
|
||||||
|
Our Team
|
||||||
|
</Link>
|
||||||
|
<Link href="/support" size="lg">
|
||||||
|
Support
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
display={hasMod() ? undefined : "none"}
|
||||||
|
href="/mod-queue"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
Moderation
|
||||||
|
</Link>
|
||||||
|
</HStack>
|
||||||
|
</Flex>
|
||||||
|
<Spacer />
|
||||||
|
<Spacer />
|
||||||
|
<div className="nav-links">
|
||||||
|
{data.hide ? null : data.id ? (
|
||||||
|
<HStack spacing="3">
|
||||||
|
<Avatar src={getAvatarUrl(data)} />
|
||||||
|
<Text>{data.username}</Text>
|
||||||
|
<Button
|
||||||
|
onClick={async () => await destroySession()}
|
||||||
|
size="md"
|
||||||
|
variant="ghost"
|
||||||
|
></Button>
|
||||||
|
</HStack>
|
||||||
|
) : (
|
||||||
|
<Button as="a" colorScheme="blue" href="/api/auth/oauth">
|
||||||
|
Log In
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="24"
|
width="24"
|
||||||
@ -98,89 +145,13 @@ export default function (props: {
|
|||||||
viewBox="0 0 16 16"
|
viewBox="0 0 16 16"
|
||||||
cursor="pointer"
|
cursor="pointer"
|
||||||
onClick={onOpen}
|
onClick={onOpen}
|
||||||
|
id="nav-menu"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fillRule="evenodd"
|
fillRule="evenodd"
|
||||||
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
|
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</Container>
|
|
||||||
<Flex
|
|
||||||
alignSelf="center"
|
|
||||||
className="desktop-nav"
|
|
||||||
display="flex"
|
|
||||||
gap="0.5rem"
|
|
||||||
gridColumn="1"
|
|
||||||
gridRow="1"
|
|
||||||
justifyContent="space-between"
|
|
||||||
p="0"
|
|
||||||
textAlign="center"
|
|
||||||
>
|
|
||||||
<a href="/" style={{ alignSelf: "center" }}>
|
|
||||||
<img
|
|
||||||
src="/files/logo192.png"
|
|
||||||
width="32"
|
|
||||||
alt="Car Crushers Logo"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<Spacer />
|
|
||||||
<Spacer />
|
|
||||||
<Center gap="1.25rem" whiteSpace="nowrap">
|
|
||||||
<Link href="/about" size="lg">
|
|
||||||
About Us
|
|
||||||
</Link>
|
|
||||||
<Link href="/team" size="lg">
|
|
||||||
Our Team
|
|
||||||
</Link>
|
|
||||||
<Link href="/support" size="lg">
|
|
||||||
Support
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
display={hasMod() ? undefined : "none"}
|
|
||||||
href="/mod-queue"
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
Moderation
|
|
||||||
</Link>
|
|
||||||
</Center>
|
|
||||||
<Spacer />
|
|
||||||
<Spacer />
|
|
||||||
{data.hide ? null : data.id ? (
|
|
||||||
<HStack spacing="3">
|
|
||||||
<Avatar
|
|
||||||
display={data.id ? "flex" : "none"}
|
|
||||||
src={getAvatarUrl(data)}
|
|
||||||
/>
|
|
||||||
<Text>{data.id ? data.username : ""}</Text>
|
|
||||||
<Button
|
|
||||||
colorScheme="blue"
|
|
||||||
onClick={async () => await destroySession()}
|
|
||||||
size="md"
|
|
||||||
style={{ display: data.id ? "block" : "none" }}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
fill="currentColor"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</Button>
|
|
||||||
</HStack>
|
|
||||||
) : (
|
|
||||||
<Button as="a" colorScheme="blue" href="/api/auth/oauth">
|
|
||||||
Log In
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Flex>
|
</Flex>
|
||||||
</Container>
|
</Container>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user