From 315ab94c946aab7fbfd30d9ab0586df2c2650e2c Mon Sep 17 00:00:00 2001
From: h2o2o <70848869+h2o2o@users.noreply.github.com>
Date: Tue, 11 Oct 2022 08:12:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=87=AA=E5=8A=A8=E5=85=B3=E9=97=AD=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=20(#271)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/MemoList.tsx     | 3 ++-
 web/src/components/ShortcutList.tsx | 2 ++
 web/src/components/TagList.tsx      | 3 ++-
 web/src/helpers/utils.ts            | 5 +++++
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/components/MemoList.tsx b/web/src/components/MemoList.tsx
index 27c456ed7..df724e3dc 100644
--- a/web/src/components/MemoList.tsx
+++ b/web/src/components/MemoList.tsx
@@ -6,6 +6,7 @@ import { TAG_REG, LINK_REG } from "../labs/marked/parser";
 import * as utils from "../helpers/utils";
 import { checkShouldShowMemoWithFilters } from "../helpers/filter";
 import toastHelper from "./Toast";
+import { closeSidebar } from "../helpers/utils";
 import Memo from "./Memo";
 import "../less/memo-list.less";
 
@@ -92,7 +93,7 @@ const MemoList = () => {
   }, [query]);
 
   return (
-    <div className="memo-list-container" ref={wrapperElement}>
+    <div className="memo-list-container" ref={wrapperElement} onClick={closeSidebar}>
       {sortedMemos.map((memo) => (
         <Memo key={`${memo.id}-${memo.createdTs}-${memo.updatedTs}`} memo={memo} />
       ))}
diff --git a/web/src/components/ShortcutList.tsx b/web/src/components/ShortcutList.tsx
index 18716180b..1a790b81c 100644
--- a/web/src/components/ShortcutList.tsx
+++ b/web/src/components/ShortcutList.tsx
@@ -5,6 +5,7 @@ import { useAppSelector } from "../store";
 import * as utils from "../helpers/utils";
 import useToggle from "../hooks/useToggle";
 import useLoading from "../hooks/useLoading";
+import { closeSidebar } from "../helpers/utils";
 import Icon from "./Icon";
 import toastHelper from "./Toast";
 import showCreateShortcutDialog from "./CreateShortcutDialog";
@@ -63,6 +64,7 @@ const ShortcutContainer: React.FC<ShortcutContainerProps> = (props: ShortcutCont
   const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false);
 
   const handleShortcutClick = () => {
+    closeSidebar();
     if (isActive) {
       locationService.setMemoShortcut(undefined);
     } else {
diff --git a/web/src/components/TagList.tsx b/web/src/components/TagList.tsx
index 3a614291d..b46469dd6 100644
--- a/web/src/components/TagList.tsx
+++ b/web/src/components/TagList.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useAppSelector } from "../store";
 import { locationService, memoService, userService } from "../services";
 import useToggle from "../hooks/useToggle";
+import { closeSidebar } from "../helpers/utils";
 import Icon from "./Icon";
 import "../less/tag-list.less";
 
@@ -69,7 +70,7 @@ const TagList = () => {
   }, [tagsText]);
 
   return (
-    <div className="tags-wrapper">
+    <div className="tags-wrapper" onClick={closeSidebar}>
       <p className="title-text">{t("common.tags")}</p>
       <div className="tags-container">
         {tags.map((t, idx) => (
diff --git a/web/src/helpers/utils.ts b/web/src/helpers/utils.ts
index bbc314eed..4a0ef0aad 100644
--- a/web/src/helpers/utils.ts
+++ b/web/src/helpers/utils.ts
@@ -134,3 +134,8 @@ export const parseHTMLToRawText = (htmlStr: string): string => {
   const text = tempEl.innerText;
   return text;
 };
+
+export function closeSidebar() {
+  const sidebarEl = document.body.querySelector(".sidebar-wrapper") as HTMLDivElement;
+  sidebarEl.style.display = "none";
+}