Skip to content

Commit

Permalink
refactor(website): make navbar responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@cedoor
cedoor committed Nov 7, 2023
1 parent 19b0b46 commit b71ae4c
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 53 deletions.
133 changes: 80 additions & 53 deletions apps/website/src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,94 @@
"use client"

import { Heading, HStack, Link } from "@chakra-ui/react"
import NextLink from "next/link"
import { usePathname } from "next/navigation"
import {
Box,
Divider,
Drawer,
DrawerBody,
DrawerCloseButton,
DrawerContent,
DrawerFooter,
DrawerOverlay,
HStack,
Heading,
IconButton,
Link,
Text,
VStack,
useDisclosure
} from "@chakra-ui/react"
import Image from "next/image"
import IconArrowUpRight from "../icons/IconArrowUpRight"
import NextLink from "next/link"
import IconDiscord from "../icons/IconDiscord"
import IconMenu from "../icons/IconMenu"
import IconThumbsUp from "../icons/IconThumbsUp"
import NavbarLinks from "./NavbarLinks"

export default function Navbar() {
const pathname = usePathname()
const { isOpen, onOpen, onClose } = useDisclosure()

return (
<HStack py="7" justify="space-between">
<Link as={NextLink} href="/">
<Image width="148" height="40" src="./semaphore-logo.svg" alt="Semaphore logo" />
<Box display={{ base: "none", sm: "block" }}>
<Image width="148" height="40" src="./semaphore-logo.svg" alt="Semaphore logo" />
</Box>
<Box display={{ base: "block", sm: "none" }}>
<Image width="20" height="40" src="./semaphore-icon.svg" alt="Semaphore icon" />
</Box>
</Link>
<HStack fontSize="18px" spacing="10">
<Link
as={NextLink}
href="/projects"
variant="navlink"
borderBottomColor={pathname === "/projects" ? "ceruleanBlue" : "transparent"}
>
<Heading fontSize="18px" fontWeight="normal">
Projects
</Heading>
</Link>
<Link
as={NextLink}
href="/learn"
variant="navlink"
borderBottomColor={pathname === "/learn" ? "ceruleanBlue" : "transparent"}
>
<Heading fontSize="18px" fontWeight="normal">
Learn
</Heading>
</Link>
<Link
as={NextLink}
href="/build"
variant="navlink"
borderBottomColor={pathname === "/build" ? "ceruleanBlue" : "transparent"}
>
<Heading fontSize="18px" fontWeight="normal">
Build
</Heading>
</Link>
<Link href="https://docs.semaphore.pse.dev" variant="navlink" isExternal>
<HStack spacing="3">
<Heading fontSize="18px" fontWeight="normal">
Documentation
</Heading>
<IconArrowUpRight width="10px" mb={1} />
</HStack>
</Link>
<Link href="https://github.com/semaphore-protocol" variant="navlink" isExternal>
<HStack spacing="3">
<Heading fontSize="18px" fontWeight="normal">
Github
</Heading>
<IconArrowUpRight width="10px" mb={1} />
</HStack>
</Link>
<HStack display={{ base: "none", md: "flex" }} fontSize="18px" spacing="10">
<NavbarLinks />
</HStack>

<IconButton
onClick={onOpen}
display={{ base: "block", md: "none" }}
aria-label="Menu"
variant="unstyled"
icon={<IconMenu boxSize="6" />}
/>

<Drawer isOpen={isOpen} placement="right" onClose={onClose}>
<DrawerOverlay />
<DrawerContent bgColor="darkBlueBg">
<DrawerCloseButton />

<DrawerBody>
<VStack spacing="8" mt="20">
<NavbarLinks />
</VStack>
</DrawerBody>

<DrawerFooter mb="5" flexDirection="column">
<Divider mb="20" />

<VStack w="full" justify="center" spacing="5">
<Link href="https://semaphore.pse.dev/discord" isExternal>
<HStack>
<IconDiscord boxSize="16px" />
<Heading fontSize="14px" fontWeight="normal">
Discord
</Heading>
</HStack>
</Link>

<Link href="" isExternal>
<HStack>
<IconThumbsUp boxSize="16px" />
<Heading fontSize="14px" fontWeight="normal">
Give feedback about the website
</Heading>
</HStack>
</Link>

<Text fontSize="12px" color="text.500" pt="2">
Copyright © 2023 Ethereum Foundation
</Text>
</VStack>
</DrawerFooter>
</DrawerContent>
</Drawer>
</HStack>
)
}
61 changes: 61 additions & 0 deletions apps/website/src/components/NavbarLinks.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
"use client"

