fix(website): initial layout

packages/website/components/Layout.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { css } from '@emotion/core';
+import tokens from '@ruids/tokens';
+import { Navbar } from './Navigation/Navbar';
+import { ContentItem } from '@/lib/api';
+import { Sidenav } from './Navigation/Sidenav';
+
+const layout = {
+  navigation: css({
+    position: 'sticky',
+    top: '4rem',
+    zIndex: 1000,
+    height: 'calc(100vh - 4rem)',
+    backgroundColor: tokens.colorNeutral20,
+    borderRight: `1px solid ${tokens.colorNeutral30}`,
+  }),
+};
+
+interface LayoutProps {
+  navigation: ContentItem[];
+}
+
+export const Layout: React.FC<LayoutProps> = ({ navigation, children }) => {
+  return (
+    <div>
+      <Navbar items={navigation} />
+      <div className="w-full px-4 mx-auto" style={{ boxSizing: 'border-box' }}>
+        <div className="grid grid-flow-col grid-cols-12 -mx-4">
+          <div className="col-span-2 px-4" css={layout.navigation}>
+            <Sidenav items={navigation} />
+          </div>
+          <main className="col-span-10 py-8 px-16">{children}</main>
+        </div>
+      </div>
+    </div>
+  );
+};

packages/website/components/Navigation/Navbar.tsx

@@ -0,0 +1,99 @@
+import React, { useMemo } from 'react';
+import { css } from '@emotion/core';
+import tokens from '@ruids/tokens';
+import Link from 'next/link';
+import { ContentItem } from '@/lib/api';
+import { useRouter } from 'next/router';
+
+const styles = {
+  primary: css({
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    padding: `${tokens.spacing4} ${tokens.spacing2}`,
+    flexFlow: 'row nowrap',
+    justifyContent: 'flex-start',
+    height: '4rem',
+    position: 'sticky',
+    top: 0,
+    zIndex: 1040,
+    backgroundColor: tokens.colorNeutral800,
+  }),
+  left: css({
+    marginLeft: 'auto',
+    color: tokens.colorNeutral0,
+  }),
+  listItem: css({
+    boxSizing: 'border-box',
+    height: '4rem',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    display: 'flex',
+    margin: 0,
+    paddingLeft: tokens.spacing4,
+  }),
+  link: (active: boolean) =>
+    css({
+      display: 'flex',
+      alignItems: 'center',
+      height: '100%',
+      transition: 'color 0.1s ease-in-out 0s',
+      position: 'relative',
+      cursor: 'pointer',
+      textDecoration: 'none',
+      padding: `0 ${tokens.spacing4}`,
+      color: tokens.colorNeutral0,
+      backgroundColor: active ? tokens.colorNeutral900 : 'transparent',
+      fontSize: tokens.textSm,
+      ':hover': {
+        backgroundColor: tokens.colorNeutral600,
+      },
+    }),
+};
+
+export const NavLink: React.FC<{
+  item: ContentItem;
+}> = ({ item }) => {
+  const router = useRouter();
+
+  const active = useMemo(() => {
+    if (router.asPath === item.to) {
+      return true;
+    }
+    return false;
+  }, [item.to]);
+
+  return (
+    <Link href={item.to}>
+      <li css={styles.listItem}>
+        <a css={styles.link(active)}>{item.title}</a>
+      </li>
+    </Link>
+  );
+};
+
+interface NavbarProps {
+  items: ContentItem[];
+}
+
+export const Navbar: React.FC<NavbarProps> = ({ items }) => {
+  return (
+    <header role="banner" css={styles.primary}>
+      <ul
+        id="top"
+        role="navigation"
+        className="flex flex-row p-0 m-0"
+        css={css({
+          listStyle: 'none',
+        })}
+      >
+        {items.map((item, index) => (
+          <NavLink key={`navbar-${item.title}-${index}`} item={item} />
+        ))}
+      </ul>
+      <div className="pr-5" css={styles.left}>
+        side
+      </div>
+    </header>
+  );
+};

