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

* 添加移动端点击自动关闭侧边栏 * 添加移动端点击自动关闭侧边栏 * 添加移动端点击自动关闭侧边栏 * move closeSidebar function to utils * move closeSidebar function to utils * 侧边栏优化 * 移动端侧边栏优化 * 移动端侧边栏优化 * 移动端侧边栏优化
3 years ago · ce5a6fa3ac
parent 246851fdbe
commit ce5a6fa3ac
6 changed files with 94 additions and 33 deletions
--- 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 {
--- a/web/src/components/Sidebar.tsx
+++ b/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");
  }
 };

--- 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) => (
--- a/web/src/helpers/utils.ts
+++ b/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");
+}
--- a/web/src/less/siderbar.less
+++ b/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);
+    }
+  }
+}
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -27,6 +27,9 @@ module.exports = {
      gridTemplateRows: {
        7: "repeat(7, minmax(0, 1fr))",
      },
+      transitionDuration: {
+        '377': '377ms',
+      }
    },
  },
 };