fix: responsive navbar

AykutSarac · Jan 3, 2024 · 86a4255 · 86a4255
1 parent 9715859
commit 86a4255
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 24 deletions.
diff --git a/src/layout/Navbar/index.tsx b/src/layout/Navbar/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Link from "next/link";
-import { Alert, Button, Menu } from "@mantine/core";
+import { Alert, Box, Burger, Button, Flex, Menu, Overlay } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 import styled from "styled-components";
 import { BiChevronDown } from "react-icons/bi";
 import useUser from "src/store/useUser";
@@ -49,6 +50,7 @@ const Right = styled.div`
 
 export const Navbar = () => {
   const isAuthenticated = useUser(state => state.isAuthenticated);
+  const [opened, { toggle }] = useDisclosure();
 
   return (
     <StyledNavbarWrapper>
@@ -62,6 +64,7 @@ export const Navbar = () => {
             variant="subtle"
             color="black"
             radius="md"
+            visibleFrom="md"
           >
             Pricing
           </Button>
@@ -72,6 +75,7 @@ export const Navbar = () => {
             variant="subtle"
             color="black"
             radius="md"
+            visibleFrom="md"
           >
             VS Code
           </Button>
@@ -82,16 +86,18 @@ export const Navbar = () => {
             variant="subtle"
             color="black"
             radius="md"
+            visibleFrom="md"
           >
             Docs
           </Button>
-          <Menu trigger="hover" offset={15} withArrow>
+          <Menu trigger="hover" offset={15} withArrow shadow="md">
             <Menu.Target>
               <Button
                 variant="subtle"
                 color="black"
                 radius="md"
                 rightSection={<BiChevronDown size="18" />}
+                visibleFrom="md"
               >
                 Legal
               </Button>
@@ -112,13 +118,14 @@ export const Navbar = () => {
               </Menu.Item>
             </Menu.Dropdown>
           </Menu>
-          <Menu trigger="hover" offset={15} withArrow>
+          <Menu trigger="hover" offset={15} withArrow shadow="md">
             <Menu.Target>
               <Button
                 variant="subtle"
                 color="black"
                 radius="md"
                 rightSection={<BiChevronDown size="18" />}
+                visibleFrom="md"
               >
                 Social
               </Button>
@@ -147,18 +154,125 @@ export const Navbar = () => {
               variant="outline"
               color="dark"
               className="hide-mobile"
+              visibleFrom="md"
             >
               Login
             </Button>
           )}
-          <Button color="dark" component={Link} href="/editor" prefetch={false}>
+          <Button color="dark" component={Link} href="/editor" prefetch={false} visibleFrom="md">
             Editor
           </Button>
+          <Burger opened={opened} onClick={toggle} aria-label="Toggle navigation" hiddenFrom="md" />
+          {opened && (
+            <Overlay top={56} h="100dvh">
+              <Box
+                bg="white"
+                top={56}
+                left={0}
+                pos="fixed"
+                w="100%"
+                pb="lg"
+                style={{ zIndex: 3, borderBottom: "1px solid black" }}
+              >
+                <Flex pt="lg" direction="column" align="center" justify="center" gap="lg">
+                  <Button
+                    component={Link}
+                    href="/pricing"
+                    variant="transparent"
+                    color="black"
+                    radius="md"
+                    onClick={toggle}
+                  >
+                    Pricing
+                  </Button>
+                  <Button
+                    component="a"
+                    href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
+                    target="_blank"
+                    variant="transparent"
+                    color="black"
+                    radius="md"
+                    onClick={toggle}
+                  >
+                    VS Code
+                  </Button>
+                  <Button
+                    component={Link}
+                    href="/docs"
+                    prefetch={false}
+                    variant="transparent"
+                    color="black"
+                    radius="md"
+                    onClick={toggle}
+                  >
+                    Docs
+                  </Button>
+                  <Menu trigger="click" offset={15} withArrow shadow="md">
+                    <Menu.Target>
+                      <Button
+                        variant="transparent"
+                        color="black"
+                        radius="md"
+                        rightSection={<BiChevronDown size="18" />}
+                      >
+                        Legal
+                      </Button>
+                    </Menu.Target>
+                    <Menu.Dropdown>
+                      <Menu.Item component={Link} href="/legal/privacy" prefetch={false}>
+                        Privacy Policy
+                      </Menu.Item>
+                      <Menu.Item component={Link} href="/legal/terms" prefetch={false}>
+                        Terms and Conditions
+                      </Menu.Item>
+                      <Menu.Item
+                        component={Link}
+                        href="/legal/subscription-refund"
+                        prefetch={false}
+                      >
+                        Subscription
+                      </Menu.Item>
+                      <Menu.Divider />
+                      <Menu.Item component="a" href="mailto:[email protected]">
+                        [email protected]
+                      </Menu.Item>
+                    </Menu.Dropdown>
+                  </Menu>
+                  <Menu trigger="click" offset={15} withArrow shadow="md">
+                    <Menu.Target>
+                      <Button
+                        variant="transparent"
+                        color="black"
+                        radius="md"
+                        rightSection={<BiChevronDown size="18" />}
+                      >
+                        Social
+                      </Button>
+                    </Menu.Target>
+                    <Menu.Dropdown>
+                      <Menu.Item component="a" href="https://twitter.com/jsoncrack">
+                        𝕏 (Twitter)
+                      </Menu.Item>
+                      <Menu.Item component="a" href="https://discord.gg/yVyTtCRueq">
+                        Discord
+                      </Menu.Item>
+                      <Menu.Item component="a" href="https://www.linkedin.com/company/herowand">
+                        LinkedIn
+                      </Menu.Item>
+                      <Menu.Item component="a" href="https://github.com/AykutSarac/jsoncrack.com">
+                        GitHub
+                      </Menu.Item>
+                    </Menu.Dropdown>
+                  </Menu>
+                </Flex>
+              </Box>
+            </Overlay>
+          )}
         </Right>
       </StyledNavbar>
       <Link href="/pricing">
         <Alert color="red" variant="filled" radius={0} fw="bold">
-          Unlock premium features now with 30% discount on the Premium plan!
+          Unlock premium features now with ~30% discount on the Premium plan!
         </Alert>
       </Link>
     </StyledNavbarWrapper>

diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx
@@ -18,10 +18,7 @@ const StyledContentBody = styled.div`
   flex-wrap: wrap;
   gap: 15px;
   line-height: 1.8;
