Files
NotionNext/components/StickyBar.js
tangly1024 5c84afb5c3 feature:
新增StickyBar组件;
标签页、分类页、搜索页重排;
2021-11-29 17:25:34 +08:00

30 lines
873 B
JavaScript

/**
* 标签组导航条,默认隐藏仅在移动端显示
* @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