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,
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
CloseButton,
|
||||
Container,
|
||||
Drawer,
|
||||
@ -70,26 +69,74 @@ export default function (props: {
|
||||
|
||||
return (
|
||||
<>
|
||||
<style media="(min-width: 1281px)">
|
||||
{`
|
||||
#nav-menu {
|
||||
display: none
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<Box as="section" pb={{ base: "6" }}>
|
||||
<Box as="nav" boxSizing="unset">
|
||||
<Container display="grid" maxW="container.xl" py={{ base: "6" }}>
|
||||
<Container
|
||||
alignItems="center"
|
||||
className="mobile-nav"
|
||||
display="flex"
|
||||
<Flex
|
||||
alignSelf="center"
|
||||
gap="0.5rem"
|
||||
gridColumn="1"
|
||||
gridRow="1"
|
||||
justifyContent="space-between"
|
||||
p="0"
|
||||
w="calc(100vw - 6rem)"
|
||||
textAlign="center"
|
||||
>
|
||||
<a href="/">
|
||||
<img
|
||||
src="/files/logo192.png"
|
||||
alt="Car Crushers Logo"
|
||||
style={{ width: "36px" }}
|
||||
height="36"
|
||||
src="/files/logo192.png"
|
||||
width="36"
|
||||
/>
|
||||
</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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
@ -98,89 +145,13 @@ export default function (props: {
|
||||
viewBox="0 0 16 16"
|
||||
cursor="pointer"
|
||||
onClick={onOpen}
|
||||
id="nav-menu"
|
||||
>
|
||||
<path
|
||||
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"
|
||||
/>
|
||||
</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>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user