packages/website/components/Navigation/Sidenav.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+import { ContentItem } from '@/lib/api';
+import { css } from '@emotion/core';
+import tokens from '@ruids/tokens';
+import Link from 'next/link';
+
+const styles = {
+  wrapper: css({
+    boxSizing: 'border-box',
+    borderTop: `1px solid ${tokens.colorNeutral30}`,
+    overflow: 'hidden',
+    display: 'block',
+    height: '100%',
+  }),
+  nav: css({
+    height: '100%',
+    overflow: 'auto',
+    marginRight: '-40px',
+    paddingRight: 'calc(40px + 1rem)',
+  }),
+  link: (children: boolean) =>
+    css({
+      color: tokens.colorTextDark,
+      cursor: 'pointer',
+      fontWeight: children ? tokens.fontBold : tokens.fontNormal,
+      ':hover': {
+        color: tokens.colorTextLightest,
+      },
+    }),
+  childBox: css({
+    marginTop: tokens.spacing1,
+    marginBottom: tokens.spacing4,
+  }),
+};
+
+const NavItem: React.FC<{
+  item: ContentItem;
+}> = ({ item }) => {
+  const { children } = item;
+  return (
+    <div data-children={!!children?.length}>
+      <Link href={item.to}>
+        <a css={styles.link(!!children.length)}>{item.title}</a>
+      </Link>
+      {!!children.length && (
+        <div css={styles.childBox}>
+          {children.map((c, i) => (
+            <Link href={c.to}>
+              <a css={styles.link(false)}>{c.title}</a>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const Sidenav: React.FC<{
+  items: ContentItem[];
+}> = ({ items }) => {
+  return (
+    <React.Fragment>
+      <div css={styles.wrapper}>
+        <nav role="complementary" css={styles.nav} className="pt-2 pb-4">
+          {items.map((item, index) => (
+            <NavItem key={`sidenav-${item.title}-${index}`} item={item} />
+          ))}
+        </nav>
+        sidenav
+      </div>
+    </React.Fragment>
+  );
+};

packages/website/components/index.ts

@@ -1,4 +1,4 @@
 export { AppContext } from './AppContext/AppContext';
 export { Head } from './Head';
 export { Navigation } from './Navigation';
-export { Frame, PageContent, Page } from './Page';
+export { Layout } from './Layout';

packages/website/pages/[...slug].tsx

@@ -1,25 +1,23 @@
 import React from 'react';
 import { NextPage, GetStaticPaths, GetStaticProps } from 'next';
-import { Head, Navigation } from '../components';
+import { Head, Navigation, Layout } from '../components';
 import { Container, Heading, Paragraph, Button } from '@ruids/components';
 import { getAllDocs, ContentItem, getContentByPath } from '@/lib/api';
 import { Markdown } from '@/components/Markdown/Markdown';
 
 type Props = {
   content: ContentItem;
+  navigation: ContentItem[];
 };
 
-export const Home: NextPage<Props> = ({ content }) => {
-  //console.log(content);
+export const Home: NextPage<Props> = ({ content, navigation }) => {
   if (!content.examples?.length) {
     return (
       <React.Fragment>
         <Head title={content.title} description={content.description} />
-        <Navigation />
-
-        <Container>
+        <Layout navigation={navigation}>
           <Markdown source={content.content} />
-        </Container>
+        </Layout>
       </React.Fragment>
     );
   }
@@ -31,13 +29,12 @@ export const Home: NextPage<Props> = ({ content }) => {
   return (
     <React.Fragment>
       <Head title={content.title} description={content.description} />
-      <Navigation />
 
-      <Container>
+      <Layout navigation={navigation}>
         <Markdown source={header} />
         i have examples!
         <Markdown source={footer} />
-      </Container>
+      </Layout>
     </React.Fragment>
   );
 };
@@ -81,11 +78,12 @@ export const getStaticPaths: GetStaticPaths<{
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
   const item = getContentByPath(params.slug);
-
+  const { content: Navigation } = getAllDocs();
   return {
     props: {
       content: item,
       slug: params.slug,
+      navigation: Navigation,
     },
   };
 };