Merge pull request #1 from cornellacsu/will-team

Team page + navbar

package.json

@@ -6,13 +6,13 @@
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
     "bootstrap": "^4.3.1",
-    "gatsby": "^2.1.4",
+    "gatsby": "^2.8.5",
     "gatsby-image": "^2.0.29",
     "gatsby-plugin-less": "^2.0.12",
     "gatsby-plugin-manifest": "^2.0.17",
-    "gatsby-plugin-offline": "^2.0.23",
+    "gatsby-plugin-offline": "^2.1.1",
     "gatsby-plugin-react-helmet": "^3.0.6",
-    "gatsby-plugin-sharp": "^2.0.20",
+    "gatsby-plugin-sharp": "^2.1.3",
     "gatsby-source-filesystem": "^2.0.29",
     "gatsby-transformer-json": "^2.1.11",
     "gatsby-transformer-sharp": "^2.1.13",

src/components/alumniContainer.js

@@ -0,0 +1,16 @@
+import { Container } from 'semantic-ui-react'
+import Officer from './officer'
+import React from "react"
+import '../styles/teamContainers.css'
+
+const AlumniContainer = ({ alumni }) => (
+    <Container>
+        <div className="officers-container">
+            {
+                alumni.map((officer, idx) => <Officer key={idx} {...officer} />)
+            }
+        </div>
+    </Container>
+)
+
+export default AlumniContainer

src/components/navbar.js

@@ -1,93 +1,68 @@
 import { Link } from "gatsby"
-import { Menu, Dropdown, Container, Image, Header, Grid } from "semantic-ui-react"
-import PropTypes from "prop-types"
-import React from "react"
+import { Menu, Image, Icon } from "semantic-ui-react"
+import React, { Component } from "react"
 import "../styles/navbar.css"
 
-const Navbar = ({ siteTitle }) => (
-    <div>
-    <Container textAlign="center" className="site-header">
-      <Header 
-        className="orgname"
-        as={Link}
-        to="/"
-      >
-        <Image
-          className="logo"
-          // TODO replace w/ local paths
-          src="images/logo_ACSU.png"
-          //src="https://acsu.cornell.edu/img/logo_ACSU_short_transparent.png"
-          /> ACSU
-        </Header>
-    </Container>
-
-    <Menu borderless stackable>
-    <Container className="navbar">
-        <Dropdown item text="ABOUT">
-          <Dropdown.Menu>
-            <Dropdown.Item as={Link} to="/about" text="WHAT IS ACSU?" />
-            <Dropdown.Item>OFFICERS</Dropdown.Item>
-          </Dropdown.Menu>
-        </Dropdown>
-
-        <Dropdown item text="EVENTS">
-          <Dropdown.Menu>
-            <Dropdown.Item>CALENDAR</Dropdown.Item>
-            <Dropdown.Item>G-BODY</Dropdown.Item>
-          </Dropdown.Menu>
-        </Dropdown>
-
-        <Dropdown item text="RESOURCES">
-          <Dropdown.Menu>
-            <Dropdown.Item>ACSU README</Dropdown.Item>
-            <Dropdown.Item>RESUME BOOK</Dropdown.Item>
-            <Dropdown.Item>CS WIKI</Dropdown.Item>
-          </Dropdown.Menu>
-        </Dropdown>
-
-        <Menu.Item as="a"
-          name="Sponsor"
-        >
-          SPONSOR
-          </Menu.Item>
-
-        <Menu.Item as="a"
-          name="Hacsu"
-        >
-          HACSU
-        </Menu.Item>
+const MOBILE_BREAKPOINT = 768;
 
-        <Menu.Item as="a"
-          name="Hacsu"
-        >
-          JOIN
-        </Menu.Item>
+class Navbar extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            navbarVisible: true
+        }
+    }
 
