diff options
author | crupest <crupest@outlook.com> | 2020-09-03 23:09:03 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-09-03 23:09:03 +0800 |
commit | 1966351eb2046b9edfb3f9ccb50cb8921f1a08dc (patch) | |
tree | 792ee4899e7e00d518ea37d6ddd68555a83ac51e /Timeline/ClientApp/src/app/common/AppBar.tsx | |
parent | 3e7e533016b04df4993df66842409cf5857983ee (diff) | |
parent | 5a0adf596988efe8c3e49efcba7594f134a9cb0d (diff) | |
download | timeline-1966351eb2046b9edfb3f9ccb50cb8921f1a08dc.tar.gz timeline-1966351eb2046b9edfb3f9ccb50cb8921f1a08dc.tar.bz2 timeline-1966351eb2046b9edfb3f9ccb50cb8921f1a08dc.zip |
Merge pull request #159 from crupest/dev
Development on front end.
Diffstat (limited to 'Timeline/ClientApp/src/app/common/AppBar.tsx')
-rw-r--r-- | Timeline/ClientApp/src/app/common/AppBar.tsx | 107 |
1 files changed, 0 insertions, 107 deletions
diff --git a/Timeline/ClientApp/src/app/common/AppBar.tsx b/Timeline/ClientApp/src/app/common/AppBar.tsx deleted file mode 100644 index 59239696..00000000 --- a/Timeline/ClientApp/src/app/common/AppBar.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import React from "react"; -import { useHistory, matchPath } from "react-router"; -import { Link, NavLink } from "react-router-dom"; -import { Navbar, NavbarToggler, Collapse, Nav, NavItem } from "reactstrap"; -import { useMediaQuery } from "react-responsive"; -import { useTranslation } from "react-i18next"; - -import { useUser, useAvatar } from "../data/user"; - -import TimelineLogo from "./TimelineLogo"; -import BlobImage from "./BlobImage"; - -const AppBar: React.FC = (_) => { - const history = useHistory(); - const user = useUser(); - const avatar = useAvatar(user?.username); - - const { t } = useTranslation(); - - const isUpMd = useMediaQuery({ - minWidth: getComputedStyle(document.documentElement).getPropertyValue( - "--breakpoint-md" - ), - }); - - const [isMenuOpen, setIsMenuOpen] = React.useState(false); - - const toggleMenu = React.useCallback((): void => { - setIsMenuOpen((oldIsMenuOpen) => !oldIsMenuOpen); - }, []); - - const isAdministrator = user && user.administrator; - - const rightArea = ( - <div className="ml-auto mr-2"> - {user != null ? ( - <NavLink to={`/users/${user.username}`}> - <BlobImage - className="avatar small rounded-circle bg-white" - blob={avatar} - /> - </NavLink> - ) : ( - <NavLink className="text-light" to="/login"> - {t("nav.login")} - </NavLink> - )} - </div> - ); - - return ( - <Navbar dark className="fixed-top w-100 bg-primary app-bar" expand="md"> - <Link to="/" className="navbar-brand d-flex align-items-center"> - <TimelineLogo style={{ height: "1em" }} /> - Timeline - </Link> - - {isUpMd ? null : rightArea} - - <NavbarToggler onClick={toggleMenu} /> - <Collapse isOpen={isMenuOpen} navbar> - <Nav className="mr-auto" navbar> - <NavItem - className={ - matchPath(history.location.pathname, "/settings") - ? "active" - : undefined - } - > - <NavLink className="nav-link" to="/settings"> - {t("nav.settings")} - </NavLink> - </NavItem> - - <NavItem - className={ - matchPath(history.location.pathname, "/about") - ? "active" - : undefined - } - > - <NavLink className="nav-link" to="/about"> - {t("nav.about")} - </NavLink> - </NavItem> - - {isAdministrator && ( - <NavItem - className={ - matchPath(history.location.pathname, "/admin") - ? "active" - : undefined - } - > - <NavLink className="nav-link" to="/admin"> - Administration - </NavLink> - </NavItem> - )} - </Nav> - {isUpMd ? rightArea : null} - </Collapse> - </Navbar> - ); -}; - -export default AppBar; |