Skip to content

Commit

Permalink
feat(Navbar): Add Navbar (#119)
Browse files Browse the repository at this point in the history 
* navbar skeleton

* links and logo

* box shadows

* showlogo and title props

* logo changes

* feat(component): responsive nav

fix #113

* icons

* clean up props a little bit
  • Loading branch information
@mindip
mindip authored Nov 28, 2018
1 parent 0ab3f6a commit 345e375
Show file tree
Hide file tree
Showing 5 changed files with 223 additions and 0 deletions.
3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,9 @@
"travis-deploy-once": "travis-deploy-once"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@fortawesome/react-fontawesome": "^0.1.3",
"emotion": "^9.2.12",
"emotion-server": "^9.2.12",
"gatsby-plugin-emotion": "^2.0.6",
Expand Down
Binary file added src/components/Navbar/db-logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 31 additions & 0 deletions src/components/Navbar/index.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
name: Navbar
route: /navbar
---

import { Playground, PropsTable } from 'docz'
import Navbar from '.'

# Navbar

Web pages have navigation bars sometimes.

<PropsTable of={Navbar} />

<Playground>
<Navbar sticky={true} showLogo={true} title={"Fake Title"}
links={[<a href="/">Index</a>, <a href="/navbar">Navbar</a>, <a href="/footer">Footer</a>]}/>
<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lacinia arcu at lorem scelerisque efficitur. Vestibulum quis nunc vulputate, facilisis est volutpat, congue libero. Duis eget imperdiet lorem. In eu sem gravida, lacinia sem in, posuere velit. Ut feugiat non ex non lobortis. Vestibulum viverra elit vel purus scelerisque vulputate. Nulla congue nisi sed augue blandit, sed tincidunt nibh placerat. Praesent eleifend sapien et velit ultrices, in pellentesque lacus feugiat. Quisque dictum leo eget urna eleifend ultricies. Aliquam porta eros id nulla sollicitudin tincidunt. Donec tristique ex vitae dolor porttitor hendrerit. Donec sed interdum orci, ac ullamcorper augue. Donec ipsum tellus, ornare sit amet blandit non, volutpat in sem.

Nullam quis lorem ut nunc pharetra egestas at ac est. Sed et lorem ac justo venenatis vestibulum sed aliquam nibh. Duis sodales nisl odio, a ullamcorper lacus venenatis id. Nullam quis gravida nisi. Duis libero nisi, laoreet id dolor sed, pharetra malesuada nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin purus dui, tristique vitae cursus sit amet, tincidunt quis sapien. Donec vel ex at eros viverra gravida non quis mi. Suspendisse eros lorem, accumsan vitae interdum vitae, congue ut nibh. Vivamus bibendum, enim vel lacinia viverra, magna odio luctus arcu, sed tempus ligula urna in nisi. Mauris ornare suscipit ultrices. Proin pellentesque ligula accumsan arcu blandit placerat. Ut ut iaculis lectus, ac placerat diam. Donec nec posuere ipsum. Praesent et magna vel orci efficitur tincidunt. Nullam feugiat lectus ipsum, nec porttitor neque condimentum a.

Phasellus rutrum cursus fermentum. Sed ullamcorper blandit lobortis. Sed vulputate dui eget orci congue, et eleifend mauris tempor. Aliquam iaculis eros sapien, ut finibus enim feugiat vitae. Nam dictum dignissim eros a malesuada. Sed iaculis auctor lectus. Nunc quis mattis nisl, ullamcorper luctus sapien. Sed sed molestie velit. Phasellus sodales, nulla eu malesuada laoreet, mi lacus tristique nisi, a sollicitudin nisi justo eu eros. Duis eleifend posuere eros at elementum. Morbi rutrum dolor sed sapien pretium auctor. Sed nec fermentum lectus, vitae mollis nulla. Duis sed ligula nisi.

Aenean magna magna, rutrum in mauris quis, varius euismod sem. Etiam ligula magna, dapibus et rhoncus sodales, finibus sit amet lorem. Integer viverra ligula ut neque consequat, nec maximus nisi sollicitudin. Nulla ut ante dolor. Proin eu diam ut nisl luctus consectetur. Nunc quam sapien, cursus a dui nec, iaculis commodo elit. Maecenas malesuada augue libero. Aenean sit amet hendrerit nibh. Curabitur fringilla sapien sit amet augue imperdiet lobortis. Vivamus eu nunc elit. In ac congue urna.

Duis cursus viverra justo et sollicitudin. In hac habitasse platea dictumst. Cras in mattis sem. Proin hendrerit eget erat a porttitor. Sed eu felis dui. Nam ut mattis erat. Fusce consequat diam et fringilla faucibus. Donec dapibus, turpis euismod interdum varius, purus nunc mattis lorem, vel iaculis velit urna vel nisl. Fusce dignissim fermentum velit vitae lacinia. Sed viverra ex non tincidunt laoreet. Suspendisse ex velit, bibendum ac arcu eu, vehicula malesuada ante. Nam luctus ultricies lacus, ut sollicitudin arcu aliquet ut.
</div>

</Playground>
157 changes: 157 additions & 0 deletions src/components/Navbar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import * as React from 'react'
import { css } from 'react-emotion'
import logoSrc from './db-logo.png'

interface NavbarProps {
/** Array of React elements. */
links?: React.ReactNode[]
/** custom style applied to individual links. */
linkStyle?: string
/** Logo can be text or an image. */
showLogo: boolean
/** Site title. */
title: string
/** Logo link. */
logoURL: string
/** Pins navbar (or not). */
sticky?: boolean
/** custom style applied to the navbar. */
style?: string
}

class Navbar extends React.Component<NavbarProps> {
public static defaultProps = {
logoURL: '/',
sticky: false,
}

public state = {
open: false,
}

public handleClick = () => {
this.setState({ open: !this.state.open })
}

public render() {
const sticky = css`
position: sticky;
top: 0;
`

const navbarStyle = css`
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.15);
padding: 10px;
display: flex;
justify-content: space-between;
width: 100%;
background-color: white;
${this.props.style};
${this.props.sticky ? sticky : ''};
`
const linkStyle = css`
@media (min-width: 940px) {
padding-right: 3rem;
align-self: center;
}
color: #65696c;
font-weight: 500;
font-size: 1rem;
a {
color: inherit; /* blue colors for links too */
text-decoration: inherit; /* no underline */
font-family: inherit;
font-weight: inherit;
font-size: inherit;
}
${this.props.linkStyle};
`
const linksMobileStyle = css`
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
`

const logoStyle = css`
a {
color: inherit; /* blue colors for links too */
text-decoration: inherit; /* no underline */
font-family: inherit;
font-weight: inherit;
font-size: inherit;
}
img {
overflow: hidden;
vertical-align: bottom;
margin-right: 20px;
width: 50px;
}
display: flex;
align-items: center;
`
const linksStyle = css`
display: flex;
justify-content: space-between;
@media screen and (max-width: 940px) {
display: none;
}
`

const logo = (
<a href={this.props.logoURL}>
{this.props.showLogo && <img src={logoSrc} />}
</a>
)

const links = this.props.links
? this.props.links.map((link, i) => {
return (
<div key={i} className={linkStyle}>
{link}
</div>
)
})
: undefined

return (
<div className={navbarStyle}>
<div className={logoStyle}>
{this.props.showLogo && logo}
<h2>{this.props.title}</h2>
</div>
<div className={linksStyle}>{links}</div>
<details
className={css`
width: 100%;
justify-self: end;
text-align: right;
font-size: 2rem;
@media (min-width: 940px) {
display: none;
}
`}
>
<summary
className={css`
font-size: 1rem;
::-webkit-details-marker {
display: none;
}
`}
>
<div onClick={this.handleClick}>
{' '}
<FontAwesomeIcon icon={this.state.open ? faTimes : faBars} />{' '}
</div>
</summary>
<div className={linksMobileStyle}>{links}</div>
</details>
</div>
)
}
}

export default Navbar
32 changes: 32 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1506,6 +1506,33 @@
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.8.1.tgz#f3a81587ad8d0ef33cdad6f3b4310774fcc1053e"
integrity sha512-dEv1n+IFtlvLQ8/FsTOtBCC1aNT4B5abE8ODF5wk2tpWnjvgGNRMvHCeJGbVHjFfer4h8MH2w9c2/6eoJHclMg==

"@fortawesome/fontawesome-common-types@^0.2.8":
version "0.2.8"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.8.tgz#8cacd1efd1aa956e1ef173f0abcf2ce1b7a0c66f"
integrity sha512-0sU7JDLdEeGQlWBSr5uEE6PZOM15YM1s9rFlpZV+WhNdX2V6Co3Sj0OW5el4F54X1Tw+nfxf4Cc3dUedudaDWg==

"@fortawesome/fontawesome-svg-core@^1.2.8":
version "1.2.8"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.8.tgz#b802b7f3d5b9d9d92ae92c18e865df468dcdf561"
integrity sha512-cvcMQZ5F8WSNSGMk9uWlkmZNfDzmdsWLRrTMrNwwihHcEmWRlIuSbDt+PQ/rXsnGmJnmLQJLFBT1cse/3swxbg==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.8"

"@fortawesome/free-solid-svg-icons@^5.5.0":
version "5.5.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.5.0.tgz#4d815df4bba076f209eb409bc56d9d830367a7c0"
integrity sha512-VawIT2owNP97EwehZmxkvZDhoKwEevU/1HOMkln6kc4OtfE+JKYr6DpyzQnHVWXvz/eFj36QElHNe6zT8gR+Tg==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.8"

"@fortawesome/react-fontawesome@^0.1.3":
version "0.1.3"
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.3.tgz#266b4047892c3d10498af1075d89252f74015b11"
integrity sha512-tc689l67rPZ7+ynZVUgOXY80rAt5KxvuH1qjPpJcbyJzJHzk5yhrD993BjsSEdPBLTtPqmvwynsO/XrAQqHbtg==
dependencies:
humps "^2.0.1"
prop-types "^15.5.10"

"@hbetts/parse-repository-url@^2.1.1":
version "2.1.2"
resolved "https://registry.yarnpkg.com/@hbetts/parse-repository-url/-/parse-repository-url-2.1.2.tgz#f78e6950529be9fd0b904fc90e06b078ddf4a847"
Expand Down Expand Up @@ -9576,6 +9603,11 @@ humanize-string@^1.0.2:
dependencies:
decamelize "^1.0.0"

humps@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
integrity sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=

[email protected]:
version "1.2.0"
resolved "https://registry.yarnpkg.com/husky/-/husky-1.2.0.tgz#d631dda1e4a9ee8ba69a10b0c51a0e2c66e711e5"
Expand Down

0 comments on commit 345e375

Please sign in to comment.