mirror of https://github.com/mitchell/mjfs.us.git
Swapped out 3rd party responsive menu component and built out my own;
version bump
This commit is contained in:
parent
34dba26cb3
commit
5ffc1e9843
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "react-website",
|
"name": "react-website",
|
||||||
"version": "0.2.20",
|
"version": "0.3.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome": "^1.1.8",
|
"@fortawesome/fontawesome": "^1.1.8",
|
||||||
|
@ -8,7 +8,6 @@
|
||||||
"@fortawesome/react-fontawesome": "^0.0.19",
|
"@fortawesome/react-fontawesome": "^0.0.19",
|
||||||
"react": "^16.3.2",
|
"react": "^16.3.2",
|
||||||
"react-dom": "^16.3.2",
|
"react-dom": "^16.3.2",
|
||||||
"react-responsive-navbar": "^1.0.11",
|
|
||||||
"react-router-dom": "^4.2.2",
|
"react-router-dom": "^4.2.2",
|
||||||
"react-scripts": "1.1.4"
|
"react-scripts": "1.1.4"
|
||||||
},
|
},
|
||||||
|
|
|
@ -8,15 +8,16 @@
|
||||||
.main-container {
|
.main-container {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
max-width: 500px;
|
min-width: 800px;
|
||||||
min-width: 50%;
|
width: 50%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
@media screen and (max-width: 800px) {
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
|
min-width: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,7 +14,7 @@ class Website extends React.Component<Props> {
|
||||||
return (
|
return (
|
||||||
<div className="website">
|
<div className="website">
|
||||||
<div className="main-container">
|
<div className="main-container">
|
||||||
<Navbar />
|
<Navbar changeMenu={800} />
|
||||||
<Header />
|
<Header />
|
||||||
<Routes />
|
<Routes />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -7,12 +7,6 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-small {
|
|
||||||
bottom: 0;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-button {
|
.navbar-button {
|
||||||
background-color: rgb(139, 191, 209);
|
background-color: rgb(139, 191, 209);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
@ -23,7 +17,7 @@
|
||||||
transition: box-shadow 0.1s;
|
transition: box-shadow 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-button-close {
|
.navbar-button-closed {
|
||||||
background-color: rgb(173, 184, 209);
|
background-color: rgb(173, 184, 209);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -32,7 +26,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-menu {
|
.navbar-menu {
|
||||||
margin: 0 23.75%;
|
margin: auto;
|
||||||
|
min-width: 840px;
|
||||||
width: 52.5%;
|
width: 52.5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -62,9 +57,16 @@
|
||||||
background-color: rgb(139, 191, 209);
|
background-color: rgb(139, 191, 209);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
@media screen and (max-width: 800px) {
|
||||||
|
.navbar {
|
||||||
|
bottom: 0;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-menu {
|
.navbar-menu {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
min-width: 0;
|
||||||
width: 75%;
|
width: 75%;
|
||||||
}
|
}
|
||||||
.navbar-menu-button {
|
.navbar-menu-button {
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import ResponsiveMenu from "react-responsive-navbar"
|
|
||||||
import { NavLink } from "react-router-dom"
|
import { NavLink } from "react-router-dom"
|
||||||
import FontAwesomeIcon from "@fortawesome/react-fontawesome"
|
import FontAwesomeIcon from "@fortawesome/react-fontawesome"
|
||||||
import faBars from "@fortawesome/fontawesome-free-solid/faBars"
|
import faBars from "@fortawesome/fontawesome-free-solid/faBars"
|
||||||
|
@ -9,30 +8,60 @@ import "./index.css"
|
||||||
|
|
||||||
type Props = {}
|
type Props = {}
|
||||||
|
|
||||||
class Navbar extends React.Component<Props> {
|
type State = {
|
||||||
|
showMenu: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
class Navbar extends React.Component<Props, State> {
|
||||||
|
static defaultProps: Props
|
||||||
|
changeMenu: number
|
||||||
|
|
||||||
|
constructor(props: Props) {
|
||||||
|
super(props)
|
||||||
|
this.changeMenu = 800
|
||||||
|
|
||||||
|
if (window.innerWidth <= this.changeMenu) {
|
||||||
|
this.state = { showMenu: false }
|
||||||
|
} else {
|
||||||
|
this.state = { showMenu: true }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleMenu = () => {
|
||||||
|
if (window.innerWidth <= this.changeMenu || !this.state.showMenu) {
|
||||||
|
this.setState(prev => ({ showMenu: !prev.showMenu }))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
let menuButton = null
|
||||||
|
|
||||||
|
if (window.innerWidth <= this.changeMenu) {
|
||||||
|
menuButton = (
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
this.state.showMenu
|
||||||
|
? "navbar-button navbar-button-closed"
|
||||||
|
: "navbar-button"
|
||||||
|
}
|
||||||
|
onClick={this.toggleMenu}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faBars} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ResponsiveMenu
|
<div className="navbar">
|
||||||
menuOpenButton={
|
{menuButton}
|
||||||
<div className="navbar-button">
|
{this.state.showMenu ? (
|
||||||
<FontAwesomeIcon icon={faBars} />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
menuCloseButton={
|
|
||||||
<div className="navbar-button navbar-button-close">
|
|
||||||
<FontAwesomeIcon icon={faBars} />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
changeMenuOn="500px"
|
|
||||||
largeMenuClassName="navbar"
|
|
||||||
smallMenuClassName="navbar navbar-small"
|
|
||||||
menu={
|
|
||||||
<div className="navbar-menu">
|
<div className="navbar-menu">
|
||||||
<NavLink
|
<NavLink
|
||||||
className="navbar-menu-button"
|
className="navbar-menu-button"
|
||||||
activeClassName="active-button"
|
activeClassName="active-button"
|
||||||
exact
|
exact
|
||||||
to="/"
|
to="/"
|
||||||
|
onClick={this.toggleMenu}
|
||||||
>
|
>
|
||||||
Home
|
Home
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
@ -40,6 +69,7 @@ class Navbar extends React.Component<Props> {
|
||||||
className="navbar-menu-button"
|
className="navbar-menu-button"
|
||||||
activeClassName="active-button"
|
activeClassName="active-button"
|
||||||
to="/projects"
|
to="/projects"
|
||||||
|
onClick={this.toggleMenu}
|
||||||
>
|
>
|
||||||
Projects
|
Projects
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
@ -47,6 +77,7 @@ class Navbar extends React.Component<Props> {
|
||||||
className="navbar-menu-button"
|
className="navbar-menu-button"
|
||||||
activeClassName="active-button"
|
activeClassName="active-button"
|
||||||
to="/experience"
|
to="/experience"
|
||||||
|
onClick={this.toggleMenu}
|
||||||
>
|
>
|
||||||
Experience
|
Experience
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
@ -54,12 +85,13 @@ class Navbar extends React.Component<Props> {
|
||||||
className="navbar-menu-button"
|
className="navbar-menu-button"
|
||||||
activeClassName="active-button"
|
activeClassName="active-button"
|
||||||
to="/contact"
|
to="/contact"
|
||||||
|
onClick={this.toggleMenu}
|
||||||
>
|
>
|
||||||
Contact
|
Contact
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
}
|
) : null}
|
||||||
/>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue