mirror of https://github.com/usememos/memos.git
94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
import { isUndefined } from "lodash-es";
|
||
import { useEffect } from "react";
|
||
import { Link } from "react-router-dom";
|
||
import { useTranslation } from "react-i18next";
|
||
import { useLocationStore, useUserStore } from "../store/module";
|
||
import showDailyReviewDialog from "./DailyReviewDialog";
|
||
import showResourcesDialog from "./ResourcesDialog";
|
||
import showSettingDialog from "./SettingDialog";
|
||
import UserBanner from "./UserBanner";
|
||
import UsageHeatMap from "./UsageHeatMap";
|
||
import ShortcutList from "./ShortcutList";
|
||
import TagList from "./TagList";
|
||
import "../less/siderbar.less";
|
||
|
||
const Sidebar = () => {
|
||
const { t } = useTranslation();
|
||
const userStore = useUserStore();
|
||
const locationStore = useLocationStore();
|
||
const query = locationStore.state.query;
|
||
|
||
useEffect(() => {
|
||
toggleSidebar(false);
|
||
}, [query]);
|
||
|
||
const handleSettingBtnClick = () => {
|
||
showSettingDialog();
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="mask" onClick={() => toggleSidebar(false)}></div>
|
||
<aside className="sidebar-wrapper">
|
||
<UserBanner />
|
||
<UsageHeatMap />
|
||
<div className="w-full px-2 my-2 flex flex-col justify-start items-start shrink-0">
|
||
<button
|
||
className="leading-10 px-4 rounded-lg text-base dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||
onClick={() => showDailyReviewDialog()}
|
||
>
|
||
<span className="mr-1">📅</span> {t("sidebar.daily-review")}
|
||
</button>
|
||
<Link
|
||
to="/explore"
|
||
className="leading-10 px-4 rounded-lg text-base dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||
>
|
||
<span className="mr-1">🏂</span> {t("common.explore")}
|
||
</Link>
|
||
<button
|
||
className="leading-10 px-4 rounded-lg text-base dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||
onClick={() => showResourcesDialog()}
|
||
>
|
||
<span className="mr-1">🗂️</span> {t("sidebar.resources")}
|
||
</button>
|
||
{!userStore.isVisitorMode() && (
|
||
<>
|
||
<button
|
||
className="leading-10 px-4 rounded-lg text-base dark:text-gray-200 hover:bg-white hover:shadow dark:hover:bg-zinc-700"
|
||
onClick={handleSettingBtnClick}
|
||
>
|
||
<span className="mr-1">⚙️</span> {t("sidebar.setting")}
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
{!userStore.isVisitorMode() && (
|
||
<>
|
||
<ShortcutList />
|
||
<TagList />
|
||
</>
|
||
)}
|
||
</aside>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export const toggleSidebar = (show?: boolean) => {
|
||
const sidebarEl = document.body.querySelector(".sidebar-wrapper") as HTMLDivElement;
|
||
const maskEl = document.body.querySelector(".mask") as HTMLDivElement;
|
||
|
||
if (isUndefined(show)) {
|
||
show = !sidebarEl.classList.contains("show");
|
||
}
|
||
|
||
if (show) {
|
||
sidebarEl.classList.add("show");
|
||
maskEl.classList.add("show");
|
||
} else {
|
||
sidebarEl.classList.remove("show");
|
||
maskEl.classList.remove("show");
|
||
}
|
||
};
|
||
|
||
export default Sidebar;
|