🐻 简化层级,减少DOM

This commit is contained in:
tangly1024
2021-09-29 14:59:27 +08:00
parent 791af3a1af
commit 5012d6d9a2
9 changed files with 42 additions and 79 deletions

View File

@@ -41,8 +41,7 @@ const SideBar = ({ tags, currentTag, toc }) => {
return <aside className='z-10'>
<div
className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' dark:bg-gray-800 bg-white sidebar h-full w-72 duration-500 ease-in-out'}>
<div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' dark:bg-gray-800 bg-white sidebar h-full w-72 duration-500 ease-in-out'}>
{/* Logo */}
<section className='mx-5 pt-6 pb-2'>
@@ -90,10 +89,8 @@ const SideBar = ({ tags, currentTag, toc }) => {
</nav>
{/* 标签云 */}
<section className=''>
<div>
<section>
<strong className='text-xl text-gray-600 dark:text-gray-400'>标签</strong>
</div>
<Tags tags={tags} currentTag={currentTag} />
</section>
@@ -119,9 +116,9 @@ const SideBar = ({ tags, currentTag, toc }) => {
{/* 顶部菜单按钮 */}
<div
className={(collapse ? 'left-0' : 'left-72') + ' fixed flex flex-nowrap md:flex-col top-0 pl-4 py-1 duration-500 ease-in-out'}>
className={(collapse ? 'left-0' : 'left-72') + ' z-30 fixed flex flex-nowrap md:flex-col top-0 pl-4 py-1 duration-500 ease-in-out'}>
{/* 菜单折叠 */}
<div className='z-30 p-1 border hover:shadow-xl duration-200 dark:border-gray-500 h-12 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70
<div className='p-1 border hover:shadow-xl duration-200 dark:border-gray-500 h-12 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70
dark:hover:bg-gray-100 text-xl cursor-pointer mr-2 my-2 dark:text-gray-300 dark:hover:text-black'>
<i className='fa fa-bars p-2.5 hover:scale-125 transform duration-200'
onClick={() => changeCollapse(!collapse)} />