nodejs · benhalverson · Mar 25, 2021 · Mar 25, 2021 · Mar 25, 2021 · Mar 24, 2021
diff --git a/src/components/NavigationItem/__tests__/navigation-item.test.tsx b/src/components/NavigationItem/__tests__/navigation-item.test.tsx
@@ -20,4 +20,50 @@ describe('NavigationItem component', (): void => {
     );
     expect(container).toMatchSnapshot();
   });
+
+  it('renders nav item styles for learn page by default', (): void => {
+    render(
+      <NavigationItem
+        key="123"
+        isRead
+        isActive
+        isLearn
+        slug="versioning"
+        title="Versioning"
+        onClick={noop}
+      />
+    );
+    const sideNavElement = document.getElementsByClassName('side-nav__item')[0];
+    expect(sideNavElement).toBeDefined();
+    expect(sideNavElement).toBeInTheDocument();
+    expect(sideNavElement).toBeVisible();
+
+    const communitySideNavElms = document.getElementsByClassName(
+      'side-nav__item-community'
+    );
+    expect(communitySideNavElms.length).toBe(0);
+  });
+
+  it('renders nav item styles for community page when isLearn is false', (): void => {
+    render(
+      <NavigationItem
+        key="123"
+        isRead
+        isActive
+        isLearn={false}
+        slug="versioning"
+        title="Versioning"
+        onClick={noop}
+      />
+    );
+    const communitySideNavElement = document.getElementsByClassName(
+      'side-nav__item-community'
+    )[0];
+    expect(communitySideNavElement).toBeDefined();
+    expect(communitySideNavElement).toBeInTheDocument();
+    expect(communitySideNavElement).toBeVisible();
+
+    const sideNavElements = document.getElementsByClassName('side-nav__item');
+    expect(sideNavElements.length).toBe(0);
+  });
 });