import { HStack, Heading, Link } from "@chakra-ui/react"
import NextLink from "next/link"
import { usePathname } from "next/navigation"
import IconArrowUpRight from "../icons/IconArrowUpRight"

export default function NavbarLinks() {
const pathname = usePathname()

return (
<>
<Link
as={NextLink}
href="/projects"
variant="navlink"
borderBottomColor={pathname === "/projects" ? "ceruleanBlue" : "transparent"}
>
<Heading fontSize="18px" fontWeight="normal">
Projects
</Heading>
</Link>
<Link
as={NextLink}
href="/learn"
variant="navlink"
borderBottomColor={pathname === "/learn" ? "ceruleanBlue" : "transparent"}
>
<Heading fontSize="18px" fontWeight="normal">
Learn
</Heading>
</Link>
<Link
as={NextLink}
href="/build"
variant="navlink"
borderBottomColor={pathname === "/build" ? "ceruleanBlue" : "transparent"}
>
<Heading fontSize="18px" fontWeight="normal">
Build
</Heading>
</Link>
<Link href="https://docs.semaphore.pse.dev" variant="navlink" isExternal>
<HStack spacing="3">
<Heading fontSize="18px" fontWeight="normal">
Documentation
</Heading>
<IconArrowUpRight width="10px" mb={1} />
</HStack>
</Link>
<Link href="https://github.com/semaphore-protocol" variant="navlink" isExternal>
<HStack spacing="3">
<Heading fontSize="18px" fontWeight="normal">
Github
</Heading>
<IconArrowUpRight width="10px" mb={1} />
</HStack>
</Link>
</>
)
}
10 changes: 10 additions & 0 deletions apps/website/src/icons/IconMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { Icon, IconProps } from "@chakra-ui/react"
import React from "react"

export default function IconMenu(props: IconProps): JSX.Element {
return (
<Icon viewBox="0 0 24 24" {...props}>
<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z" fill="currentColor" />
</Icon>
)
}
13 changes: 13 additions & 0 deletions apps/website/src/icons/IconThumbsUp.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { Icon, IconProps } from "@chakra-ui/react"
import React from "react"

export default function IconThumbsUp(props: IconProps): JSX.Element {
return (
<Icon viewBox="0 0 22 21" {...props}>
<path
d="M0.999999 8.5L4 8.5L4 20.5L0.999998 20.5C0.734781 20.5 0.480427 20.3946 0.292891 20.2071C0.105354 20.0196 -1.84311e-06 19.7652 -1.81993e-06 19.5L-9.45698e-07 9.5C-9.22512e-07 9.23478 0.105355 8.98043 0.292892 8.79289C0.480428 8.60536 0.734782 8.5 0.999999 8.5ZM6.293 7.207L12.693 0.806998C12.7781 0.721692 12.8911 0.669965 13.0112 0.66133C13.1314 0.652696 13.2506 0.687734 13.347 0.759999L14.2 1.4C14.4369 1.57784 14.6158 1.82185 14.7143 2.10125C14.8127 2.38066 14.8262 2.68294 14.753 2.97L13.6 7.5L20 7.5C20.5304 7.5 21.0391 7.71071 21.4142 8.08579C21.7893 8.46086 22 8.96957 22 9.5L22 11.604C22.0003 11.8654 21.9493 12.1242 21.85 12.366L18.754 19.88C18.6787 20.0632 18.5507 20.22 18.3862 20.3304C18.2217 20.4408 18.0281 20.4998 17.83 20.5L7 20.5C6.73478 20.5 6.48043 20.3946 6.29289 20.2071C6.10536 20.0196 6 19.7652 6 19.5L6 7.914C6.00006 7.6488 6.10545 7.39449 6.293 7.207Z"
fill="currentColor"
/>
</Icon>
)
}

0 comments on commit b71ae4c

Please sign in to comment.