d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-22 15:09:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

导航条加阴影；

Browse Source 
航条标签栏滚动时隐藏；
使用Container容器;
移动端文章边距调整。
This commit is contained in:
tangly1024
2021-10-13 12:41:16 +08:00
parent 4d7284bc59
commit 1d73dc6de1
8 changed files with 55 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/Drawer.js
View File

@@ -3,32 +3,35 @@ import BLOG from '@/blog.config'
import SearchInput from '@/components/SearchInput'
import MenuButtonGroup from '@/components/MenuButtonGroup'
import TocBar from '@/components/TocBar'
import React, { useState } from 'react'
import React, { forwardRef, useImperativeHandle, useState } from 'react'
/**
* 抽屉面板，可以从侧面拉出
* @returns {JSX.Element}
* @constructor
*/
const Drawer = ({ post, currentTag }) => {
const Drawer = ({ post, currentTag, cRef }) => {
// 暴露给父组件 通过cRef.current.handleMenuClick 调用
useImperativeHandle(cRef, () => {
return {
handleMenuClick: () => handleMenuClick()
}
})
const [showDrawer, switchShowDrawer] = useState(false)
// 点击按钮更改侧边抽屉状态
const handleMenuClick = () => {
switchShowDrawer(!showDrawer)
}
return <div>
{/* 触发抽屉按钮 */}
<div onClick={handleMenuClick}
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'}>
<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-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
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>
<Link href='/'>
<a
@@ -40,13 +43,14 @@ const Drawer = ({ post, currentTag }) => {
</div>
{/* 侧边菜单 */}
<div className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' w-72 duration-200 h-full fixed left-0 top-20 overflow-y-auto'}>
<div
className={(showDrawer ? 'shadow-2xl' : '-ml-72') + ' w-72 duration-200 h-full fixed left-0 top-16 overflow-y-auto'}>
<div className='z-20'>
<div className='px-5 my-3 block md:hidden'>
<SearchInput currentTag={currentTag}/>
<SearchInput currentTag={currentTag} />
</div>
{/* 菜单 */}
<MenuButtonGroup allowCollapse={false}/>
<MenuButtonGroup allowCollapse={false} />
{post && (
<div className='sticky top-24'>
<TocBar toc={post.toc} />
@@ -56,7 +60,8 @@ 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-50' } 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