diff --git a/src/components/NavigationItem/index.tsx b/src/components/NavigationItem/index.tsx
@@ -4,24 +4,30 @@ import classnames from 'classnames';
 
 interface Props {
   key: string;
+  isLearn?: boolean;
   isRead: boolean;
   isActive: boolean;
   slug: string;
   title: string;
-  onClick: () => void;
+  onClick?: () => void;
 }
 
 const NavigationItem = ({
+  isLearn = true,
   isRead,
   isActive,
   slug,
   title,
   onClick,
 }: Props): JSX.Element => {
-  const className = classnames('t-body2 side-nav__item', {
-    'side-nav__item--done': isRead,
-    'side-nav__item--active': !isRead && isActive,
-  });
+  const className = isLearn
+    ? classnames('t-body2 side-nav__item', {
+        'side-nav__item--done': isRead,
+        'side-nav__item--active': !isRead && isActive,
+      })
+    : classnames('t-body2 side-nav__item-community', {
+        'side-nav__item-community--active': isActive,
+      });
 
   const element = useRef<HTMLAnchorElement | null>(null);
   const handleRef = (ref?: HTMLAnchorElement | null): void => {

diff --git a/src/pages/community.tsx b/src/pages/community.tsx
@@ -1,23 +1,112 @@
+import React, { useState, useRef } from 'react';
 import { graphql } from 'gatsby';
-import React from 'react';
-import { Page } from '../types';
-import PageLayout from '../components/Layout/page';
+import { Page, CommunityNavigationSection } from '../types';
+import Layout from '../components/Layout';
+import Article from '../components/Article';
+import Footer from '../components/Footer';
+import NavigationItem from '../components/NavigationItem';
 
-export default function CommunityPage({ data, location }: Page): JSX.Element {
+import '../styles/article-reader.scss';
+import '../styles/community.scss';
+
+const commNavSections: CommunityNavigationSection[] = [
+  {
+    title: 'Comms',
+    sections: ['Forums', 'Mailing Lists', 'Chats'],
+  },
+  {
+    title: 'Jobs',
+    sections: [],
+  },
+  {
+    title: 'Conferences',
+    sections: ['Future Conferences', 'Past Conferences'],
+  },
+  {
+    title: 'Community',
+    sections: ['User Groups', 'Meet-ups'],
+  },
+  {
+    title: 'News',
+    sections: ['Official Publications', 'Community Publications', 'Podcasts'],
+  },
+  {
+    title: 'Education',
+    sections: ['Community Resources'],
+  },
+  {
+    title: 'Tooling',
+    sections: ['3rd Party Libraries'],
+  },
+  {
+    title: 'Collaboration',
+    sections: ['Contributing', 'Reporting Issues'],
+  },
+];
+
+export default function CommunityPage({ data }: Page): JSX.Element {
   const { title, description } = data.page.frontmatter;
   const { html, tableOfContents } = data.page;
   const { authors } = data.page.fields;
 
+  const [navOpen, setNavOpen] = useState<boolean>(false);
+  const navElement = useRef<HTMLElement | null>(null);
+  const toggle = (): void => setNavOpen(!navOpen);
+  const className = navOpen ? 'side-nav side-nav--open' : 'side-nav';
+
   return (
-    <PageLayout
-      title={title}
-      description={description}
-      html={html}
-      authors={authors}
-      tableOfContents={tableOfContents}
-      editPath="content/community/index.md"
-      location={location}
-    />
+    <>
+      <Layout title={title} description={description} showFooter={false}>
+        <main className="grid-container">
+          <nav className={className} ref={navElement}>
+            <button type="button" className="side-nav__open" onClick={toggle}>
+              Menu
+            </button>
+            <ul className="community-nav__list">
+              {commNavSections.map(({ title: commTitle, sections }) => {
+                return (
+                  <>
+                    <NavigationItem
+                      key={commTitle}
+                      title={commTitle}
+                      isLearn={false}
+                      isRead={false}
+                      isActive={false}
+                      slug={commTitle}
+                    />
+                    <ul className="community-nav__sub-list">
+                      {sections.map(section => {
+                        return (
+                          <li
+                            key={section}
+                            className="community-nav__sub-list-item"
+                          >
+                            <a
+                              href={`#${section}`}
+                              className="t-body2 community-nav__sub-list-link"
+                            >
+                              {section}
+                            </a>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </>
+                );
+              })}
+            </ul>
+          </nav>
+          <Article
+            title={title}
+            html={html}
+            tableOfContents={tableOfContents}
+            authors={authors}
+            editPath="content/community/index.md"
+          />
+        </main>
+      </Layout>
+      <Footer />
+    </>
   );
 }
 

diff --git a/src/styles/community.scss b/src/styles/community.scss
@@ -0,0 +1,72 @@
+.side-nav__item-community {
+  align-items: center;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  list-style: none;
+  margin: 0 0 0 var(--space-24);
+  padding: calc(var(--space-20) / 2) 0 calc(var(--space-20) / 2) var(--space-12);
+  position: relative;
+  color: var(--color-text-primary);
+  text-decoration: none;
+  display: block;
+
+  &::before {
+    background-size: 2.4rem;
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 2px var(--color-border-accent);
+    box-sizing: border-box;
+    content: ' ';
+    display: block;
+    height: 2.4rem;
+    left: -2.4rem;
+    padding: 2px 4px;
+    position: absolute;
+    top: 1rem;
+    transition: box-shadow 0.28s;
+    overflow: hidden;
+    width: 2.4rem;
+    line-height: 2.6rem;
+  }
+
+  &.side-nav__item-community--done::before {
+    content: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0OC44IDQ0OC44IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NDguOCA0NDguODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJjaGVjayI+CgkJPHBvbHlnb24gcG9pbnRzPSIxNDIuOCwzMjMuODUgMzUuNywyMTYuNzUgMCwyNTIuNDUgMTQyLjgsMzk1LjI1IDQ0OC44LDg5LjI1IDQxMy4xLDUzLjU1ICAgIiBmaWxsPSIjZjVmNmY3Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
+  }
+
+  &.side-nav__item-community--active {
+    color: var(--color-text-accent);
+    font-weight: 600;
+  }
+
+  &.side-nav__item-community--done::before,
+  &.side-nav__item-community--active::before {
+    box-shadow: inset 0 0 0 2.4rem var(--color-border-accent);
+  }
+
+  &:hover::before {
+    box-shadow: inset 0 0 0 2.4rem var(--color-border-accent) !important;
+  }
+}
+
+.community-nav__list {
+  list-style: none;
+  padding: 0 var(--space-20);
+}
+
+.community-nav__sub-list {
+  list-style: none;
+  padding: 0 0 0 var(--space-24);
+}
+
+.community-nav__sub-list-item {
+  list-style: none;
+}
+
+.community-nav__sub-list-link {
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  transition: color 0.15s;
+  padding: calc(var(--space-20) / 2) 0 calc(var(--space-20) / 2) var(--space-12);
+  display: block;
+}
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -93,3 +93,8 @@ export interface Page {
   };
   location?: Location;
 }
+
+export interface CommunityNavigationSection {
+  title: string;
+  sections: string[];
+}