first pass at website layout

- make the most of algolia search bar - introduce table of contents for each page
keystonejs · Mar 24, 2020 · 07317ca · 07317ca
1 parent 3407fa6
commit 07317ca
Show file tree

Hide file tree

Showing 8 changed files with 340 additions and 225 deletions.
diff --git a/website/src/components/Container.js b/website/src/components/Container.js
@@ -6,17 +6,17 @@ import { mq } from '../utils/media';
 import { gridSize } from '@arch-ui/theme';
 
 export const CONTAINER_GUTTERS = [gridSize * 2, gridSize * 3, gridSize * 4];
-export const CONTAINER_WIDTH = 1140;
+export const DEFAULT_WIDTH = 1440;
 
-export const Container = props => (
+export const Container = ({ width = DEFAULT_WIDTH, ...props }) => (
   <div
     css={mq({
       boxSizing: 'border-box',
       marginLeft: 'auto',
       marginRight: 'auto',
-      maxWidth: CONTAINER_WIDTH,
-      paddingLeft: CONTAINER_GUTTERS,
-      paddingRight: CONTAINER_GUTTERS,
+      maxWidth: width,
+      // paddingLeft: CONTAINER_GUTTERS,
+      // paddingRight: CONTAINER_GUTTERS,
     })}
     {...props}
   />

diff --git a/website/src/components/Header.js b/website/src/components/Header.js
@@ -7,31 +7,95 @@ import { colors, gridSize } from '@arch-ui/theme';
 
 import logosvg from '../assets/logo.svg';
 import { Container, SocialIconsNav, Search } from '../components';
-import { media, mediaOnly, mediaMax } from '../utils/media';
+import { SIDEBAR_WIDTH } from '../components/Sidebar';
+import { media, mediaMax, mq } from '../utils/media';
 
 export const HEADER_HEIGHT = 60;
 
 export const Header = forwardRef(({ toggleMenu, ...props }, ref) => (
-  <header ref={ref} {...props}>
+  <header
+    ref={ref}
+    css={{
+      backgroundColor: colors.page,
+      boxShadow: `0 1px 0 ${colors.N10}`,
+      position: 'sticky',
+      top: 0,
+      zIndex: 1,
+    }}
+    {...props}
+  >
     <Container>
       <div
         css={{
           alignItems: 'center',
-          boxShadow: `0 1px 0 ${colors.N10}`,
-          display: 'grid',
-          gridTemplateColumns: '150px 1fr auto',
-          gridGap: '1rem',
+          display: 'flex',
           fontWeight: 500,
           height: HEADER_HEIGHT,
-
-          [media.sm]: {
-            gridTemplateColumns: '220px 1fr 220px',
-          },
         }}
       >
+        {toggleMenu && (
+          <button
+            onClick={toggleMenu}
+            css={{
+              background: 0,
+              border: 0,
+              cursor: 'pointer',
+              padding: gridSize * 2,
+
+              [media.md]: { display: 'none' },
+            }}
+          >
+            <svg viewBox="0 0 24 24" focusable="false" width="24" height="24" role="presentation">
+              <g
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.5"
+              >
+                <path d="M2.25 18.003h19.5M2.25 12.003h19.5M2.25 6.003h19.5" />
+              </g>
+            </svg>
+          </button>
+        )}
         <Logo />
-        <Search />
-        <Nav toggleMenu={toggleMenu} />
+        <div
+          css={{
+            display: 'flex',
+            flex: 1,
+
+            [media.md]: {
+              paddingLeft: gridSize * 4,
+            },
+          }}
+        >
+          <div
+            css={{
+              flex: 1,
+
+              [mediaMax.md]: {
+                paddingRight: gridSize * 2,
+              },
+            }}
+          >
+            <Search />
+          </div>
+          <div
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+              paddingLeft: gridSize * 4,
+              paddingRight: gridSize * 3,
+              width: 240,
+
+              [mediaMax.sm]: {
+                display: 'none',
+              },
+            }}
+          >
+            <SocialIconsNav />
+          </div>
+        </div>
       </div>
     </Container>
   </header>
@@ -41,124 +105,51 @@ export const Header = forwardRef(({ toggleMenu, ...props }, ref) => (
 // Styled Components
 // ==============================
 
-const Logo = () => (
-  <div css={{ alignItems: 'center', display: 'inline-flex' }}>
-    <Link
-      to="/"
+export const Logo = () => (
+  <Link
+    to="/"
+    css={mq({
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      color: 'inherit',
+      display: 'inline-flex',
+      fontSize: '0.9rem',
+      padding: [gridSize * 2, null, null, gridSize * 3],
+
+      [mediaMax.md]: {
+        paddingLeft: 0,
+      },
+      [media.md]: {
+        width: SIDEBAR_WIDTH,
+      },
+
+      ':hover': {
+        textDecoration: 'none',
+        span: {
+          textDecoration: 'underline',
+        },
+      },
+    })}
+  >
+    <img
+      alt="KeystoneJS Logo"
+      src={logosvg}
+      css={mq({
+        display: 'block',
+        width: [32, null, null, 40],
+      })}
+    />
+    <span
       css={{
-        alignItems: 'center',
-        color: 'inherit',
-        display: 'inline-flex',
-        fontSize: '0.9rem',
+        display: 'none',
+        marginLeft: '0.66rem',
 
-        ':hover': {
-          textDecoration: 'none',
-          span: {
-            textDecoration: 'underline',
-          },
+        [media.md]: {
+          display: 'block',
         },
       }}
     >
-      <img alt="KeystoneJS Logo" src={logosvg} css={{ display: 'block', width: 40 }} />
-      <span
-        css={{
-          marginLeft: '0.66rem',
-
-          [mediaOnly.sm]: {
-            display: 'none',
-          },
-        }}
-      >
-        KeystoneJS
-      </span>
-      <span
-        css={{
-          display: 'inline-block',
-          color: colors.N40,
-          fontStyle: 'italic',
-          marginLeft: '0.5em',
-        }}
-      >
-        v5
-      </span>
-    </Link>
-  </div>
-);
-const NavItem = ({ as, lgOnly, ...props }) => {
-  const Tag = props.to ? Link : as;
-  return (
-    <li>
-      <Tag
-        css={{
-          alignItems: 'center',
-          background: 0,
-          border: 0,
-          color: colors.N60,
-          cursor: 'pointer',
-          display: 'flex',
-          outline: 0,
-          padding: `${gridSize / 2}px ${gridSize}px`,
-          textDecoration: 'none',
-
-          [mediaMax.xs]: {
-            display: lgOnly ? 'none' : 'block',
-          },
-
-          ':hover, :focus': {
-            color: colors.N80,
-            textDecoration: 'none',
-          },
-        }}
-        {...props}
-      />
-    </li>
-  );
-};
-NavItem.defaultProps = {
-  as: 'a',
-};
-const List = props => (
-  <ul
-    css={{
-      alignItems: 'center',
-      display: 'flex',
-      justifyContent: 'center',
-      listStyle: 'none',
-      margin: 0,
-      padding: 0,
-    }}
-    {...props}
-  />
-);
-const Nav = ({ toggleMenu }) => (
-  <nav>
-    <List>
-      <li>
-        <SocialIconsNav
-          css={{
-            [mediaMax.sm]: {
-              display: 'none',
-            },
-          }}
-        />
-      </li>
-      {toggleMenu && (
-        <NavItem
-          as="button"
-          onClick={toggleMenu}
-          css={{
-            [media.sm]: { display: 'none' },
-          }}
-        >
-          <svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation">
-            <path
-              d="M5 15h14v2H5zm0-8h14v2H5zm0 4h14v2H5z"
-              fill="currentColor"
-              fillRule="evenodd"
-            />
-          </svg>
-        </NavItem>
-      )}
-    </List>
-  </nav>
+      KeystoneJS
+    </span>
+  </Link>
 );