feat: create a documentation layout for desktops & tablets (#23)

* feat: create a documentation layout for desktops & tablets

* feat: create initial layout for mobile

* create layout for tablet & move things to css variables & implement some transitions

* code review

* Fix build

Co-authored-by: Michal Miszczyszyn <[email protected]>

Author: wisnie

docs/package.json

@@ -23,6 +23,7 @@
     "prettier": "2.3.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "sass": "^1.35.1",
     "rehype-autolink-headings": "5.1.0",
     "rehype-document": "5.1.0",
     "rehype-format": "3.1.0",

docs/public/icons/chevron-down.svg

@@ -0,0 +1,50 @@
+.accordionWrapper {
+  margin-bottom: 0.45rem;
+}
+
+.accordionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    .accordionHeading {
+      color: var(--active);
+    }
+  }
+}
+
+.accordionHeading {
+  font-size: 0.875rem;
+  color: var(--gray-900);
+  font-weight: 600;
+  text-transform: uppercase;
+  transition: 300ms color ease-in;
+
+  &Active {
+    color: var(--active);
+  }
+}
+
+.accordionChevron {
+  transform: rotate(0);
+
+  &Expanded {
+    transform: rotate(180deg);
+  }
+}
+
+.accordionSectionList {
+  padding: 0 0.75rem;
+  list-style: none;
+}
+
+.accordionSection {
+  padding: 0.125rem 0;
+}
+
+.accordionSectionAnchor {
+  font-size: 0.75rem;
+  color: var(--gray-700);
+}

docs/public/icons/chevron-up.svg

