feat: update sidebar mask styles (#287)

web/src/components/MemosHeader.tsx

@@ -38,7 +38,7 @@ const MemosHeader = () => {
   return (
     <div className="section-header-container memos-header-container">
       <div className="title-container">
-        <div className="action-btn" onClick={toggleSiderbar}>
+        <div className="action-btn" onClick={() => toggleSiderbar(true)}>
           <Icon.Menu className="icon-img" />
         </div>
         <span className="title-text" onClick={handleTitleTextClick}>

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 {

web/src/components/Sidebar.tsx

@@ -1,25 +1,32 @@
+import { isUndefined } from "lodash-es";
+import { useEffect } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { userService } from "../services";
+import { useAppSelector } from "../store";
 import showDailyReviewDialog from "./DailyReviewDialog";
 import showSettingDialog from "./SettingDialog";
 import UserBanner from "./UserBanner";
 import UsageHeatMap from "./UsageHeatMap";
 import ShortcutList from "./ShortcutList";
 import TagList from "./TagList";
-import { closeSidebar } from "../helpers/utils";
 import "../less/siderbar.less";
 
 const Sidebar = () => {
   const { t } = useTranslation();
+  const location = useAppSelector((state) => state.location);
+
+  useEffect(() => {
+    toggleSiderbar(false);
+  }, [location.query]);
 
   const handleSettingBtnClick = () => {
     showSettingDialog();
   };
 
   return (
-    <div>
+    <>
-      <aside className="sidebar-wrapper close-sidebar">
+      <aside className="sidebar-wrapper">
         <UserBanner />
         <UsageHeatMap />
         <div className="action-btns-container">
@@ -40,20 +47,25 @@ const Sidebar = () => {
         {!userService.isVisitorMode() && <ShortcutList />}
         <TagList />
       </aside>
-
+      <div className="mask" onClick={() => toggleSiderbar(false)}></div>
-      <div className="mask" onClick={closeSidebar}></div>
+    </>
-    </div>
   );
 };
 
-export const toggleSiderbar = () => {
+export const toggleSiderbar = (show?: boolean) => {
   const sidebarEl = document.body.querySelector(".sidebar-wrapper") as HTMLDivElement;
   const maskEl = document.body.querySelector(".mask") as HTMLDivElement;
-  if (!sidebarEl.classList.contains("close-sidebar")) {
+
-    sidebarEl.classList.replace("open-sidebar", "close-sidebar");
+  if (isUndefined(show)) {
+    show = !sidebarEl.classList.contains("show");
+  }
+
+  if (show) {
+    sidebarEl.classList.add("show");
+    maskEl.classList.add("show");
   } else {
-    sidebarEl.classList.replace("close-sidebar", "open-sidebar");
+    sidebarEl.classList.remove("show");
-    maskEl.classList.contains("hide-mask") ? maskEl.classList.replace("hide-mask", "show-mask") : maskEl.classList.add("show-mask");
+    maskEl.classList.remove("show");
   }
 };
 

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) => (

web/src/helpers/utils.ts

@@ -134,10 +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;
-  const maskEl = document.body.querySelector(".mask") as HTMLDivElement;
-  sidebarEl.classList.replace("open-sidebar", "close-sidebar");
-  maskEl.classList.replace("show-mask", "hide-mask");
-}

web/src/less/shortcut-list.less

@@ -12,10 +12,10 @@
     }
 
     > .btn {
-      @apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 rounded ml-2 shadow hover:opacity-80;
+      @apply flex flex-col justify-center items-center w-5 h-5 bg-gray-200 rounded ml-2 hover:shadow;
 
       > .icon-img {
-        @apply w-4 h-4;
+        @apply w-4 h-4 text-gray-500;
       }
     }
   }

web/src/less/siderbar.less

@@ -1,16 +1,11 @@
 @import "./mixin.less";
 
 .sidebar-wrapper {
-  @apply fixed sm:sticky top-0 z-30 sm:z-0 sm:!flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 bg-white sm:bg-transparent shadow-2xl sm:shadow-none overflow-x-hidden overflow-y-auto transition-transform duration-377;
+  @apply fixed sm:sticky top-0 z-30 sm:z-0 -translate-x-64 sm:translate-x-0 sm:flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 bg-white sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain;
   .hide-scroll-bar();
-  overscroll-behavior: contain;
 
-  > .close-container {
+  &.show {
-    @apply w-full pr-6 my-2 flex sm:hidden flex-row justify-end items-center;
+    @apply translate-x-0 shadow-2xl sm:shadow-none;
-
-    > .action-btn {
-      @apply p-1 bg-gray-100 rounded shadow w-7 h-7 flex flex-row justify-center items-center;
-    }
   }
 
   > .action-btns-container {
@@ -26,49 +21,10 @@
   }
 }
 
-.open-sidebar{
+.mask {
-  @apply sm:transform translate-x-0;
+  @apply fixed top-0 right-0 w-screen h-screen bg-transparent transition-all duration-300 z-0;
-}
 
-.close-sidebar{
+  &.show {
-  @apply sm:transform -translate-x-64 md:translate-x-0;
+    @apply z-20 bg-black opacity-60;
-}
-
-.mask{
-  @apply fixed top-0 right-0 w-screen h-screen;
-  z-index: -1;
-}
-
-.hide-mask{
-  animation: hide 0.23s ease-in;
-  @keyframes hide {
-    0%{
-      background-color: rgba(0, 0, 0, 0.6);
-      z-index: 20;
-    }
-    65%{
-      background-color: rgba(0, 0, 0, 0);
-    }
-    100% {
-      z-index: 0;
-    }
-  }
-  
-}
-
-.show-mask{
-  @apply translate-x-0 z-20;
-  background-color: rgba(0, 0, 0, 0.6);
-  animation: show 0.37s ease-in;
-  @keyframes show {
-    0%{
-      background-color: rgba(0, 0, 0, 0);
-    }
-    80%{
-      background-color: rgba(0, 0, 0, 0.56);
-    }
-    100% {
-      background-color: rgba(0, 0, 0, 0.6);
-    }
   }
 }

web/tailwind.config.js

@@ -27,9 +27,6 @@ module.exports = {
       gridTemplateRows: {
         7: "repeat(7, minmax(0, 1fr))",
       },
-      transitionDuration: {
-        '377': '377ms',
-      }
     },
   },
 };