Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Make nav switching entirely css-based
  • Loading branch information
regalijan committed Oct 19, 2023
1 parent cba05d6 commit 6f9e073
Showing 1 changed file with 56 additions and 85 deletions.
141 changes: 56 additions & 85 deletions components/Navigation.tsx
Expand Up @@ -2,7 +2,6 @@ import {
Avatar,
Box,
Button,
Center,
CloseButton,
Container,
Drawer,
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand Down

0 comments on commit 6f9e073

Please sign in to comment.