-
-  ${Text} {
-    flex: 1;
-  }
+  overflow-x: auto;
 `;
 
 const StyledHighlight = styled.span<{ $link?: boolean; $alert?: boolean }>`
@@ -51,7 +48,7 @@ const Docs = () => {
           </Title>
         </Group>
         <Paper p="md" radius="md" withBorder>
-          <Title order={3} c="dark">
+          <Title mb="sm" order={3} c="dark">
             # Fetching from URL
           </Title>
           <StyledContentBody>
@@ -81,7 +78,7 @@ const Docs = () => {
           </StyledContentBody>
         </Paper>
         <Paper p="md" radius="md" withBorder>
-          <Title order={2} c="dark">
+          <Title mb="sm" order={3} c="dark">
             # Embed Saved JSON
           </Title>
           <StyledContentBody>
@@ -102,10 +99,10 @@ const Docs = () => {
           </StyledContentBody>
         </Paper>
         <Paper p="md" radius="md" withBorder>
-          <Title order={2} c="dark">
+          <Title mb="sm" order={3} c="dark">
             # Communicating with API
           </Title>
-          <h3>◼︎ Post Message to Embed</h3>
+          <Title order={4}>◼︎ Post Message to Embed</Title>
           <StyledContentBody>
             <Text>
               Communicating with the embed is possible with{" "}
@@ -141,7 +138,7 @@ const Docs = () => {
           </StyledContentBody>
         </Paper>
         <Paper p="md" radius="md" withBorder>
-          <h3>◼︎ On Page Load</h3>
+          <Title order={4}>◼︎ On Page Load</Title>
           <StyledContentBody>
             <Text>
               <Text>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import Head from "next/head";
 import Link from "next/link";
-import Script from "next/script";
 import { Button, Group, Stack, Text } from "@mantine/core";
 import styled from "styled-components";
 import { FaChevronRight } from "react-icons/fa";
@@ -127,7 +126,6 @@ const HeroSection = () => (
             fw="bold"
             rightSection={<FaChevronRight />}
             size="md"
-            style={{ border: "2px solid orange" }}
             hiddenFrom="md"
           >
             GO TO EDITOR
@@ -139,15 +137,12 @@ const HeroSection = () => (
 );
 
 export const HomePage = () => {
-  const [ads, setAds] = React.useState(false);
-
   return (
     <Layout>
       <Head>
         <title>JSON Crack | Visualize Instantly Into Graphs</title>
       </Head>
       <HeroSection />
-      <Script src="https://m.servedby-buysellads.com/monetization.js" onLoad={() => setAds(true)} />
     </Layout>
   );
 };

diff --git a/src/pages/pricing.tsx b/src/pages/pricing.tsx
@@ -126,15 +126,24 @@ const Pricing = () => {
           </Flex>
         </Paper>
 
-        <Paper p="xl" radius="lg" bg="white" withBorder w={325}>
+        <Paper
+          p="xl"
+          radius="lg"
+          bg="white"
+          withBorder
+          w={325}
+          style={{ borderColor: "black", borderWidth: "2px" }}
+        >
           <Flex justify="space-between">
             <Stack gap="0">
-              <Text fz="xl" fw="bold" c="black">
-                Premium{" "}
-                <Badge color="red" ml="sm" leftSection={<FaBolt />}>
+              <Flex align="center" gap="xs">
+                <Text fz="xl" fw="bold" c="black">
+                  Premium
+                </Text>
+                <Badge size="sm" color="red" leftSection={<FaBolt />}>
                   Most Popular
                 </Badge>
-              </Text>
+              </Flex>
               <Flex gap="xs" align="center">
                 <Text fz={32} fw="bold" c="black">
                   ${isMonthly ? "5" : "60"}