d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-04 23:16:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

标签滚动条加侧边遮罩，表格越界,导航条加高，夜间模式适配，按钮样式调整

Browse Source
This commit is contained in:
tangly1024
2021-10-12 17:37:57 +08:00
parent c759e87b61
commit 259f7035e1
11 changed files with 71 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/Drawer.js
View File

@@ -19,14 +19,14 @@ const Drawer = ({ post, currentTag }) => {
return <div>
{/* 触发抽屉按钮 */}
<div onClick={handleMenuClick}
className='fixed top-1 left-0 z-30 py-1 px-5 duration-200 bg-white dark:bg-gray-600 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
className='fixed top-3 left-0 z-30 py-1 px-5 duration-200 text-gray-600 text-2xl cursor-pointer dark:text-gray-300'>
<i className='fa hover:scale-125 transform duration-200 fa-bars '
/>
</div>
<div className='fixed top-0 left-0 z-30 h-full'>
<div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' overflow-y-auto duration-200 w-72 h-full bg-white dark:bg-gray-800 border-r dark:border-gray-600'}>
{/* LOGO */}
<div className='sticky top-0 z-20 bg-white w-72 flex space-x-4 px-5 py-1 dark:border-gray-500 border-b dark:bg-gray-600 '>
<div className='sticky top-0 z-20 bg-white w-72 flex space-x-4 px-5 py-3.5 dark:border-gray-500 border-b dark:bg-gray-600 '>
<div className='z-10 p-1 duration-200 mr-2 bg-white dark:bg-gray-600 text-gray-600 text-xl cursor-pointer dark:text-gray-300'>
<i className='fa hover:scale-125 transform duration-200 fa-bars ' onClick={handleMenuClick}/>
</div>
@@ -38,8 +38,9 @@ const Drawer = ({ post, currentTag }) => {
</Link>
</div>
</div>
{/* 侧边菜单 */}
<div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' w-72 duration-200 h-full fixed left-0 top-12 overflow-y-auto'}>
<div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' w-72 duration-200 h-full fixed left-0 top-20 overflow-y-auto'}>
<div className='z-20'>
<div className='px-5 my-3 block md:hidden'>
<SearchInput currentTag={currentTag}/>
@@ -55,7 +56,7 @@ const Drawer = ({ post, currentTag }) => {
</div>
</div>
{/* 背景蒙版 */}
<div className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-20 w-full h-full bg-black bg-opacity-40' } onClick={handleMenuClick}/>
<div className={(showDrawer ? 'block' : 'hidden') + ' fixed top-0 left-0 z-20 w-full h-full bg-black bg-opacity-50' } onClick={handleMenuClick}/>
</div>
}
export default Drawer