d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-07 15:10:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(heo): fix heo category selected style

Browse Source
This commit is contained in:
real-jacket
2023-09-05 00:07:26 +08:00
parent e199866baa
commit 64dbf4dc73
1 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
themes/heo/components/CategoryBar.js
View File

@@ -28,6 +28,7 @@ export default function CategoryBar(props) {
setScrollRight(!scrollRight) setScrollRight(!scrollRight)
} }
} }
return <div id='category-bar' className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e] return <div id='category-bar' className={`flex flex-nowrap justify-between items-center h-12 mb-4 space-x-2 w-full lg:bg-white dark:lg:bg-[#1e1e1e]
${border ? 'lg:border lg:hover:border dark:lg:border-gray-800 hover:border-indigo-600 dark:hover:border-yellow-600 ' : ''} py-2 lg:px-2 rounded-xl transition-colors duration-200`}> ${border ? 'lg:border lg:hover:border dark:lg:border-gray-800 hover:border-indigo-600 dark:hover:border-yellow-600 ' : ''} py-2 lg:px-2 rounded-xl transition-colors duration-200`}>
@@ -54,7 +55,8 @@ export default function CategoryBar(props) {
*/ */
const MenuItem = ({ href, name }) => { const MenuItem = ({ href, name }) => {
const router = useRouter() const router = useRouter()
const selected = router.pathname === href const { category } = router.query
const selected = category === name
return <div className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}> return <div className={`whitespace-nowrap mr-2 duration-200 transition-all font-bold px-2 py-0.5 rounded-md text-gray-900 dark:text-white hover:text-white hover:bg-indigo-600 dark:hover:bg-yellow-600 ${selected ? 'text-white bg-indigo-600 dark:bg-yellow-600' : ''}`}>
<Link href={href}>{name}</Link> <Link href={href}>{name}</Link>
</div> </div>