fix(docs): make layout more consistent

system-ui · Mar 20, 2022 · 1933f4e · 1933f4e
1 parent bbd808b
commit 1933f4e
Showing 1 changed file with 57 additions and 19 deletions.
diff --git a/packages/docs/src/components/layout.js b/packages/docs/src/components/layout.js
@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { jsx, Themed, useColorMode } from 'theme-ui'
-import { useState, useRef } from 'react'
+import { css, jsx, Themed, useColorMode } from 'theme-ui'
+import { useState, useRef, useEffect } from 'react'
 import { Flex, Box } from '@theme-ui/components'
 import { AccordionNav } from '@theme-ui/sidenav'
 import { Link } from 'gatsby'
@@ -45,10 +45,11 @@ export default function DocsLayout(props) {
   const nav = useRef(null)
   const [mode, setMode] = useColorMode()
 
+  const isLanding = props.path === '/'
+
   const fullwidth =
-    (props.pageContext.frontmatter &&
-      props.pageContext.frontmatter.fullwidth) ||
-    props.location.pathname === '/'
+    isLanding ||
+    (props.pageContext.frontmatter && props.pageContext.frontmatter.fullwidth)
 
   const showNav = !props.pageContext?.frontmatter?.hidenav
 
@@ -62,16 +63,22 @@ export default function DocsLayout(props) {
         sx={{
           flexDirection: 'column',
           minHeight: '100vh',
-        }}>
+        }}
+      >
         {showNav && (
           <Flex
             as="header"
             sx={{
+              zIndex: 1,
               height: 64,
               px: 3,
               alignItems: 'center',
               justifyContent: 'space-between',
-            }}>
+              position: isLanding ? 'initial' : 'sticky',
+              top: 0,
+              background: 'background',
+            }}
+          >
             <Flex sx={{ alignItems: 'center' }}>
               <MenuButton
                 onClick={(e) => {
@@ -99,7 +106,8 @@ export default function DocsLayout(props) {
                     ml: 2,
                     whiteSpace: 'pre',
                   }}
-                  onClick={() => setMode(nextColorMode)}>
+                  onClick={() => setMode(nextColorMode)}
+                >
                   {getModeName(mode)}
                 </Button>
               </Flex>
@@ -112,7 +120,8 @@ export default function DocsLayout(props) {
             alignItems: 'flex-start',
             display: ['block', 'flex'],
             height: '100%',
-          }}>
+          }}
+        >
           <Sidebar
             ref={nav}
             role="navigation"
@@ -132,6 +141,7 @@ export default function DocsLayout(props) {
             components={sidebar}
             pathname={props.location.pathname}
             sx={{
+              background: 'background',
               display: [null, fullwidth ? 'none' : 'block'],
               width: 256,
               flex: 'none',
@@ -141,23 +151,51 @@ export default function DocsLayout(props) {
               pt: 3,
               pb: 4,
               mt: [64, 0],
+              position: 'sticky',
+              top: '64px',
             }}
           />
-          <main
-            id="content"
+          <div
             sx={{
               width: '100%',
               minWidth: 0,
-              maxWidth: fullwidth ? 'none' : 768,
-              mx: 'auto',
-              px: fullwidth ? 0 : 3,
-            }}>
-            {props.children}
-            <EditLink />
-            {!fullwidth && <Pagination />}
-          </main>
+
+              position: 'relative',
+            }}
+          >
+            {!isLanding && <HeaderScrollShadow />}
+            <main
+              id="content"
+              sx={{
+                maxWidth: fullwidth ? 'none' : 768,
+                mx: 'auto',
+                px: fullwidth ? 0 : 3,
+              }}
+            >
+              {props.children}
+              <EditLink />
+              {!fullwidth && <Pagination />}
+            </main>
+          </div>
         </Box>
       </Flex>
     </Themed.root>
   )
 }
+
+function HeaderScrollShadow() {
+  return (
+    <div
+      sx={{
+        content: "''",
+        top: '64px',
+        transform: 'translateY(-64px)',
+        left: 0,
+        right: 0,
+        height: '64px',
+        position: 'sticky',
+        boxShadow: '0 12px 18px -3px rgb(0 0 0 / 0.03)',
+      }}
+    />
+  )
+}