mirror of https://github.com/mitchell/mjfs.us.git
Redesigned routing configuration; modified navbar to create buttons
according to routes
This commit is contained in:
parent
eadcf0ae25
commit
7653a90ff9
|
@ -1,10 +1,11 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from "react"
|
import * as React from "react"
|
||||||
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"
|
||||||
|
|
||||||
import "./index.css"
|
import "./index.css"
|
||||||
|
import { routes } from "../../routes/routes.js"
|
||||||
|
|
||||||
const changeMenu = 800
|
const changeMenu = 800
|
||||||
|
|
||||||
|
@ -15,6 +16,8 @@ type State = {
|
||||||
}
|
}
|
||||||
|
|
||||||
class Navbar extends React.Component<Props, State> {
|
class Navbar extends React.Component<Props, State> {
|
||||||
|
buttons: Array<NavLink<string>>
|
||||||
|
|
||||||
constructor(props: Props) {
|
constructor(props: Props) {
|
||||||
super(props)
|
super(props)
|
||||||
|
|
||||||
|
@ -23,25 +26,40 @@ class Navbar extends React.Component<Props, State> {
|
||||||
} else {
|
} else {
|
||||||
this.state = { showMenu: true }
|
this.state = { showMenu: true }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.buttons = routes.map(route => (
|
||||||
|
<NavLink
|
||||||
|
key={route.name}
|
||||||
|
className="navbar-menu-button"
|
||||||
|
activeClassName="active-button"
|
||||||
|
exact={route.exact}
|
||||||
|
to={route.path}
|
||||||
|
onClick={this.closeMenu}
|
||||||
|
>
|
||||||
|
{route.name}
|
||||||
|
</NavLink>
|
||||||
|
))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
isMobile = () => window.innerWidth <= changeMenu
|
||||||
|
|
||||||
closeMenu = () => {
|
closeMenu = () => {
|
||||||
window.scrollTo(0, 0)
|
window.scrollTo(0, 0)
|
||||||
if (window.innerWidth <= changeMenu) {
|
if (this.isMobile()) {
|
||||||
this.setState({ showMenu: false })
|
this.setState({ showMenu: false })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleMenu = () => {
|
toggleMenu = () => {
|
||||||
if (window.innerWidth <= changeMenu || !this.state.showMenu) {
|
if (this.isMobile() || !this.state.showMenu) {
|
||||||
this.setState(prev => ({ showMenu: !prev.showMenu }))
|
this.setState(prev => ({ showMenu: !prev.showMenu }))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let menuButton = null
|
let menuButton: ?React.Element<string>
|
||||||
|
|
||||||
if (window.innerWidth <= changeMenu) {
|
if (this.isMobile()) {
|
||||||
menuButton = (
|
menuButton = (
|
||||||
<div
|
<div
|
||||||
className={
|
className={
|
||||||
|
@ -60,41 +78,7 @@ class Navbar extends React.Component<Props, State> {
|
||||||
<div className="navbar">
|
<div className="navbar">
|
||||||
{menuButton}
|
{menuButton}
|
||||||
{this.state.showMenu ? (
|
{this.state.showMenu ? (
|
||||||
<div className="navbar-menu">
|
<div className="navbar-menu">{this.buttons}</div>
|
||||||
<NavLink
|
|
||||||
className="navbar-menu-button"
|
|
||||||
activeClassName="active-button"
|
|
||||||
exact
|
|
||||||
to="/"
|
|
||||||
onClick={this.closeMenu}
|
|
||||||
>
|
|
||||||
Home
|
|
||||||
</NavLink>
|
|
||||||
<NavLink
|
|
||||||
className="navbar-menu-button"
|
|
||||||
activeClassName="active-button"
|
|
||||||
to="/projects"
|
|
||||||
onClick={this.closeMenu}
|
|
||||||
>
|
|
||||||
Projects
|
|
||||||
</NavLink>
|
|
||||||
<NavLink
|
|
||||||
className="navbar-menu-button"
|
|
||||||
activeClassName="active-button"
|
|
||||||
to="/experience"
|
|
||||||
onClick={this.closeMenu}
|
|
||||||
>
|
|
||||||
Experience
|
|
||||||
</NavLink>
|
|
||||||
<NavLink
|
|
||||||
className="navbar-menu-button"
|
|
||||||
activeClassName="active-button"
|
|
||||||
to="/contact"
|
|
||||||
onClick={this.closeMenu}
|
|
||||||
>
|
|
||||||
Contact
|
|
||||||
</NavLink>
|
|
||||||
</div>
|
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
@ -2,27 +2,36 @@
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import { Route, Switch } from "react-router-dom"
|
import { Route, Switch } from "react-router-dom"
|
||||||
|
|
||||||
import Home from "../containers/Home"
|
import { routes, redirects } from "./routes.js"
|
||||||
import Projects from "../containers/Projects"
|
|
||||||
import Experience from "../containers/Experience"
|
|
||||||
import Contact from "../containers/Contact"
|
|
||||||
|
|
||||||
type Props = {}
|
type Props = {}
|
||||||
|
|
||||||
class Routes extends React.Component<Props> {
|
class Routes extends React.Component<Props> {
|
||||||
|
routes: Array<Route>
|
||||||
|
redirects: Array<Route>
|
||||||
|
|
||||||
|
constructor(props: Props) {
|
||||||
|
super(props)
|
||||||
|
|
||||||
|
this.routes = routes.map(route => (
|
||||||
|
<Route
|
||||||
|
key={route.name}
|
||||||
|
exact={route.exact}
|
||||||
|
path={route.path}
|
||||||
|
component={route.component}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
|
||||||
|
this.redirects = redirects.map(route => (
|
||||||
|
<Route key={route.path} path={route.path} render={route.func} />
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route exact path="/" component={Home} />
|
{this.routes}
|
||||||
<Route path="/projects" component={Projects} />
|
{this.redirects}
|
||||||
<Route path="/experience" component={Experience} />
|
|
||||||
<Route path="/contact" component={Contact} />
|
|
||||||
<Route
|
|
||||||
path="/linkedin"
|
|
||||||
render={() =>
|
|
||||||
(window.location = "https://linkedin.com/in/mitchelljfsimon")
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Switch>
|
</Switch>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,41 @@
|
||||||
|
// @flow
|
||||||
|
import Home from "../containers/Home"
|
||||||
|
import Projects from "../containers/Projects"
|
||||||
|
import Experience from "../containers/Experience"
|
||||||
|
import Contact from "../containers/Contact"
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
name: "Home",
|
||||||
|
component: Home,
|
||||||
|
exact: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/projects",
|
||||||
|
name: "Projects",
|
||||||
|
component: Projects,
|
||||||
|
exact: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/experience",
|
||||||
|
name: "Experience",
|
||||||
|
component: Experience,
|
||||||
|
exact: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/contact",
|
||||||
|
name: "Contact",
|
||||||
|
component: Contact,
|
||||||
|
exact: false
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const redirects = [
|
||||||
|
{
|
||||||
|
path: "/linkedin",
|
||||||
|
func: () => (window.location = "https://linkedin.com/in/mitchelljfsimon")
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export { routes, redirects }
|
Loading…
Reference in New Issue