From b71ae4c5d95a8129ae9659b98ae23f57e64f3f03 Mon Sep 17 00:00:00 2001
From: cedoor <me@cedoor.dev>
Date: Tue, 7 Nov 2023 12:34:02 +0000
Subject: [PATCH 1/3] refactor(website): make navbar responsive

---
 apps/website/src/components/Navbar.tsx      | 133 ++++++++++++--------
 apps/website/src/components/NavbarLinks.tsx |  61 +++++++++
 apps/website/src/icons/IconMenu.tsx         |  10 ++
 apps/website/src/icons/IconThumbsUp.tsx     |  13 ++
 4 files changed, 164 insertions(+), 53 deletions(-)
 create mode 100644 apps/website/src/components/NavbarLinks.tsx
 create mode 100644 apps/website/src/icons/IconMenu.tsx
 create mode 100644 apps/website/src/icons/IconThumbsUp.tsx

diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx
index 15b0dd011..9037e4dc1 100644
--- a/apps/website/src/components/Navbar.tsx
+++ b/apps/website/src/components/Navbar.tsx
@@ -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>
     )
 }
diff --git a/apps/website/src/components/NavbarLinks.tsx b/apps/website/src/components/NavbarLinks.tsx
new file mode 100644
index 000000000..bf9473433
--- /dev/null
+++ b/apps/website/src/components/NavbarLinks.tsx
@@ -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>
+        </>
+    )
+}
diff --git a/apps/website/src/icons/IconMenu.tsx b/apps/website/src/icons/IconMenu.tsx
new file mode 100644
index 000000000..f286bf868
--- /dev/null
+++ b/apps/website/src/icons/IconMenu.tsx
@@ -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>
+    )
+}
diff --git a/apps/website/src/icons/IconThumbsUp.tsx b/apps/website/src/icons/IconThumbsUp.tsx
new file mode 100644
index 000000000..862d47dbb
--- /dev/null
+++ b/apps/website/src/icons/IconThumbsUp.tsx
@@ -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>
+    )
+}

From b3d35b7d8e58b369639f716e4e898a539c759ec0 Mon Sep 17 00:00:00 2001
From: cedoor <me@cedoor.dev>
Date: Tue, 7 Nov 2023 12:50:27 +0000
Subject: [PATCH 2/3] refactor(website): make footbar responsive

---
 apps/website/src/components/Footer.tsx | 45 +++++++++++++++++---------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/components/Footer.tsx
index 48152e326..e78a29d40 100644
--- a/apps/website/src/components/Footer.tsx
+++ b/apps/website/src/components/Footer.tsx
@@ -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
@@ -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>
     )
 }

From e739a9abb0e1950a5753c6d2e460b3baf6186287 Mon Sep 17 00:00:00 2001
From: Cedoor <me@cedoor.dev>
Date: Tue, 7 Nov 2023 16:12:27 +0000
Subject: [PATCH 3/3] Update apps/website/src/components/Navbar.tsx

Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>
---
 apps/website/src/components/Navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx
index 9037e4dc1..9b6dd5b6f 100644
--- a/apps/website/src/components/Navbar.tsx
+++ b/apps/website/src/components/Navbar.tsx
@@ -52,7 +52,7 @@ export default function Navbar() {
             <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
                 <DrawerOverlay />
                 <DrawerContent bgColor="darkBlueBg">
-                    <DrawerCloseButton />
+                    <DrawerCloseButton mt={"25px"} mr={"21px"} />
 
                     <DrawerBody>
                         <VStack spacing="8" mt="20">