From ad673813976669797202c2cefc50274aca84989d Mon Sep 17 00:00:00 2001
From: sct <ryan@sct.dev>
Date: Wed, 14 Apr 2021 10:39:07 +0900
Subject: [PATCH] fix(ui): close sidebar on mobile when clicking version status

---
 src/components/Layout/Sidebar/index.tsx       |  6 ++++--
 src/components/Layout/VersionStatus/index.tsx | 14 +++++++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index d33f66cb8..7558b95ba 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -174,7 +174,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                   </div>
                   <div
                     ref={navRef}
-                    className="flex flex-col flex-1 h-0 pt-5 pb-4 overflow-y-auto"
+                    className="flex flex-col flex-1 h-0 pt-5 pb-8 overflow-y-auto sm:pb-4"
                   >
                     <div className="flex items-center flex-shrink-0 px-4">
                       <span className="text-xl text-gray-50">
@@ -223,7 +223,9 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                         );
                       })}
                     </nav>
-                    {hasPermission(Permission.ADMIN) && <VersionStatus />}
+                    {hasPermission(Permission.ADMIN) && (
+                      <VersionStatus onClick={() => setClosed()} />
+                    )}
                   </div>
                 </div>
                 <div className="flex-shrink-0 w-14">
diff --git a/src/components/Layout/VersionStatus/index.tsx b/src/components/Layout/VersionStatus/index.tsx
index f746dbc81..e5e07869c 100644
--- a/src/components/Layout/VersionStatus/index.tsx
+++ b/src/components/Layout/VersionStatus/index.tsx
@@ -12,7 +12,11 @@ const messages = defineMessages({
     '{commitsBehind} {commitsBehind, plural, one {commit} other {commits}} behind',
 });
 
-const VersionStatus: React.FC = () => {
+interface VersionStatusProps {
+  onClick?: () => void;
+}
+
+const VersionStatus: React.FC<VersionStatusProps> = ({ onClick }) => {
   const intl = useIntl();
   const { data } = useSWR<StatusResponse>('/api/v1/status', {
     refreshInterval: 60 * 1000,
@@ -32,6 +36,14 @@ const VersionStatus: React.FC = () => {
   return (
     <Link href="/settings/about">
       <a
+        onClick={onClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && onClick) {
+            onClick();
+          }
+        }}
+        role="button"
+        tabIndex={0}
         className={`flex items-center p-2 mx-2 text-xs transition duration-300 rounded-lg ring-1 ring-gray-700 ${
           data.updateAvailable
             ? 'bg-yellow-500 text-white hover:bg-yellow-400'