Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive navbar #417

Merged
merged 4 commits into from
Nov 7, 2023
Merged

Responsive navbar #417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b71ae4c
refactor(website): make navbar responsive
cedoor Nov 7, 2023
b3d35b7
refactor(website): make footbar responsive
cedoor Nov 7, 2023
e739a9a
Update apps/website/src/components/Navbar.tsx
cedoor Nov 7, 2023
a091ba3
Merge pull request #418 from semaphore-protocol/refactor/responsive-f…
cedoor Nov 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 29 additions & 16 deletions apps/website/src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import { Divider, Heading, HStack, Link, Text, VStack } from "@chakra-ui/react"
import { Divider, Heading, HStack, Link, Stack, Text, VStack } from "@chakra-ui/react"
import Image from "next/image"
import NextLink from "next/link"
import IconArrowUpRight from "../icons/IconArrowUpRight"
import IconDiscord from "../icons/IconDiscord"
import IconThumbsUp from "../icons/IconThumbsUp"

export default function Footer() {
return (
<VStack py="7" justify="space-between" h="611px" pt="28" pb="10">
<Image width="79" height="158" src="./semaphore-icon.svg" alt="Semaphore logo" />
<HStack fontSize="18px" spacing="10">
<VStack py="7" justify="space-between" pt="28" pb="10" spacing="14">
<Image width="75" height="158" src="./semaphore-icon.svg" alt="Semaphore logo" />

<Stack direction={{ base: "column", md: "row" }} align="center" fontSize="18px" spacing="10">
<Link as={NextLink} href="/projects">
<Heading fontSize="18px" fontWeight="normal">
Projects
Expand Down Expand Up @@ -48,22 +50,33 @@ export default function Footer() {
<IconArrowUpRight width="10px" mb={1} />
</HStack>
</Link>
</HStack>
</Stack>

<Divider />

<Link href="https://semaphore.pse.dev/discord" isExternal>
<HStack>
<IconDiscord width="24px" />
<Heading fontSize="18px" fontWeight="normal">
Discord
</Heading>
</HStack>
</Link>
<VStack spacing="5">
<Link href="https://semaphore.pse.dev/discord" isExternal>
<HStack>
<IconDiscord boxSize={{ base: "16px", md: "24px" }} />
<Heading fontSize={{ base: "14px", md: "18px" }} fontWeight="normal">
Discord
</Heading>
</HStack>
</Link>

<Link href="" isExternal>
<HStack>
<IconThumbsUp boxSize={{ base: "16px", md: "24px" }} />
<Heading fontSize={{ base: "14px", md: "18px" }} fontWeight="normal">
Give feedback about the website
</Heading>
</HStack>
</Link>

<Text fontSize="14px" color="text.500">
Copyright © 2023 Ethereum Foundation
</Text>
<Text fontSize={{ base: "12px", md: "14px" }} color="text.500" pt="2">
Copyright © 2023 Ethereum Foundation
</Text>
</VStack>
</VStack>
)
}
133 changes: 80 additions & 53 deletions apps/website/src/components/Navbar.tsx
View file
Open in desktop
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 mt={"25px"} mr={"21px"} />

<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
Open in desktop
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
Open in desktop
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
Open in desktop
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>
)
}
Loading