80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import React from 'react'
|
|
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
|
|
import 'bootstrap/dist/css/bootstrap.min.css'
|
|
|
|
const NavLink: React.FunctionComponent<{href: string}> = ({href, children}) => {
|
|
const router = useRouter();
|
|
const NavLinkClasses = (active) => {
|
|
if(active) {
|
|
return "nav-link active";
|
|
} else {
|
|
return "nav-link"
|
|
}
|
|
}
|
|
const NavLinkCurrent = (active) => {
|
|
if(active) {
|
|
return "page";
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
const active = router.pathname == href;
|
|
|
|
return (
|
|
<li className='nav-item active'>
|
|
<Link href={href}>
|
|
<a className={NavLinkClasses(active)} aria-current={NavLinkCurrent}>{children}</a>
|
|
</Link>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
const NavBar: React.FunctionComponent<{}> = () => {
|
|
return (
|
|
<nav className='navbar navbar-expand-lg navbar-light bg-light'>
|
|
<a className='navbar-brand' href='#'>
|
|
Navbar
|
|
</a>
|
|
<button
|
|
className='navbar-toggler'
|
|
type='button'
|
|
data-toggle='collapse'
|
|
data-target='#navbarSupportedContent'
|
|
aria-controls='navbarSupportedContent'
|
|
aria-expanded='false'
|
|
aria-label='Toggle navigation'
|
|
>
|
|
<span className='navbar-toggler-icon' />
|
|
</button>
|
|
<div className='collapse navbar-collapse' id='navbarSupportedContent'>
|
|
<ul className='navbar-nav mr-auto'>
|
|
<NavLink href="/">Home</NavLink>
|
|
<NavLink href="/todo">Todo</NavLink>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
export class Layout extends React.Component<{
|
|
title: string
|
|
}> {
|
|
render () {
|
|
return (
|
|
<div>
|
|
<Head>
|
|
<meta name='viewport' content='width=device-width, initial-scale=1' />
|
|
<title>{this.props.title} - TestAppRuna</title>
|
|
</Head>
|
|
<header>
|
|
<NavBar />
|
|
</header>
|
|
<main>{this.props.children}</main>
|
|
<footer></footer>
|
|
</div>
|
|
)
|
|
}
|
|
}
|