84 lines
2.0 KiB
JavaScript
84 lines
2.0 KiB
JavaScript
import React from "react";
|
|
import { Link } from "react-router-dom";
|
|
import styled from "@emotion/styled";
|
|
import { compose } from "recompose";
|
|
import { withTheme } from "emotion-theming";
|
|
|
|
import { todayUrl, yearUrl } from "../../utils/date";
|
|
|
|
import Logo from "../Logo";
|
|
import Icon from "../Icon";
|
|
import { withAuthentication } from "../session";
|
|
|
|
const Header = styled.div`
|
|
background-color: ${props => props.theme.colors.headerBackground};
|
|
height: 60px;
|
|
display: grid;
|
|
grid-template-areas: "... nav ...";
|
|
grid-template-columns: 1fr minmax(240px, 720px) 1fr;
|
|
grid-gap: 10px;
|
|
align-items: center;
|
|
border-width: 1px;
|
|
border-color: ${props => props.theme.colors.quarternary};
|
|
border-style: solid;
|
|
`;
|
|
const Nav = styled.div`
|
|
grid-area: nav;
|
|
max-width: 720px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-content: center;
|
|
`;
|
|
const LogoSection = styled.div`
|
|
width: 40px;
|
|
`;
|
|
const NavIcons = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
* + * {
|
|
margin-left: 10px;
|
|
}
|
|
`;
|
|
|
|
const Navbar = ({ authUser, theme, toggleTheme }) => (
|
|
<Header>
|
|
<Nav>
|
|
<LogoSection>
|
|
<Logo color={theme.colors.logo} />
|
|
</LogoSection>
|
|
<NavIcons>
|
|
<Icon
|
|
onClick={() => toggleTheme()}
|
|
name={theme.name === "Dark" ? "Sun" : "Moon"}
|
|
/>
|
|
{authUser ? (
|
|
<React.Fragment>
|
|
<Link to={yearUrl()}>
|
|
<Icon name="Calendar" />
|
|
</Link>
|
|
<Link to={todayUrl()}>
|
|
<Icon name="Book" />
|
|
</Link>
|
|
<Link to={"/user"}>
|
|
<Icon name="User" />
|
|
</Link>
|
|
</React.Fragment>
|
|
) : (
|
|
<React.Fragment>
|
|
<Link to={"/"}>Landing</Link>
|
|
<Link to={"/login"}>Login</Link>
|
|
<Link to={"/register"}>Register</Link>
|
|
</React.Fragment>
|
|
)}
|
|
</NavIcons>
|
|
</Nav>
|
|
</Header>
|
|
);
|
|
|
|
export default compose(
|
|
withAuthentication,
|
|
withTheme
|
|
)(Navbar);
|