YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update style of home sidebar (#1311)

Browse Source
This commit is contained in:
boojack
2023-03-08 21:56:28 +08:00
committed by GitHub
parent ccf6af4dc3
commit 3a466ad2a1
7 changed files with 71 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/HomeSidebar.tsx
View File

@ -12,7 +12,7 @@ const HomeSidebar = () => {
useEffect(() => {
const handleWindowResize = () => {
if (window.innerWidth < resolution.sm) {
if (window.innerWidth < resolution.md) {
layoutStore.setHomeSidebarStatus(false);
} else {
layoutStore.setHomeSidebarStatus(true);
@ -24,22 +24,22 @@ const HomeSidebar = () => {
return (
<div
className={`fixed sm:sticky top-0 left-0 w-full sm:w-56 h-full flex-shrink-0 pointer-events-none sm:pointer-events-auto z-10 ${
className={`fixed md:sticky top-0 left-0 w-full md:w-56 h-full flex-shrink-0 pointer-events-none md:pointer-events-auto z-10 ${
showHomeSidebar && "pointer-events-auto"
}`}
>
<div
className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 sm:!hidden ${
className={`fixed top-0 left-0 w-full h-full bg-black opacity-0 pointer-events-none transition-opacity duration-300 md:!hidden ${
showHomeSidebar && "opacity-60 pointer-events-auto"
}`}
onClick={() => layoutStore.setHomeSidebarStatus(false)}
></div>
<aside
className={`absolute sm:relative top-0 right-0 w-56 pr-2 sm:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-white dark:bg-zinc-800 sm:bg-transparent sm:shadow-none transition-all duration-300 translate-x-full sm:translate-x-0 ${
className={`absolute md:relative top-0 right-0 w-56 pr-2 md:w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-white dark:bg-zinc-800 md:bg-transparent md:shadow-none transition-all duration-300 translate-x-full md:translate-x-0 ${
showHomeSidebar && "!translate-x-0 shadow-2xl"
}`}
>
<div className="pl-6 pr-4 mb-4 w-full">
<div className="px-4 pr-8 mb-4 w-full">
<SearchBar />
</div>
<UsageHeatMap />