diff --git a/web/src/components/MemosHeader.tsx b/web/src/components/MemosHeader.tsx index 56c0c1e..8ab56ab 100644 --- a/web/src/components/MemosHeader.tsx +++ b/web/src/components/MemosHeader.tsx @@ -38,7 +38,7 @@ const MemosHeader = () => { return (
-
+
toggleSiderbar(true)}>
diff --git a/web/src/components/ShortcutList.tsx b/web/src/components/ShortcutList.tsx index 1a790b8..1871618 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 = (props: ShortcutCont const [showConfirmDeleteBtn, toggleConfirmDeleteBtn] = useToggle(false); const handleShortcutClick = () => { - closeSidebar(); if (isActive) { locationService.setMemoShortcut(undefined); } else { diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx index 1f2f9aa..d878eb4 100644 --- a/web/src/components/Sidebar.tsx +++ b/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 ( -
-
+
toggleSiderbar(false)}>
+ ); }; -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"); - maskEl.classList.contains("hide-mask") ? maskEl.classList.replace("hide-mask", "show-mask") : maskEl.classList.add("show-mask"); + sidebarEl.classList.remove("show"); + maskEl.classList.remove("show"); } }; diff --git a/web/src/components/TagList.tsx b/web/src/components/TagList.tsx index b46469d..3a61429 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 ( -
+

{t("common.tags")}

{tags.map((t, idx) => ( diff --git a/web/src/helpers/utils.ts b/web/src/helpers/utils.ts index 088384c..bbc314e 100644 --- a/web/src/helpers/utils.ts +++ b/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"); -} diff --git a/web/src/less/shortcut-list.less b/web/src/less/shortcut-list.less index 29f7514..ebdbc75 100644 --- a/web/src/less/shortcut-list.less +++ b/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; } } } diff --git a/web/src/less/siderbar.less b/web/src/less/siderbar.less index 0d73a23..f4b2b18 100644 --- a/web/src/less/siderbar.less +++ b/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 { - @apply w-full pr-6 my-2 flex sm:hidden flex-row justify-end items-center; - - > .action-btn { - @apply p-1 bg-gray-100 rounded shadow w-7 h-7 flex flex-row justify-center items-center; - } + &.show { + @apply translate-x-0 shadow-2xl sm:shadow-none; } > .action-btns-container { @@ -26,49 +21,10 @@ } } -.open-sidebar{ - @apply sm:transform translate-x-0; -} +.mask { + @apply fixed top-0 right-0 w-screen h-screen bg-transparent transition-all duration-300 z-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); - } + &.show { + @apply z-20 bg-black opacity-60; } } diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 0c160d0..53e4159 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -27,9 +27,6 @@ module.exports = { gridTemplateRows: { 7: "repeat(7, minmax(0, 1fr))", }, - transitionDuration: { - '377': '377ms', - } }, }, };