pashto-grammar/src/components/Header.js

40 lines
1.4 KiB
JavaScript
Raw Normal View History

2021-03-06 10:40:31 +00:00
/**
* Copyright (c) 2021 lingdocs.com
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
2021-10-18 05:00:02 +00:00
import { Link } from "react-router-dom";
2021-09-21 11:54:57 +00:00
import { useUser } from "../user-context";
const hamburger = <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>;
2021-03-06 10:40:31 +00:00
function Header({ setNavOpen }) {
2021-09-21 11:54:57 +00:00
const { user } = useUser();
2021-03-06 10:40:31 +00:00
return (
<header className="d-flex flex-row align-items-center p-2 bg-white border-bottom shadow-sm">
<div className="side-nav-btn">
<button className="btn btn-sm btn-outline-secondary" onClick={() => setNavOpen(true)}>
{hamburger}
</button>
</div>
2021-09-19 00:08:06 +00:00
<div className="d-flex flex-row justify-content-between align-items-center" style={{ width: "100%" }}>
<div>
<h4 className="header-title link-unstyled mt-2"><Link to="/">Pashto Grammar</Link></h4>
</div>
<div className="mr-3 link-unstyled">
<Link to="/account">
2021-09-21 11:54:57 +00:00
<i className={`fas ${user ? "fa-user" : "fa-sign-in-alt"} fa-lg clickable`}></i>
2021-09-19 00:08:06 +00:00
</Link>
</div>
</div>
2021-03-06 10:40:31 +00:00
</header>
);
}
export default Header;