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",
|
||||
"version": "0.2.20",
|
||||
"version": "0.3.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome": "^1.1.8",
|
||||
|
@ -8,7 +8,6 @@
|
|||
"@fortawesome/react-fontawesome": "^0.0.19",
|
||||
"react": "^16.3.2",
|
||||
"react-dom": "^16.3.2",
|
||||
"react-responsive-navbar": "^1.0.11",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-scripts": "1.1.4"
|
||||
},
|
||||
|
|
|
@ -8,15 +8,16 @@
|
|||
.main-container {
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
max-width: 500px;
|
||||
min-width: 50%;
|
||||
min-width: 800px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
@media screen and (max-width: 800px) {
|
||||
.main-container {
|
||||
margin-bottom: 50px;
|
||||
margin-top: auto;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -14,7 +14,7 @@ class Website extends React.Component<Props> {
|
|||
return (
|
||||
<div className="website">
|
||||
<div className="main-container">
|
||||
<Navbar />
|
||||
<Navbar changeMenu={800} />
|
||||
<Header />
|
||||
<Routes />
|
||||
</div>
|
||||
|
|
|
@ -7,12 +7,6 @@
|
|||
top: 0;
|
||||
}
|
||||
|
||||
.navbar-small {
|
||||
bottom: 0;
|
||||
padding-bottom: 5px;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.navbar-button {
|
||||
background-color: rgb(139, 191, 209);
|
||||
border-radius: 2px;
|
||||
|
@ -23,7 +17,7 @@
|
|||
transition: box-shadow 0.1s;
|
||||
}
|
||||
|
||||
.navbar-button-close {
|
||||
.navbar-button-closed {
|
||||
background-color: rgb(173, 184, 209);
|
||||
}
|
||||
|
||||
|
@ -32,7 +26,8 @@
|
|||
}
|
||||
|
||||
.navbar-menu {
|
||||
margin: 0 23.75%;
|
||||
margin: auto;
|
||||
min-width: 840px;
|
||||
width: 52.5%;
|
||||
}
|
||||
|
||||
|
@ -62,9 +57,16 @@
|
|||
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 {
|
||||
margin: auto;
|
||||
min-width: 0;
|
||||
width: 75%;
|
||||
}
|
||||
.navbar-menu-button {
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
// @flow
|
||||
import React from "react"
|
||||
import ResponsiveMenu from "react-responsive-navbar"
|
||||
import { NavLink } from "react-router-dom"
|
||||
import FontAwesomeIcon from "@fortawesome/react-fontawesome"
|
||||
import faBars from "@fortawesome/fontawesome-free-solid/faBars"
|
||||
|
@ -9,30 +8,60 @@ import "./index.css"
|
|||
|
||||
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() {
|
||||
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 (
|
||||
<ResponsiveMenu
|
||||
menuOpenButton={
|
||||
<div className="navbar-button">
|
||||
<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">
|
||||
{menuButton}
|
||||
{this.state.showMenu ? (
|
||||
<div className="navbar-menu">
|
||||
<NavLink
|
||||
className="navbar-menu-button"
|
||||
activeClassName="active-button"
|
||||
exact
|
||||
to="/"
|
||||
onClick={this.toggleMenu}
|
||||
>
|
||||
Home
|
||||
</NavLink>
|
||||
|
@ -40,6 +69,7 @@ class Navbar extends React.Component<Props> {
|
|||
className="navbar-menu-button"
|
||||
activeClassName="active-button"
|
||||
to="/projects"
|
||||
onClick={this.toggleMenu}
|
||||
>
|
||||
Projects
|
||||
</NavLink>
|
||||
|
@ -47,6 +77,7 @@ class Navbar extends React.Component<Props> {
|
|||
className="navbar-menu-button"
|
||||
activeClassName="active-button"
|
||||
to="/experience"
|
||||
onClick={this.toggleMenu}
|
||||
>
|
||||
Experience
|
||||
</NavLink>
|
||||
|
@ -54,12 +85,13 @@ class Navbar extends React.Component<Props> {
|
|||
className="navbar-menu-button"
|
||||
activeClassName="active-button"
|
||||
to="/contact"
|
||||
onClick={this.toggleMenu}
|
||||
>
|
||||
Contact
|
||||
</NavLink>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue