Skip to content
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ module.exports = {
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-fontawesome-css`,
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
Expand Down
5 changes: 5 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,14 @@
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-brands-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/react-fontawesome": "^0.1.11",
"babel-plugin-styled-components": "^1.11.1",
"gatsby": "^2.24.50",
"gatsby-image": "^2.4.16",
"gatsby-plugin-fontawesome-css": "^1.0.0",
"gatsby-plugin-alias-imports": "^1.0.5",
"gatsby-plugin-manifest": "^2.4.24",
"gatsby-plugin-offline": "^3.2.24",
Expand Down
122 changes: 92 additions & 30 deletions src/components/header.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,97 @@
import { Link } from "gatsby"

import PropTypes from "prop-types"
import React from "react"

const Header = ({ siteTitle }) => (
<header
style={{
background: `rebeccapurple`,
marginBottom: `1.45rem`,
}}
>
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `1.45rem 1.0875rem`,
}}
>
<h1 style={{ margin: 0 }}>
<Link
to="/"
style={{
color: `white`,
textDecoration: `none`,
}}
>
{siteTitle}
</Link>
</h1>
</div>
</header>
)
import React, { useState } from "react"
import styled from "styled-components"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faGithub } from "@fortawesome/free-brands-svg-icons"
import { faBars } from "@fortawesome/free-solid-svg-icons"
import Navbar from "./navbar"
const HeaderContent = styled.header`
background: #ffffff;
height: 3.2em;
display: flex;
align-content: center;
box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);
`

const Nav = styled.nav`
display: flex;
justify-content: space-between;
align-items: center;
width: 98%;
margin-left: auto;
margin-right: auto;
#nav-toggle {
position: absolute;
}
`

const NavbarBrand = styled.span`
font-size: 1.25rem;
white-space: nowrap;
&:hover {
cursor: pointer;
}
`

const Title = styled.h5`
color: #fff;
background-color: #212529;
padding: 0.2rem 0.4rem;
border-radius: 0.2rem;
margin: 0;
font-weight: 400;
font-family: Consolas;
line-height: 21px;
font-size: 18px;
`
const NavbarButton = styled.span`
font-family: Segoe UI;
font-weight: 700;
color: #343a40;
padding: 6px 10px;
&:hover {
cursor: pointer;
color: black;
}
@media screen and (min-width: 992px) {
color: black;
}
`
const BurgerButton = styled(NavbarButton)`
display: none;
@media (max-width: 992px) {
display: block;
}
font-size: 28px;
`

const Header = ({ siteTitle }) => {
const [open, setOpen] = useState(false)

return (
<>
<HeaderContent>
<Nav>
<NavbarBrand>
<Link style={{ textDecoration: "none" }} to="/">
<kbd>
<Title>DominicanWho.Codes</Title>
</kbd>
</Link>
</NavbarBrand>
<Navbar open={open} />
<BurgerButton onClick={() => setOpen(!open)}>
<FontAwesomeIcon className="github-icon" icon={faBars} />
</BurgerButton>
</Nav>
</HeaderContent>
</>
)
}

Header.propTypes = {
siteTitle: PropTypes.string,
Expand Down
109 changes: 109 additions & 0 deletions src/components/navbar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import { Link } from "gatsby"
import styled from "styled-components"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faGithub, faOpencart } from "@fortawesome/free-brands-svg-icons"
import PropTypes from "prop-types"
import React, { useState } from "react"

const NavbarContainer = styled.ul<{ open: boolean }>`
color: black;
font-weight: w600;
display: flex;
justify-content: center;
align-items: center;
margin-top: 2.6em;
@media screen and (max-width: 992px) {
position: fixed;
align-item: flex-start;
margin-top: 0;
padding: 1em;
z-index: 9;
left: -27px;
right: 0;
top: 3.2em;
bottom: 0;
width: auto;
flex-direction: column;
display: ${props => (props.open ? "block;" : "none;")};
background-color: #fff;
height: 7em;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
overflow: hidden;
.github-icon {
display: none;
}
}
`

const NavbarItem = styled.li`
list-style: none;
margin-right: 0.3rem;
display: flex;
width: 100%;
height: 2em;
display: block;
@media screen and (max-width: 992px) {
a {
color: black;
}
}
`

const NavbarButton = styled.span`
font-family: Segoe UI;
font-weight: 700;
padding: 6px 10px;
&:hover {
cursor: pointer;
color: black;
}
a {
color: black;
}
@media screen and (min-width: 992px) {
color: black;
}
`

const NominateButton = styled(NavbarButton)`
margin-top: 2em;
color: #343a40;
background-color: #343a40;
border-radius: 3px;
&:hover {
cursor: pointer;
background-color: black;
}
`

const Navbar = ({ open }) => {
return (
<NavbarContainer open={open}>
<NavbarItem>
<NavbarButton>
<a
target="_blank"
style={{ textDecoration: "none" }}
href="https://github.com/DevsDO/whocode-frontend"
>
<FontAwesomeIcon icon={faGithub} /> About
</a>
</NavbarButton>
</NavbarItem>
<NavbarItem>
<NominateButton>
<Link style={{ textDecoration: "none", color: "#fff" }} to="/">
Nominate
</Link>
</NominateButton>
</NavbarItem>
</NavbarContainer>
)
}
Navbar.propTypes = {
open: PropTypes.bool,
}
export default Navbar
38 changes: 38 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1414,6 +1414,39 @@
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==

"@fortawesome/fontawesome-common-types@^0.2.30":
version "0.2.30"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz#2f1cc5b46bd76723be41d0013a8450c9ba92b777"
integrity sha512-TsRwpTuKwFNiPhk1UfKgw7zNPeV5RhNp2Uw3pws+9gDAkPGKrtjR1y2lI3SYn7+YzyfuNknflpBA1LRKjt7hMg==

"@fortawesome/fontawesome-svg-core@^1.2.30":
version "1.2.30"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.30.tgz#f56dc6791861fe5d1af04fb8abddb94658c576db"
integrity sha512-E3sAXATKCSVnT17HYmZjjbcmwihrNOCkoU7dVMlasrcwiJAHxSKeZ+4WN5O+ElgO/FaYgJmASl8p9N7/B/RttA==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.30"

"@fortawesome/free-brands-svg-icons@^5.14.0":
version "5.14.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.14.0.tgz#98555518ba41bdff82fbae2f4d1bc36cd3b1c043"
integrity sha512-WsqPFTvJFI7MYkcy0jeFE2zY+blC4OrnB9MJOcn1NxRXT/sSfEEhrI7CwzIkiYajLiVDBKWeErYOvpsMeodmCQ==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.30"

"@fortawesome/free-solid-svg-icons@^5.14.0":
version "5.14.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.14.0.tgz#970453f5e8c4915ad57856c3a0252ac63f6fec18"
integrity sha512-M933RDM8cecaKMWDSk3FRYdnzWGW7kBBlGNGfvqLVwcwhUPNj9gcw+xZMrqBdRqxnSXdl3zWzTCNNGEtFUq67Q==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.30"

"@fortawesome/react-fontawesome@^0.1.11":
version "0.1.11"
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.11.tgz#c1a95a2bdb6a18fa97b355a563832e248bf6ef4a"
integrity sha512-sClfojasRifQKI0OPqTy8Ln8iIhnxR/Pv/hukBhWnBz9kQRmqi6JSH3nghlhAY7SUeIIM7B5/D2G8WjX0iepVg==
dependencies:
prop-types "^15.7.2"

"@graphql-tools/schema@^6.0.14":
version "6.2.0"
resolved "https://registry.yarnpkg.com/@graphql-tools/schema/-/schema-6.2.0.tgz#41171cdaeb7d7835a458628f0c546fef2bae3a64"
Expand Down Expand Up @@ -8963,6 +8996,11 @@ gatsby-plugin-alias-imports@^1.0.5:
dependencies:
"@babel/runtime" "^7.2.0"

gatsby-plugin-fontawesome-css@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/gatsby-plugin-fontawesome-css/-/gatsby-plugin-fontawesome-css-1.0.0.tgz#12b0d9e4eb45f9321556e83accfa93fc6627d608"
integrity sha512-jToy7WSlNjCtcFWjS7/W1U8jJggKBv2hZhatYyNXELfxvl3eFvuJGlDYYDDKtMzv57N5hbXwUvJ+iW21+FcDOA==

gatsby-plugin-manifest@^2.4.24:
version "2.4.27"
resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.4.27.tgz#e87102137efcb1fe66ab27f913241f9c1b2f4fa7"
Expand Down