From 40c32cd9c1e6c1aeae3b2911c7acf14e3031381d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 4 Nov 2020 17:11:18 +0800
Subject: feat: Collapse app bar after select item.

---
 FrontEnd/src/app/views/common/AppBar.tsx | 47 ++++++++++++++++++++++++++------
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/FrontEnd/src/app/views/common/AppBar.tsx b/FrontEnd/src/app/views/common/AppBar.tsx
index 3363cb9d..8f35b482 100644
--- a/FrontEnd/src/app/views/common/AppBar.tsx
+++ b/FrontEnd/src/app/views/common/AppBar.tsx
@@ -17,27 +17,52 @@ const AppBar: React.FC = (_) => {
 
   const isAdministrator = user && user.administrator;
 
+  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" sticky="top">
-      <LinkContainer to="/">
+    <Navbar
+      bg="primary"
+      variant="dark"
+      expand="md"
+      sticky="top"
+      expanded={expand}
+    >
+      <LinkContainer to="/" onClick={collapse}>
         <Navbar.Brand className="d-flex align-items-center">
           <TimelineLogo style={{ height: "1em" }} />
           Timeline
         </Navbar.Brand>
       </LinkContainer>
 
-      <Navbar.Toggle />
+      <Navbar.Toggle onClick={toggleExpand} />
       <Navbar.Collapse>
         <Nav className="mr-auto">
-          <NavLink to="/settings" className="nav-link" activeClassName="active">
+          <NavLink
+            to="/settings"
+            className="nav-link"
+            activeClassName="active"
+            onClick={collapse}
+          >
             {t("nav.settings")}
           </NavLink>
-          <NavLink to="/about" className="nav-link" activeClassName="active">
+          <NavLink
+            to="/about"
+            className="nav-link"
+            activeClassName="active"
+            onClick={collapse}
+          >
             {t("nav.about")}
           </NavLink>
 
           {isAdministrator && (
-            <NavLink to="/admin" className="nav-link" activeClassName="active">
+            <NavLink
+              to="/admin"
+              className="nav-link"
+              activeClassName="active"
+              onClick={collapse}
+            >
               Administration
             </NavLink>
           )}
@@ -46,12 +71,18 @@ const AppBar: React.FC = (_) => {
           {user != null ? (
             <LinkContainer to={`/users/${user.username}`}>
               <BlobImage
-                className="avatar small rounded-circle bg-white cursor-pointer"
+                className="avatar small rounded-circle bg-white cursor-pointer ml-auto"
+                onClick={collapse}
                 blob={avatar}
               />
             </LinkContainer>
           ) : (
-            <NavLink to="/login" className="nav-link" activeClassName="active">
+            <NavLink
+              to="/login"
+              className="nav-link"
+              activeClassName="active"
+              onClick={collapse}
+            >
               {t("nav.login")}
             </NavLink>
           )}
-- 
cgit v1.2.3