chore: update sidebar styles in mobile view (#285)

* 添加移动端点击自动关闭侧边栏

* 添加移动端点击自动关闭侧边栏

* 添加移动端点击自动关闭侧边栏

* move closeSidebar function to utils

* move closeSidebar function to utils

* 侧边栏优化

* 移动端侧边栏优化

* 移动端侧边栏优化

* 移动端侧边栏优化

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 {

web/src/components/Sidebar.tsx

@@ -1,13 +1,13 @@
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { userService } from "../services";
-import Icon from "./Icon";
 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 = () => {
@@ -18,42 +18,42 @@ const Sidebar = () => {
   };
 
   return (
-    <aside className="sidebar-wrapper">
-      <div className="close-container">
-        <span className="action-btn" onClick={toggleSiderbar}>
-          <Icon.X className="icon-img" />
-        </span>
-      </div>
-      <UserBanner />
-      <UsageHeatMap />
-      <div className="action-btns-container">
-        <button className="btn action-btn" onClick={() => showDailyReviewDialog()}>
-          <span className="icon">📅</span> {t("sidebar.daily-review")}
-        </button>
-        {!userService.isVisitorMode() && (
-          <>
-            <Link to="/explore" className="btn action-btn">
-              <span className="icon">🏂</span> {t("common.explore")}
-            </Link>
-            <button className="btn action-btn" onClick={handleSettingBtnClick}>
-              <span className="icon">⚙️</span> {t("sidebar.setting")}
-            </button>
-          </>
-        )}
-      </div>
-      {!userService.isVisitorMode() && <ShortcutList />}
-      <TagList />
-    </aside>
+    <div>
+      <aside className="sidebar-wrapper close-sidebar">
+        <UserBanner />
+        <UsageHeatMap />
+        <div className="action-btns-container">
+          <button className="btn action-btn" onClick={() => showDailyReviewDialog()}>
+            <span className="icon">📅</span> {t("sidebar.daily-review")}
+          </button>
+          {!userService.isVisitorMode() && (
+            <>
+              <Link to="/explore" className="btn action-btn">
+                <span className="icon">🏂</span> {t("common.explore")}
+              </Link>
+              <button className="btn action-btn" onClick={handleSettingBtnClick}>
+                <span className="icon">⚙️</span> {t("sidebar.setting")}
+              </button>
+            </>
+          )}
+        </div>
+        {!userService.isVisitorMode() && <ShortcutList />}
+        <TagList />
+      </aside>
+
+      <div className="mask" onClick={closeSidebar}></div>
+    </div>
   );
 };
 
 export const toggleSiderbar = () => {
   const sidebarEl = document.body.querySelector(".sidebar-wrapper") as HTMLDivElement;
-  const display = window.getComputedStyle(sidebarEl).display;
-  if (display === "none") {
-    sidebarEl.style.display = "flex";
+  const maskEl = document.body.querySelector(".mask") as HTMLDivElement;
+  if (!sidebarEl.classList.contains("close-sidebar")) {
+    sidebarEl.classList.replace("open-sidebar", "close-sidebar");
   } else {
-    sidebarEl.style.display = "none";
+    sidebarEl.classList.replace("close-sidebar", "open-sidebar");
+    maskEl.classList.contains("hide-mask") ? maskEl.classList.replace("hide-mask", "show-mask") : maskEl.classList.add("show-mask");
   }
 };
 

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

web/src/helpers/utils.ts

@@ -134,3 +134,10 @@ 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/siderbar.less

@@ -1,8 +1,9 @@
 @import "./mixin.less";
 
 .sidebar-wrapper {
-  @apply fixed sm:sticky top-0 left-0 z-20 sm:z-0 hidden 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-all;
+  @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;
   .hide-scroll-bar();
+  overscroll-behavior: contain;
 
   > .close-container {
     @apply w-full pr-6 my-2 flex sm:hidden flex-row justify-end items-center;
@@ -24,3 +25,50 @@
     }
   }
 }
+
+.open-sidebar{
+  @apply sm:transform translate-x-0;
+}
+
+.close-sidebar{
+  @apply sm:transform -translate-x-64 md:translate-x-0;
+}
+
+.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,6 +27,9 @@ module.exports = {
       gridTemplateRows: {
         7: "repeat(7, minmax(0, 1fr))",
       },
+      transitionDuration: {
+        '377': '377ms',
+      }
     },
   },
 };