aboutsummaryrefslogtreecommitdiff
path: root/Timeline/ClientApp/src/app/common/AppBar.tsx
diff options
context:
space:
mode:
authorcrupest <crupest@outlook.com>2020-09-01 02:32:06 +0800
committercrupest <crupest@outlook.com>2020-09-01 02:32:06 +0800
commitaa89b6cce7701a57b0c377d938788b4c940013d6 (patch)
treeae95cb16698439ac825eb1d692ce14125b625ecb /Timeline/ClientApp/src/app/common/AppBar.tsx
parentc3e95a6cd7322c644159eed6350a20dfd1a002ff (diff)
downloadtimeline-aa89b6cce7701a57b0c377d938788b4c940013d6.tar.gz
timeline-aa89b6cce7701a57b0c377d938788b4c940013d6.tar.bz2
timeline-aa89b6cce7701a57b0c377d938788b4c940013d6.zip
...
Diffstat (limited to 'Timeline/ClientApp/src/app/common/AppBar.tsx')
-rw-r--r--Timeline/ClientApp/src/app/common/AppBar.tsx107
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;