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
|
||||
import React from "react"
|
||||
import * as React from "react"
|
||||
import { NavLink } from "react-router-dom"
|
||||
import FontAwesomeIcon from "@fortawesome/react-fontawesome"
|
||||
import faBars from "@fortawesome/fontawesome-free-solid/faBars"
|
||||
|
||||
import "./index.css"
|
||||
import { routes } from "../../routes/routes.js"
|
||||
|
||||
const changeMenu = 800
|
||||
|
||||
|
@ -15,6 +16,8 @@ type State = {
|
|||
}
|
||||
|
||||
class Navbar extends React.Component<Props, State> {
|
||||
buttons: Array<NavLink<string>>
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
|
||||
|
@ -23,25 +26,40 @@ class Navbar extends React.Component<Props, State> {
|
|||
} else {
|
||||
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 = () => {
|
||||
window.scrollTo(0, 0)
|
||||
if (window.innerWidth <= changeMenu) {
|
||||
if (this.isMobile()) {
|
||||
this.setState({ showMenu: false })
|
||||
}
|
||||
}
|
||||
|
||||
toggleMenu = () => {
|
||||
if (window.innerWidth <= changeMenu || !this.state.showMenu) {
|
||||
if (this.isMobile() || !this.state.showMenu) {
|
||||
this.setState(prev => ({ showMenu: !prev.showMenu }))
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let menuButton = null
|
||||
let menuButton: ?React.Element<string>
|
||||
|
||||
if (window.innerWidth <= changeMenu) {
|
||||
if (this.isMobile()) {
|
||||
menuButton = (
|
||||
<div
|
||||
className={
|
||||
|
@ -60,41 +78,7 @@ class Navbar extends React.Component<Props, State> {
|
|||
<div className="navbar">
|
||||
{menuButton}
|
||||
{this.state.showMenu ? (
|
||||
<div className="navbar-menu">
|
||||
<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>
|
||||
<div className="navbar-menu">{this.buttons}</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -2,27 +2,36 @@
|
|||
import React from "react"
|
||||
import { Route, Switch } from "react-router-dom"
|
||||
|
||||
import Home from "../containers/Home"
|
||||
import Projects from "../containers/Projects"
|
||||
import Experience from "../containers/Experience"
|
||||
import Contact from "../containers/Contact"
|
||||
import { routes, redirects } from "./routes.js"
|
||||
|
||||
type 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() {
|
||||
return (
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route path="/projects" component={Projects} />
|
||||
<Route path="/experience" component={Experience} />
|
||||
<Route path="/contact" component={Contact} />
|
||||
<Route
|
||||
path="/linkedin"
|
||||
render={() =>
|
||||
(window.location = "https://linkedin.com/in/mitchelljfsimon")
|
||||
}
|
||||
/>
|
||||
{this.routes}
|
||||
{this.redirects}
|
||||
</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