Fix app bar toggle problem.

2 files changed, 98 insertions, 88 deletions

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}>