From 49d444fa9dfac5877cd980a18d2eb84281b02e50 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 12 Sep 2023 18:34:27 +0800
Subject: Fix app bar toggle problem.

---
 FrontEnd/src/components/AppBar.css | 182 +++++++++++++++++++------------------
 FrontEnd/src/components/AppBar.tsx |   4 +-
 2 files changed, 98 insertions(+), 88 deletions(-)

(limited to 'FrontEnd/src/components')

diff --git a/FrontEnd/src/components/AppBar.css b/FrontEnd/src/components/AppBar.css
index a0d975b5..ae2a5879 100644
--- a/FrontEnd/src/components/AppBar.css
+++ b/FrontEnd/src/components/AppBar.css
@@ -1,87 +1,95 @@
-.app-bar {
-  height: 56px;
-  position: fixed;
-  z-index: 1030;
-  top: 0;
-  left: 0;
-  right: 0;
-  background-color: var(--cru-primary-color);
-}
-
-.app-bar {
-  display: flex;
-}
-
-.app-bar .app-bar-brand {
-  display: flex;
-  align-items: center;
-}
-
-.app-bar .app-bar-brand-icon {
-  height: 2em;
-}
-
-.app-bar .app-bar-user-area {
-  display: flex;
-  margin-left: auto;
-}
-
-.app-bar a {
-  background-color: var(--cru-primary-color);
-  color: var(--cru-push-button-text-color);
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  padding: 0 1em;
-  transition: all 0.5s;
-}
-
-.app-bar a:hover {
-  background-color: var(--cru-clickable-primary-hover-color);
-}
-
-.app-bar a:focus {
-  background-color: var(--cru-clickable-primary-focus-color);
-}
-
-.app-bar a:active {
-  background-color: var(--cru-clickable-primary-active-color);
-}
-
-/* the current page */
-.app-bar a.active {
-  background-color: var(--cru-clickable-primary-focus-color);
-}
-
-.app-bar .app-bar-avatar img {
-  width: 45px;
-  height: 45px;
-  background-color: white;
-  border-radius: 50%;
-}
-
-.app-bar.desktop .app-bar-link-area {
-  display: flex;
-}
-
-.app-bar.mobile .app-bar-link-area {
-  position: absolute;
-  z-index: -1;
-  top: 56px;
-  left: 0;
-  right: 0;
-  transition: transform 0.5s;
-}
-
-.app-bar.mobile a {
-  height: 56px;
-}
-
-.app-bar.mobile.collapse .app-bar-link-area {
-  transform: translateY(-100%);
-}
-
-.app-bar .toggler {
-  font-size: 2em;
-  margin-right: 0.5em;
-}
\ No newline at end of file
+.app-bar {
+  height: 56px;
+  position: fixed;
+  z-index: 1030;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--cru-primary-color);
+}
+
+.app-bar {
+  display: flex;
+}
+
+.app-bar > * {
+  background-color: var(--cru-primary-color);
+}
+
+.app-bar .app-bar-brand {
+  display: flex;
+  align-items: center;
+}
+
+.app-bar .app-bar-brand-icon {
+  height: 2em;
+}
+
+.app-bar .app-bar-space {
+  flex-grow: 1;
+}
+
+.app-bar .app-bar-user-area {
+  display: flex;
+}
+
+.app-bar a {
+  background-color: var(--cru-primary-color);
+  color: var(--cru-push-button-text-color);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  padding: 0 1em;
+  transition: all 0.5s;
+}
+
+.app-bar a:hover {
+  background-color: var(--cru-clickable-primary-hover-color);
+}
+
+.app-bar a:focus {
+  background-color: var(--cru-clickable-primary-focus-color);
+}
+
+.app-bar a:active {
+  background-color: var(--cru-clickable-primary-active-color);
+}
+
+/* the current page */
+.app-bar a.active {
+  background-color: var(--cru-clickable-primary-focus-color);
+}
+
+.app-bar .app-bar-avatar img {
+  width: 45px;
+  height: 45px;
+  background-color: white;
+  border-radius: 50%;
+}
+
+.app-bar.desktop .app-bar-link-area {
+  display: flex;
+}
+
+.app-bar.mobile .app-bar-link-area {
+  position: absolute;
+  z-index: -1;
+  top: -100%;
+  left: 0;
+  right: 0;
+  transition: transform 0.5s;
+}
+
+.app-bar.mobile a {
+  height: 56px;
+}
+
+.app-bar.mobile.expand .app-bar-link-area {
+  transform: translateY(100%);
+}
+
+.app-bar .toggler {
+  font-size: 2em;
+  padding-right: 0.5em;
+}
+
diff --git a/FrontEnd/src/components/AppBar.tsx b/FrontEnd/src/components/AppBar.tsx
index 9dfec3e1..d40c8105 100644
--- a/FrontEnd/src/components/AppBar.tsx
+++ b/FrontEnd/src/components/AppBar.tsx
@@ -57,7 +57,7 @@ export default function AppBar() {
       className={classnames(
         isMobile ? "mobile" : "desktop",
         "app-bar",
-        isCollapse && "collapse",
+        isCollapse || "expand",
       )}
     >
       <Link to="/" className="app-bar-brand" onClick={collapse}>
@@ -81,6 +81,8 @@ export default function AppBar() {
         )}
       </div>
 
+      <div className="app-bar-space" />
+
       <div className="app-bar-user-area">
         {user != null ? (
           <AppBarNavLink link="/" className="app-bar-avatar" onClick={collapse}>
-- 
cgit v1.2.3