mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-18 07:26:48 +00:00
feature:
新增StickyBar组件; 标签页、分类页、搜索页重排;
This commit is contained in:
29
components/StickyBar.js
Normal file
29
components/StickyBar.js
Normal file
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* 标签组导航条,默认隐藏仅在移动端显示
|
||||
* @param tags
|
||||
* @param currentTag
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
const StickyBar = ({ children }) => {
|
||||
if (!children) return <></>
|
||||
return (
|
||||
<div id='sticky-bar' className='fixed lg:top-0 top-16 duration-500 z-10 w-full border-b dark:border-gray-600'>
|
||||
<div className='bg-white dark:bg-gray-800 flex overflow-x-auto'>
|
||||
<div className='z-30 sticky left-0 flex'>
|
||||
<div className='pr-2 bg-white dark:bg-gray-800'/>
|
||||
<div className='pr-3 -line-x-opacity bg-black'/>
|
||||
</div>
|
||||
<div id='tag-container'>
|
||||
{ children }
|
||||
</div>
|
||||
<div className='z-30 sticky right-0 flex'>
|
||||
<div className='px-5 line-x-opacity'/>
|
||||
<div className='px-2 bg-white dark:bg-gray-800'/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default StickyBar
|
||||
Reference in New Issue
Block a user