d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-13 23:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
tangly1024
2024-06-15 15:37:07 +08:00
parent 5f9263430b
commit 4b65ca6ea0
2 changed files with 47 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/heo/components/MenuItemDrop.js
View File

@@ -13,8 +13,6 @@ export const MenuItemDrop = ({ link }) => {
<div
onMouseOver={() => changeShow(true)}
onMouseOut={() => changeShow(false)}>
{' '}
menu-link pl-2 pr-4 no-underline tracking-widest pb-1
{/* 不含子菜单 */}
{!hasSubMenu && (
<Link

91
themes/heo/components/Swipe.js
View File

@@ -10,7 +10,7 @@ import { useEffect, useState } from 'react'
export function Swipe({ items }) {
const [activeIndex, setActiveIndex] = useState(0)
const handleClick = (item) => {
const handleClick = item => {
if (isBrowser) {
window.open(item?.url)
}
@@ -24,50 +24,53 @@ export function Swipe({ items }) {
}, [activeIndex, items.length])
return (
<div className="h-full relative w-full overflow-hidden">
{items.map((item, index) => (
<div
onClick={() => handleClick(item)}
key={index}
className={`absolute top-0 bottom-0 w-full h-full flex justify-center items-center line-clamp-1 transform transition-transform duration-500 ${index === activeIndex ? 'translate-y-0 slide-in' : 'translate-y-full slide-out'
}`}
>
{item.title}
</div>
))}
<style jsx>{`
.slide-in {
animation-name: slide-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.slide-out {
animation-name: slide-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@keyframes slide-in {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slide-out {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
`}</style>
<div className='h-full relative w-full overflow-hidden'>
{items.map((item, index) => (
<div
onClick={() => handleClick(item)}
key={index}
className={`whitespace-nowrap absolute top-0 bottom-0 w-full h-full flex justify-center items-center line-clamp-1 transform transition-transform duration-500 ${
index === activeIndex
? 'translate-y-0 slide-in'
: 'translate-y-full slide-out'
}`}>
{item.title}
</div>
))}
<style jsx>{`
.slide-in {
animation-name: slide-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.slide-out {
animation-name: slide-out;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@keyframes slide-in {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slide-out {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
`}</style>
</div>
)
};
}
export default Swipe