-        <Menu.Item as="a" header>
-        <Image
-          className="social-media-icon"
-          src="https://acsu.cornell.edu/img/icons/facebook-icon2.png"
-        />
-        </Menu.Item>
-
-        <Menu.Item as="a" header>
-        <Image
-          className="social-media-icon"
-          src="https://acsu.cornell.edu/img/icons/insta-icon.png"
-        />
-        </Menu.Item>
+    toggleNavbar = () => {
+        this.setState(prevState => ({ navbarVisible: !prevState.navbarVisible }))
+    }
+
+    resize = () => {
+        let shouldShowNavbar = window.innerWidth > MOBILE_BREAKPOINT
+        if (shouldShowNavbar !== this.state.navbarVisible) {
+            this.setState({ navbarVisible: shouldShowNavbar })
+        }
+    }
 
-      </Container> 
-      </Menu>
-      </div>
-)
+    componentDidMount() {
+        window.addEventListener("resize", this.resize)
+        this.resize()
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener("resize", this.resize)
+    }
 
-Navbar.propTypes = {
-  siteTitle: PropTypes.string,
-}
+    render() {
+        const { activePage } = this.props
+        const pages = ["team", "events", "resources", "sponsors", "join"]
 
-Navbar.defaultProps = {
-  siteTitle: ``,
+        return (
+            <nav className="navbar">
+                <Icon id="mobile-hamburger" name={ this.state.navbarVisible ? "times" : "bars" } onClick={this.toggleNavbar} />
+                <Link className="logo" to="/">
+                    <Image className="logo-image" src="images/logo_ACSU.png" />
+                    <span>ACSU</span>
+                </Link>
+                <Menu className={ this.state.navbarVisible ? "navbar-links visible" : "navbar-links hidden" } borderless stackable widths={5}>
+                    {
+                        pages.map((page, idx) => 
+                            <Menu.Item
+                                key={idx}
+                                className={idx !== pages.length - 1 ? "link" : "link last"}
+                                as={Link}
+                                to={`/${page}`}
+                                name={page}
+                                active={activePage === page}
+                            >
+                                <span>{page.charAt(0).toUpperCase() + page.slice(1)}</span>
+                            </Menu.Item>
+                        )
+                    }
+                </Menu>
+            </nav>
+        )
+    }
 }
 
 export default Navbar

src/components/officer.js

@@ -0,0 +1,14 @@
+import { Image, Icon } from "semantic-ui-react"
+import { StaticQuery, graphql } from "gatsby"
+import React from "react"
+import "../styles/officer.css"
+
+const Officer = ({ name, position, year, img, email }) => (
+    <div className="officer">
+        <Image src={img} rounded />
+        <h5>{`${name} '${year}`}</h5>
+        <p>{position} {email && <a href={`mailto:${email}@cornell.edu`}><Icon name="envelope" /></a>}</p>
+    </div>
+)
+
+export default Officer

src/components/teamContainer.js

@@ -0,0 +1,42 @@
+import { Container, Header } from 'semantic-ui-react'
+import Officer from './officer'
+import React from "react"
+import '../styles/teamContainers.css'
+
+const executiveBoard = ["President", "Vice President", "Treasurer", "Secretary"]
+
+const TeamContainer = ({ activeTeam, officers }) => (
+    <>
+        <Container>
+            <Header as="h2" className="officers-header">{ activeTeam === "Leadership" ? "Executive Board" : "Team Leads" }</Header>
+            <div className="officers-container">
+                {
+                    officers.filter(officer => {
+                        if (activeTeam === "Leadership") {
+                            const reducer = (acc, curr) => officer.position.includes(curr) || acc
+                            return executiveBoard.reduce(reducer, false)
+                        } else {
+                            return officer.position.includes(activeTeam + " Chair")
+                        }
+                    }).map((officer, idx) => <Officer key={idx} {...officer} />)
+                }
+            </div>
+        </Container>
+        <Container>
+            <Header as="h2" className="officers-header">{ activeTeam === "Leadership" ? "Team Leads" : "Officers" }</Header>
+            <div className="officers-container">
+                {
+                    officers.filter(officer => {
+                        if (activeTeam === "Leadership") {
+                            return officer.position.includes("Chair")
+                        } else {
+                            return !officer.position.includes("Chair") && officer.team === activeTeam
+                        }
+                    }).map((officer, idx) => <Officer key={idx} {...officer} />)
+                }
+            </div>
+        </Container>
+    </>
+)
+
+export default TeamContainer