You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.6 KiB
60 lines
1.6 KiB
import React, { Component } from "react"
|
|
import { Link } from "react-router-dom"
|
|
|
|
import './css/Menu.css'
|
|
|
|
export default class Menu extends Component {
|
|
render() {
|
|
const { children } = this.props
|
|
|
|
return (
|
|
<nav className="Menu">
|
|
<h1 className="color-primary">Aite RP</h1>
|
|
<div className="head-menu">
|
|
<HeadMenuLink to="/story/">Story</HeadMenuLink>
|
|
<HeadMenuLink to="/logs/">Logs</HeadMenuLink>
|
|
</div>
|
|
<div className="content">
|
|
{ children }
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
}
|
|
|
|
export function MenuLink({ icon, children, tagKind, to, onClick }) {
|
|
const isSelected = window.location.pathname === to
|
|
const className = isSelected ? "selected" : "not-selected"
|
|
const textClass = isSelected ? "color-primary" : `color-tag-${(tagKind||"none").toLowerCase()}`
|
|
|
|
const body = (
|
|
<div className={`MenuLink color-menu ${className}`} onClick={onClick}>
|
|
<div className="icon color-primary">{icon}</div>
|
|
<div className={`text ${textClass}`}>{children}</div>
|
|
</div>
|
|
)
|
|
|
|
if (to == null) {
|
|
return body
|
|
} else {
|
|
return <Link to={to}>{body}</Link>
|
|
}
|
|
}
|
|
|
|
export function MenuGap() {
|
|
return <div className="MenuGap"></div>
|
|
}
|
|
|
|
export function MenuHeader({children}) {
|
|
return <div className="MenuHeader color-menu">{children}</div>
|
|
}
|
|
|
|
export function HeadMenuLink({to, children}) {
|
|
const className = (window.location.pathname.startsWith(to) ? "color-primary" : "color-menu")
|
|
|
|
return <Link className={className} to={to}>{children}</Link>
|
|
}
|
|
|
|
export function MenuBlurb({children}) {
|
|
return <div className="MenuBlurb">{children}</div>
|
|
}
|