d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-24 07:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

切换主题预览方案调整

Browse Source
This commit is contained in:
tangly1024.com
2024-09-14 15:51:00 +08:00
parent cd86d91f6d
commit d967950373
22 changed files with 161 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/SideBarDrawer.js
View File

@@ -6,7 +6,14 @@ import { useEffect } from 'react'
* @returns {JSX.Element}
* @constructor
*/
const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
const SideBarDrawer = ({
children,
isOpen,
onOpen,
onClose,
className,
showOnPC = false
}) => {
const router = useRouter()
useEffect(() => {
const sideBarDrawerRouteListener = () => {
@@ -19,32 +26,45 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
}, [router.events])
// 点击按钮更改侧边抽屉状态
const switchSideDrawerVisible = (showStatus) => {
const switchSideDrawerVisible = showStatus => {
if (showStatus) {
onOpen && onOpen()
} else {
onClose && onClose()
}
const sideBarDrawer = window.document.getElementById('sidebar-drawer')
const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
const sideBarDrawerBackground = window.document.getElementById(
'sidebar-drawer-background'
)
if (showStatus) {
sideBarDrawer?.classList.replace('-ml-60', 'ml-0')
sideBarDrawer?.classList.replace('-ml-96', 'ml-0')
sideBarDrawerBackground?.classList.replace('hidden', 'block')
} else {
sideBarDrawer?.classList.replace('ml-0', '-ml-60')
sideBarDrawer?.classList.replace('ml-0', '-ml-96')
sideBarDrawerBackground?.classList.replace('block', 'hidden')
}
}
return <div id='sidebar-wrapper' className={' block lg:hidden top-0 ' + className }>
<div id="sidebar-drawer" className={`${isOpen ? 'ml-0 w-60 visible' : '-ml-60 max-w-side invisible'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
{children}
</div>
return (
<div
id='sidebar-wrapper'
className={` block ${showOnPC ? '' : 'lg:hidden'} top-0`}>
<div
id='sidebar-drawer'
className={`${className} ${isOpen ? 'ml-0 w-96 visible' : '-ml-96 max-w-side invisible'} bg-white dark:bg-gray-900 flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
{children}
</div>
{/* 背景蒙版 */}
<div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
</div>
{/* 背景蒙版 */}
<div
id='sidebar-drawer-background'
onClick={() => {
switchSideDrawerVisible(false)
}}
className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}
/>
</div>
)
}
export default SideBarDrawer