mirror of
https://github.com/cupcakearmy/obolus.git
synced 2024-12-23 00:26:30 +00:00
117 lines
3.7 KiB
JavaScript
Executable File
117 lines
3.7 KiB
JavaScript
Executable File
import React from 'react'
|
|
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
|
|
import { logout } from '../utils/auth'
|
|
import { getRandomSlogan } from '../utils/misc'
|
|
|
|
|
|
const Layout = ({ children }) => {
|
|
const title = getRandomSlogan()
|
|
|
|
return <React.Fragment>
|
|
<Head>
|
|
<title>{title}</title>
|
|
|
|
{/* https://www.flaticon.com/packs/zoo-20 */}
|
|
<link rel="stylesheet" href="/static/css/spectre.min.css"/>
|
|
<link rel="stylesheet" href="/static/css/spectre-exp.min.css"/>
|
|
<link rel="stylesheet" href="/static/css/spectre-icons.min.css"/>
|
|
<link rel="stylesheet" href="/static/css/main.css"/>
|
|
|
|
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
|
|
</Head>
|
|
|
|
<div id='navbar-container'>
|
|
<header className="navbar">
|
|
<section className="navbar-section">
|
|
<Link href='/'>
|
|
<a className="btn btn-link">
|
|
<img src={'/static/icons/ui/trending.svg'} alt={'overview'}/>
|
|
<span className={'hide-sm'}> Overview</span>
|
|
</a>
|
|
</Link>
|
|
<Link href='/new'>
|
|
<a className="btn btn-link">
|
|
<img src={'/static/icons/ui/add.svg'} alt={'add'}/>
|
|
<span className={'hide-sm'}> New</span>
|
|
</a>
|
|
</Link>
|
|
<Link href='/list'>
|
|
<a className="btn btn-link">
|
|
<img src={'/static/icons/ui/check.svg'} alt={'list'}/>
|
|
<span className={'hide-sm'}> List</span>
|
|
</a>
|
|
</Link>
|
|
</section>
|
|
<section className="navbar-center hide-sm">
|
|
<b>{title}</b>
|
|
</section>
|
|
<section className="navbar-section">
|
|
<Link href='/me'>
|
|
<a className="btn btn-link">
|
|
<img src={'/static/icons/ui/me.svg'} alt={'profile'}/>
|
|
<span className={'hide-sm'}> Me</span>
|
|
</a>
|
|
</Link>
|
|
<a onClick={logout} className="btn btn-link">
|
|
<img src={'/static/icons/ui/logout.svg'} alt={'add'}/>
|
|
<span className={'hide-sm'}> Logout</span>
|
|
</a>
|
|
</section>
|
|
</header>
|
|
</div>
|
|
|
|
<main>
|
|
<div className="container">
|
|
<div id='content'>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* language=CSS */}
|
|
<style jsx>{`
|
|
main {
|
|
padding: 6em 0;
|
|
}
|
|
|
|
#navbar-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
padding: 1em;
|
|
box-shadow: 0 -0.4em 1em -0.5em;
|
|
background-color: var(--clr-white);
|
|
z-index: 10;
|
|
}
|
|
|
|
#navbar-container header {
|
|
max-width: 50em;
|
|
margin: auto;
|
|
}
|
|
|
|
#content {
|
|
width: 100%;
|
|
max-width: 32em;
|
|
margin: auto;
|
|
}
|
|
|
|
.navbar a {
|
|
color: inherit;
|
|
}
|
|
|
|
.navbar a img {
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
vertical-align: bottom;
|
|
}
|
|
`}</style>
|
|
|
|
</React.Fragment>
|
|
}
|
|
|
|
|
|
export default Layout
|