diff --git a/src/components/NavigationItem/__tests__/navigation-item.test.tsx b/src/components/NavigationItem/__tests__/navigation-item.test.tsx index de58cad7e0..240c9ae193 100644 --- 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( + + ); + 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( + + ); + 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 index ae9c346f15..54092e0614 100644 --- 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(null); const handleRef = (ref?: HTMLAnchorElement | null): void => { diff --git a/src/pages/community.tsx b/src/pages/community.tsx index 0dd9a7f6f9..d5b95d1cd8 100644 --- 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(false); + const navElement = useRef(null); + const toggle = (): void => setNavOpen(!navOpen); + const className = navOpen ? 'side-nav side-nav--open' : 'side-nav'; + return ( - + <> + +
+ +
+
+ +