From 9225d7f6b6ed23b9d7ba99fcbece917fa4e43c54 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/index.sass               |   5 +-
 FrontEnd/src/app/views/common/AppBar.tsx  | 124 +++++++++++++-----------------
 FrontEnd/src/app/views/common/common.sass |  84 ++++++++++++++++++++
 3 files changed, 142 insertions(+), 71 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/app/index.sass b/FrontEnd/src/app/index.sass
index 329248b8..2df5c726 100644
--- a/FrontEnd/src/app/index.sass
+++ b/FrontEnd/src/app/index.sass
@@ -16,8 +16,9 @@
 @import './views/admin/admin'
 
 :root
-  --primary-color: #007bff
-  --text-on-primary-color: #ffffff
+  --tl-primary-color: #007bff
+  --tl-text-on-primary-color: #ffffff
+  --tl-text-inactive-on-primary-color: rgb(255 255 255 / 75%)
 
 small
   line-height: 1.2
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>
   );
 };
 
diff --git a/FrontEnd/src/app/views/common/common.sass b/FrontEnd/src/app/views/common/common.sass
index f3022d19..991a59be 100644
--- a/FrontEnd/src/app/views/common/common.sass
+++ b/FrontEnd/src/app/views/common/common.sass
@@ -32,6 +32,90 @@
   background: white
   touch-action: none
 
+.app-bar
+  display: flex
+  align-items: center
+  height: 56px
+
+  position: fixed
+  z-index: 1030
+  top: 0
+  left: 0
+  right: 0
+
+  background-color: var(--tl-primary-color)
+
+  a
+    color: var(--tl-text-inactive-on-primary-color)
+    text-decoration: none
+    margin: 0 1em
+
+    &.active
+      color: var(--tl-text-on-primary-color)
+
+.app-bar-brand
+  display: flex
+  align-items: center
+
+.app-bar-brand-icon
+  height: 2em
+
+.app-bar-main-area
+  display: flex
+  flex-grow: 1
+
+.app-bar-link-area
+  display: flex
+  align-items: center
+  flex-shrink: 0
+
+.app-bar-user-area
+  display: flex
+  align-items: center
+  flex-shrink: 0
+  margin-left: auto
+
+.small-screen
+  .app-bar-main-area
+    position: absolute
+    top: 56px
+    left: 0
+    right: 0
+
+    transform-origin: top
+    transition: transform 0.6s
+
+    background-color: var(--tl-primary-color)
+
+    flex-direction: column
+
+    &.app-bar-collapse
+      transform: scale(1,0)
+
+    a
+      text-align: left
+      padding: 0.5em 0.5em
+
+  .app-bar-link-area
+    flex-direction: column
+    align-items: stretch
+
+  .app-bar-user-area
+    flex-direction: column
+    align-items: stretch
+    margin-left: unset
+
+  .app-bar-avatar
+    align-self: flex-end
+
+.app-bar-toggler
+  margin-left: auto
+  font-size: 2em
+  margin-right: 1em
+  color: var(--tl-text-on-primary-color)
+  cursor: pointer
+  user-select: none
+
 .cru-skeleton
   padding: 0 1em
 
-- 
cgit v1.2.3