From 7808189ca0bc9176db16a1c1dea441f6190f094a Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 6 May 2021 16:54:09 +0800
Subject: ...

---
 FrontEnd/src/app/views/common/AppBar.tsx | 124 ++++++++++++++-----------------
 1 file changed, 55 insertions(+), 69 deletions(-)

(limited to 'FrontEnd/src/app/views/common/AppBar.tsx')

diff --git a/FrontEnd/src/app/views/common/AppBar.tsx b/FrontEnd/src/app/views/common/AppBar.tsx
index 939f0175..91dfbee9 100644
--- a/FrontEnd/src/app/views/common/AppBar.tsx
+++ b/FrontEnd/src/app/views/common/AppBar.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { LinkContainer } from "react-router-bootstrap";
-import { Navbar, Nav } from "react-bootstrap";
-import { NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
+import classnames from "classnames";
+import { useMediaQuery } from "react-responsive";
 
 import { useUser } from "@/services/user";
 
@@ -10,84 +10,70 @@ import TimelineLogo from "./TimelineLogo";
 import UserAvatar from "./user/UserAvatar";
 
 const AppBar: React.FC = (_) => {
-  const user = useUser();
-
   const { t } = useTranslation();
 
+  const user = useUser();
   const hasAdministrationPermission = user && user.hasAdministrationPermission;
 
+  const isSmallScreen = useMediaQuery({ maxWidth: 576 });
+
   const [expand, setExpand] = React.useState<boolean>(false);
   const collapse = (): void => setExpand(false);
   const toggleExpand = (): void => setExpand(!expand);
 
-  return (
-    <Navbar
-      bg="primary"
-      variant="dark"
-      expand="md"
-      fixed="top"
-      expanded={expand}
+  const createLink = (
+    link: string,
+    label: React.ReactNode,
+    className?: string
+  ): React.ReactNode => (
+    <NavLink
+      to={link}
+      activeClassName="active"
+      onClick={collapse}
+      className={className}
     >
-      <LinkContainer to="/" onClick={collapse}>
-        <Navbar.Brand className="d-flex align-items-center">
-          <TimelineLogo style={{ height: "1em" }} />
-          Timeline
-        </Navbar.Brand>
-      </LinkContainer>
+      {label}
+    </NavLink>
+  );
+
+  return (
+    <nav className={classnames("app-bar", isSmallScreen && "small-screen")}>
+      <Link to="/" className="app-bar-brand active">
+        <TimelineLogo className="app-bar-brand-icon" />
+        Timeline
+      </Link>
 
-      <Navbar.Toggle onClick={toggleExpand} />
+      {isSmallScreen && (
+        <i className="bi-list app-bar-toggler" onClick={toggleExpand} />
+      )}
 
-      <Navbar.Collapse>
-        <Nav className="me-auto">
-          <NavLink
-            to="/settings"
-            className="nav-link"
-            activeClassName="active"
-            onClick={collapse}
-          >
-            {t("nav.settings")}
-          </NavLink>
-          <NavLink
-            to="/about"
-            className="nav-link"
-            activeClassName="active"
-            onClick={collapse}
-          >
-            {t("nav.about")}
-          </NavLink>
+      <div
+        className={classnames(
+          "app-bar-main-area",
+          !expand && "app-bar-collapse"
+        )}
+      >
+        <div className="app-bar-link-area">
+          {createLink("/settings", t("nav.settings"))}
+          {createLink("/about", t("nav.about"))}
+          {hasAdministrationPermission &&
+            createLink("/admin", t("nav.administration"))}
+        </div>
 
-          {hasAdministrationPermission && (
-            <NavLink
-              to="/admin"
-              className="nav-link"
-              activeClassName="active"
-              onClick={collapse}
-            >
-              {t("nav.administration")}
-            </NavLink>
-          )}
-        </Nav>
-        <Nav className="ms-auto md-me-2">
-          {user != null ? (
-            <LinkContainer to="/">
-              <UserAvatar
-                username={user.username}
-                className="avatar small rounded-circle bg-white cursor-pointer ms-auto"
-              />
-            </LinkContainer>
-          ) : (
-            <NavLink
-              to="/login"
-              className="nav-link"
-              activeClassName="active"
-              onClick={collapse}
-            >
-              {t("nav.login")}
-            </NavLink>
-          )}
-        </Nav>
-      </Navbar.Collapse>
-    </Navbar>
+        <div className="app-bar-user-area">
+          {user != null
+            ? createLink(
+                "/",
+                <UserAvatar
+                  username={user.username}
+                  className="avatar small rounded-circle bg-white cursor-pointer ml-auto"
+                />,
+                "app-bar-avatar"
+              )
+            : createLink("/login", t("nav.login"))}
+        </div>
+      </div>
+    </nav>
   );
 };
 
-- 
cgit v1.2.3