@@ -0,0 +1,39 @@
+import { memo, useCallback, useState } from 'react';
+import styles from './Accordion.module.scss';
+
+type AccordionProps = {
+  heading: string;
+  isActive: boolean;
+  sections?: string[];
+};
+export const Accordion = memo<AccordionProps>(({ heading, isActive, sections }) => {
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const hasSections = sections && sections.length > 0;
+  const toggleExpanded = useCallback(() => setExpanded((prev) => !prev), []);
+  return (
+    <div className={styles.accordionWrapper}>
+      <header className={styles.accordionHeader} onClick={toggleExpanded}>
+        <h3 className={`${styles.accordionHeading} ${isActive ? styles.accordionHeadingActive : ''}`}>{heading}</h3>
+        {hasSections && (
+          <img
+            className={`${styles.accordionChevron} ${expanded ? styles.accordionChevronExpanded : ''}`}
+            src="/icons/chevron-down.svg"
+            alt={expanded ? 'Accordion expanded' : 'Accordion collapsed'}
+          />
+        )}
+      </header>
+      {hasSections && expanded && (
+        <ul className={styles.accordionSectionList}>
+          {sections?.map((section) => (
+            <li className={styles.accordionSection} key={section}>
+              <a className={styles.accordionSectionAnchor} href="#">
+                {section}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+});
+Accordion.displayName = 'Accordion';

docs/public/icons/menu.svg

@@ -0,0 +1,69 @@
+.header {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  padding: 1.35rem 1.25rem;
+  background-color: var(--nav-background);
+  min-height: var(--header-height);
+  z-index: 100;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  @media screen and (min-width: 55rem) {
+    padding: 0;
+  }
+}
+
+.srOnly {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.toggleButton {
+  background-color: transparent;
+  border: none;
+  @media screen and (min-width: 55rem) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--reference-width);
+  }
+}
+
+.menuIcon {
+  cursor: pointer;
+  filter: invert(100%);
+}
+
+.nav {
+  display: none;
+
+  @media screen and (min-width: 75rem) {
+    display: block;
+    width: 100%;
+    max-width: calc(100% - var(--reference-width) - var(--table-of-contents-width));
+    margin: 0 var(--table-of-contents-width) 0 auto;
+    background-color: var(--nav-background);
+  }
+}
+
+.navList {
+  display: flex;
+  justify-content: flex-end;
+  list-style: none;
+}
+
+.navItem {
+  padding: 0.25rem 1rem;
+}
+
+.navAnchor {
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--white);
+}

docs/src/components/Accordion/Accordion.module.scss

@@ -0,0 +1,38 @@
+import { memo } from 'react';
+
+import styles from './Header.module.scss';
+
+type HeaderProps = {
+  toggleMenuOpened: () => void;
+};
+
+export const Header = memo<HeaderProps>(({ toggleMenuOpened }) => {
+  return (
+    <header className={styles.header}>
+      <button className={styles.toggleButton} onClick={toggleMenuOpened}>
+        <span className={styles.srOnly}>Toggle reference sidebar</span>
+        <img className={styles.menuIcon} src="/icons/menu.svg" alt="Menu" />
+      </button>
+      <nav className={styles.nav}>
+        <ul className={styles.navList}>
+          <li className={styles.navItem}>
+            <a className={styles.navAnchor} href="#">
+              Documentation
+            </a>
+          </li>
+          <li className={styles.navItem}>
+            <a className={styles.navAnchor} href="#">
+              API
+            </a>
+          </li>
+          <li className={styles.navItem}>
+            <a className={styles.navAnchor} href="#">
+              Github
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  );
+});
+Header.displayName = 'Header';

docs/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,27 @@
+.reference {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: var(--section-background);
+  padding: 1.25rem;
+  padding-top: calc(2rem + var(--header-height));
+  transform: translateX(-100%);
+  transition: 200ms transform ease-in;
+
+  &Opened {
+    transform: translateX(0);
+  }
+
+  @media screen and (min-width: 55rem) {
+    // padding-top: 2rem;
+    // height: auto;
+    // max-height: calc(100vh - var(--header-height));
+    // transform: translateX(0);
+    // position: sticky;
+    // top: var(--header-height);
+    width: var(--reference-width);
+    // background-color: var(--section-background);
+    // flex-shrink: 0;
+  }
+}

docs/src/components/Header/Header.module.scss

@@ -0,0 +1,23 @@
+import { memo } from 'react';
+import { Accordion } from '../Accordion/Accordion';
+import styles from './Reference.module.scss';
+
+export type ReferenceType = {
+  heading: string;
+  sections?: string[];
+}[];
+
+type ReferenceProps = {
+  reference: ReferenceType;
+  menuOpened: boolean;
+};
+
+export const Reference = memo<ReferenceProps>(({ reference, menuOpened }) => (
+  <section className={`${styles.reference} ${menuOpened ? styles.referenceOpened : ''}`}>
+    {reference.map(({ heading, sections }) => (
+      // isActive should be derived from the current url
+      <Accordion isActive={false} key={heading} heading={heading} sections={sections} />
+    ))}
+  </section>
+));
+Reference.displayName = 'Reference';

docs/src/components/Header/Header.tsx

@@ -0,0 +1,51 @@
+.tableOfContentsWrapper {
+  display: none;
+
+  @media screen and (min-width: 75rem) {
+    display: block;
+    width: var(--table-of-contents-width);
+    flex-shrink: 0;
+    padding: 3rem 2rem;
+  }
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+}
+
+.listItem {
+  position: relative;
+  padding: 0.25rem 1rem;
+}
+
+.anchor {
+  position: relative;
+  font-size: 0.875rem;
+  font-weight: 400;
+  text-decoration: none;
+  color: var(--text-700);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: -1.5rem;
+    top: 50%;
+    width: 0.5rem;
+    height: 0.5rem;
+    transform: translateY(-50%);
+    border: 1px solid var(--gray-500);
+    border-radius: 50%;
+  }
+
+  &Active {
+    font-weight: 600;
+    color: var(--active);
+
+    &::before {
+      border: 1px solid var(--active);
+      background-color: var(--active);
+    }
+  }
+}

docs/src/components/Reference/Reference.module.scss

@@ -0,0 +1,21 @@
+import { memo } from 'react';
+import styles from './TableOfContents.module.scss';
+
+type TableOfContentsProps = {
+  headings: string[];
+  activeHeading: string;
+};
+export const TableOfContents = memo<TableOfContentsProps>(({ headings, activeHeading }) => {
+  return (
+    <section className={styles.tableOfContentsWrapper}>
+      <ol className={styles.list}>
+        {headings.map((heading) => (
+          <li className={styles.listItem} key={heading}>
+            <a className={`${styles.anchor} ${heading === activeHeading ? styles.anchorActive : ''}`}>{heading}</a>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+});
+TableOfContents.displayName = 'TableOfContents';

docs/src/components/Reference/Reference.tsx

@@ -1,5 +1,6 @@
 import type { AppComponent } from 'next/dist/next-server/lib/router/router';
-import '../styles/globals.css';
+
+import '../styles/globals.scss';
 import '../styles/prism.css';
 
 const App: AppComponent = ({ Component, pageProps }) => {