diff --git a/web/src/components/MemoList.tsx b/web/src/components/MemoList.tsx
index df724e3d..27c456ed 100644
--- a/web/src/components/MemoList.tsx
+++ b/web/src/components/MemoList.tsx
@@ -6,7 +6,6 @@ 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";
 
@@ -93,7 +92,7 @@ const MemoList = () => {
   }, [query]);
 
   return (
-    <div className="memo-list-container" ref={wrapperElement} onClick={closeSidebar}>
+    <div className="memo-list-container" ref={wrapperElement}>
       {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 1a790b81..18716180 100644
--- a/web/src/components/ShortcutList.tsx
+++ b/web/src/components/ShortcutList.tsx
@@ -5,7 +5,6 @@ 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";
@@ -64,7 +63,6 @@ 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 b46469dd..3a614291 100644
--- a/web/src/components/TagList.tsx
+++ b/web/src/components/TagList.tsx
@@ -3,7 +3,6 @@ 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";
 
@@ -70,7 +69,7 @@ const TagList = () => {
   }, [tagsText]);
 
   return (
-    <div className="tags-wrapper" onClick={closeSidebar}>
+    <div className="tags-wrapper">
       <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 4a0ef0aa..bbc314ee 100644
--- a/web/src/helpers/utils.ts
+++ b/web/src/helpers/utils.ts
@@ -134,8 +134,3 @@ 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";
-}
diff --git a/web/src/less/siderbar.less b/web/src/less/siderbar.less
index 05f1bdb3..5ae7166b 100644
--- a/web/src/less/siderbar.less
+++ b/web/src/less/siderbar.less
@@ -16,7 +16,7 @@
     @apply w-full px-2 my-2 flex flex-col justify-start items-start shrink-0;
 
     > .action-btn {
-      @apply leading-10 px-4 rounded-lg text-base text-left w-full hover:bg-white;
+      @apply leading-10 px-4 rounded-lg text-base hover:bg-white;
 
       > .icon {
         @apply mr-1;