Revisited docs site layout

morellodev · Nov 28, 2019 · 4b42537 · 4b42537 · vercel · Nov 28, 2019
1 parent 8207ea4
commit 4b42537
Show file tree

Hide file tree

Showing 7 changed files with 312 additions and 106 deletions.
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
@@ -3,6 +3,7 @@ module.exports = {
     title: `React Awesome Reveal`,
     description: `Playground to test React Awesome Reveal features.`,
     author: `@dennismorello`,
+    githubUrl: `https://github.com/dennismorello/react-awesome-reveal`,
   },
   pathPrefix: `/docs`,
   plugins: [

diff --git a/docs/src/components/effects-drawer.js b/docs/src/components/effects-drawer.js
@@ -0,0 +1,102 @@
+import React from "react"
+import { Link as GatsbyLink, withPrefix } from "gatsby"
+import {
+  Drawer,
+  DrawerBody,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  Stack,
+  Button,
+} from "@chakra-ui/core"
+
+const NavLink = ({ to, location, ...props }) => (
+  <Button
+    as={GatsbyLink}
+    width="100%"
+    variant="ghost"
+    variantColor="purple"
+    borderRadius={20}
+    to={to}
+    isActive={location.pathname === withPrefix(to)}
+    {...props}
+  />
+)
+
+const EffectsDrawer = ({ isOpen, onClose, drawerButtonRef, location }) => {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      placement="left"
+      onClose={onClose}
+      finalFocusRef={drawerButtonRef}
+    >
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerCloseButton />
+        <DrawerHeader>Effects</DrawerHeader>
+        <DrawerBody overflowY="auto" pb={4}>
+          <Stack as="nav" shouldWrapChildren spacing={4}>
+            <NavLink to="/bounce" location={location}>
+              Bounce
+            </NavLink>
+            <NavLink to="/fade" location={location}>
+              Fade
+            </NavLink>
+            <NavLink to="/flash" location={location}>
+              Flash
+            </NavLink>
+            <NavLink to="/flip" location={location}>
+              Flip
+            </NavLink>
+            <NavLink to="/headshake" location={location}>
+              Head Shake
+            </NavLink>
+            <NavLink to="/heartbeat" location={location}>
+              Heart Beat
+            </NavLink>
+            <NavLink to="/jackinthebox" location={location}>
+              Jack In The Box
+            </NavLink>
+            <NavLink to="/jello" location={location}>
+              Jello
+            </NavLink>
+            <NavLink to="/lightspeed" location={location}>
+              Light Speed
+            </NavLink>
+            <NavLink to="/pulse" location={location}>
+              Pulse
+            </NavLink>
+            <NavLink to="/rotate" location={location}>
+              Rotate
+            </NavLink>
+            <NavLink to="/rubberband" location={location}>
+              Rubber Band
+            </NavLink>
+            <NavLink to="/shake" location={location}>
+              Shake
+            </NavLink>
+            <NavLink to="/slide" location={location}>
+              Slide
+            </NavLink>
+            <NavLink to="/swing" location={location}>
+              Swing
+            </NavLink>
+            <NavLink to="/tada" location={location}>
+              Tada
+            </NavLink>
+            <NavLink to="/wobble" location={location}>
+              Wobble
+            </NavLink>
+            <NavLink to="/zoom" location={location}>
+              Zoom
+            </NavLink>
+          </Stack>
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export default EffectsDrawer
diff --git a/docs/src/components/header.js b/docs/src/components/header.js
@@ -1,96 +1,97 @@
-import React from "react"
-import { Link as GatsbyLink, withPrefix } from "gatsby"
-import { Flex, Button, Box, Stack } from "@chakra-ui/core"
+import React, { useRef } from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import {
+  Box,
+  Button,
+  Flex,
+  Stack,
+  IconButton,
+  useDisclosure,
+} from "@chakra-ui/core"
+import { Fade } from "react-awesome-reveal"
 
-const NavLink = ({ to, location, ...props }) => (
-  <Button
-    as={GatsbyLink}
-    variant="ghost"
-    variantColor="purple"
-    borderRadius={20}
-    to={to}
-    mx={2}
-    isActive={location.pathname === withPrefix(to)}
-    {...props}
-  />
-)
+// Components
+import EffectsDrawer from "./effects-drawer"
+
+const Header = ({
+  location,
+  animateHeader,
+  showLeft = true,
+  showRight = true,
+}) => {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            githubUrl
+          }
+        }
+      }
+    `
+  )
+
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const drawerButtonRef = useRef()
+
+  const headerContent = (
+    <Stack isInline alignItems="center">
+      {showLeft && (
+        <IconButton
+          onClick={onOpen}
+          ref={drawerButtonRef}
+          variantColor="purple"
+          icon="search-2"
+          variant="ghost"
+          isRound
+        />
+      )}
+      {showLeft && (
+        <EffectsDrawer
+          isOpen={isOpen}
+          onClose={onClose}
+          drawerButtonRef={drawerButtonRef}
+          location={location}
+        />
+      )}
+
+      <Box flexGrow={1} />
+
+      {showRight && (
+        <Button
+          variantColor="purple"
+          variant="outline"
+          as="a"
+          target="_blank"
+          href={site.siteMetadata.githubUrl}
+        >
+          GitHub
+        </Button>
+      )}
+    </Stack>
+  )
 
-const Header = ({ location }) => {
   return (
     <Flex
       as="header"
       boxShadow="sm"
       backgroundColor="gray.800"
-      p={2}
+      py={2}
+      px={4}
       position="fixed"
       zIndex="sticky"
       top={0}
       left={0}
       right={0}
       height={16}
-      maxW="100%"
-      alignItems="center"
-      justifyContent="space-between"
-      overflowX="auto"
-      overflowY="hidden"
+      flexDirection="column"
+      justifyContent="center"
     >
-      <Stack as="nav" shouldWrapChildren isInline>
-        <NavLink to="/" location={location}>
-          Fade
-        </NavLink>
-        <NavLink to="/bounce" location={location}>
-          Bounce
-        </NavLink>
-        <NavLink to="/flash" location={location}>
-          Flash
-        </NavLink>
-        <NavLink to="/flip" location={location}>
-          Flip
-        </NavLink>
-        <NavLink to="/headshake" location={location}>
-          Head Shake
-        </NavLink>
-        <NavLink to="/heartbeat" location={location}>
-          Heart Beat
-        </NavLink>
-        <NavLink to="/jackinthebox" location={location}>
-          Jack In The Box
-        </NavLink>
-        <NavLink to="/jello" location={location}>
-          Jello
-        </NavLink>
-        <NavLink to="/lightspeed" location={location}>
-          Light Speed
-        </NavLink>
-        <NavLink to="/pulse" location={location}>
-          Pulse
-        </NavLink>
-        <NavLink to="/rotate" location={location}>
-          Rotate
-        </NavLink>
-        <NavLink to="/rubberband" location={location}>
-          Rubber Band
-        </NavLink>
-        <NavLink to="/shake" location={location}>
-          Shake
-        </NavLink>
-        <NavLink to="/slide" location={location}>
-          Slide
-        </NavLink>
-        <NavLink to="/swing" location={location}>
-          Swing
-        </NavLink>
-        <NavLink to="/tada" location={location}>
-          Tada
-        </NavLink>
-        <NavLink to="/wobble" location={location}>
-          Wobble
-        </NavLink>
-        <NavLink to="/zoom" location={location}>
-          Zoom
-        </NavLink>
-      </Stack>
-      <Box>{/** Put here right content */}</Box>
+      {animateHeader ? (
+        <Fade direction="bottom">{headerContent}</Fade>
+      ) : (
+        headerContent
+      )}
     </Flex>
   )
 }

diff --git a/docs/src/components/layout.js b/docs/src/components/layout.js
@@ -6,21 +6,40 @@ import { Fade } from "react-awesome-reveal"
 import Header from "./header"
 import SEO from "./seo"
 
-const Layout = ({ children, location, title, showNavbar = true }) => (
+const Layout = ({
+  children,
+  location,
+  title,
+  animateHeader = false,
+  showNavbar = true,
+  showNavbarLeftContent = true,
+  showNavbarRightContent = true,
+  showTitle = true,
+}) => (
   <DarkMode>
     <SEO title={title} />
-    {showNavbar && <Header location={location} />}
-    <Box overflowX="hidden" bg="gray.800">
+    <Box overflowX="hidden" bg="gray.800" mt={showNavbar ? 16 : 0}>
+      {showNavbar && (
+        <Header
+          location={location}
+          animateHeader={animateHeader}
+          showLeft={showNavbarLeftContent}
+          showRight={showNavbarRightContent}
+        />
+      )}
       <Box
         as="main"
         px={4}
-        pt={showNavbar ? 20 : 4}
         mx="auto"
         width={["100%", "100%", "100%", "66.667%"]}
       >
-        <Fade direction="bottom" triggerOnce>
-          <Heading mt={[2, 4, 8, 16]}>{title}</Heading>
-        </Fade>
+        {showTitle && (
+          <Fade direction="bottom" triggerOnce>
+            <Heading mt={[2, 4, 8, 16]} size="2xl">
+              {title}
+            </Heading>
+          </Fade>
+        )}
         {children}
       </Box>
     </Box>

diff --git a/docs/src/components/section.js b/docs/src/components/section.js
@@ -0,0 +1,17 @@
+import React from "react"
+import { Flex } from "@chakra-ui/core"
+
+const Section = ({ children, hasNavbar = true }) => (
+  <Flex
+    as="section"
+    minH={hasNavbar ? "calc(100vh - 4rem)" : "100vh"}
+    align="center"
+    justify="center"
+    direction="column"
+    pb={hasNavbar ? 16 : 0}
+  >
+    {children}
+  </Flex>
+)
+
+export default Section
diff --git a/docs/src/pages/fade.js b/docs/src/pages/fade.js
@@ -0,0 +1,25 @@
+import React from "react"
+import { Grid } from "@chakra-ui/core"
+
+// Components
+import Card from "../components/card"
+import Layout from "../components/layout"
+
+export default ({ location }) => (
+  <Layout location={location} title="Fade">
+    <Grid
+      templateColumns={[
+        "repeat(1, 1fr)",
+        "repeat(2, 1fr)",
+        "repeat(3, 1fr)",
+        "repeat(4, 1fr)",
+      ]}
+      gap={8}
+      my={8}
+    >
+      {Array.from({ length: 120 }).map((_, index) => (
+        <Card key={index} />
+      ))}
+    </Grid>
+  </Layout>
+)