update next/link
This commit is contained in:
tjs
parent
f702cdac69
commit
a7cfbbe084
|
|
@ -39,7 +39,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
|
|||
>
|
||||
<div className="flex min-h-screen flex-col justify-between">
|
||||
<div className="my-2">
|
||||
<Link href={'/'} shallow={true} passHref>
|
||||
<Link href={'/'} shallow={true} passHref legacyBehavior>
|
||||
<div
|
||||
className={`h-14 items-center transition-all duration-300 ease-in-out ${
|
||||
collapsed ? '' : 'justify-start'
|
||||
|
|
@ -173,7 +173,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default SideNav
|
||||
|
|
@ -199,44 +199,45 @@ const MenuItem = ({
|
|||
}) => {
|
||||
return (
|
||||
<Tooltip content={title} placement="right" show={collapsed && showTooltip}>
|
||||
<Link href={pagePath} shallow={true}>
|
||||
<a
|
||||
className={`default-transition flex cursor-pointer px-4 focus:text-th-primary focus:outline-none md:hover:text-th-primary ${
|
||||
active ? 'text-th-primary' : 'text-th-fgd-1'
|
||||
} ${hideIconBg ? 'py-1' : 'py-1.5 xl:py-2'}`}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className={
|
||||
hideIconBg
|
||||
? ''
|
||||
: 'flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3'
|
||||
}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
<Transition
|
||||
show={!collapsed}
|
||||
as={Fragment}
|
||||
enter="transition ease-in duration-300"
|
||||
enterFrom="opacity-50"
|
||||
enterTo="opacity-100"
|
||||
leave="transition ease-out duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<span className="ml-3 xl:text-base">{title}</span>
|
||||
</Transition>
|
||||
<Link
|
||||
href={pagePath}
|
||||
shallow={true}
|
||||
className={`default-transition flex cursor-pointer px-4 focus:text-th-primary focus:outline-none md:hover:text-th-primary ${
|
||||
active ? 'text-th-primary' : 'text-th-fgd-1'
|
||||
} ${hideIconBg ? 'py-1' : 'py-1.5 xl:py-2'}`}>
|
||||
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className={
|
||||
hideIconBg
|
||||
? ''
|
||||
: 'flex h-8 w-8 items-center justify-center rounded-full bg-th-bkg-3'
|
||||
}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
{isExternal ? (
|
||||
<ArrowTopRightOnSquareIcon className="h-4 w-4" />
|
||||
) : null}
|
||||
<Transition
|
||||
show={!collapsed}
|
||||
as={Fragment}
|
||||
enter="transition ease-in duration-300"
|
||||
enterFrom="opacity-50"
|
||||
enterTo="opacity-100"
|
||||
leave="transition ease-out duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<span className="ml-3 xl:text-base">{title}</span>
|
||||
</Transition>
|
||||
</div>
|
||||
</a>
|
||||
{isExternal ? (
|
||||
<ArrowTopRightOnSquareIcon className="h-4 w-4" />
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
</Link>
|
||||
</Tooltip>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export const ExpandableMenuItem = ({
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ const MultiSelectDropdown = ({
|
|||
</div>
|
||||
)}
|
||||
</Popover>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default MultiSelectDropdown
|
||||
|
|
|
|||
|
|
@ -31,61 +31,56 @@ const BottomBar = () => {
|
|||
const { asPath } = useRouter()
|
||||
const [showPanel, setShowPanel] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-4 grid-rows-1 bg-th-bkg-2 py-2.5">
|
||||
<Link
|
||||
href={{
|
||||
pathname: '/',
|
||||
}}
|
||||
>
|
||||
<a
|
||||
className={`${
|
||||
asPath === '/' ? 'text-th-primary' : 'text-th-fgd-3'
|
||||
} col-span-1 flex cursor-pointer flex-col items-center`}
|
||||
>
|
||||
<HomeIcon className="mb-1 h-4 w-4" />
|
||||
<StyledBarItemLabel>{t('account')}</StyledBarItemLabel>
|
||||
</a>
|
||||
</Link>
|
||||
<Link
|
||||
href={{
|
||||
pathname: '/swap',
|
||||
}}
|
||||
shallow={true}
|
||||
>
|
||||
<a
|
||||
className={`${
|
||||
asPath === '/swap' ? 'text-th-primary' : 'text-th-fgd-3'
|
||||
} col-span-1 flex cursor-pointer flex-col items-center`}
|
||||
>
|
||||
<ArrowsRightLeftIcon className="mb-1 h-4 w-4" />
|
||||
<StyledBarItemLabel>{t('swap')}</StyledBarItemLabel>
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/trade" shallow={true}>
|
||||
<a
|
||||
className={`${
|
||||
asPath === '/trade' ? 'text-th-primary' : 'text-th-fgd-3'
|
||||
} col-span-1 flex cursor-pointer flex-col items-center`}
|
||||
>
|
||||
<TradeIcon className="mb-1 h-4 w-4" />
|
||||
<StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
|
||||
</a>
|
||||
</Link>
|
||||
<a
|
||||
className={`${
|
||||
showPanel ? 'text-th-primary' : 'text-th-fgd-3'
|
||||
} col-span-1 flex cursor-pointer flex-col items-center`}
|
||||
onClick={() => setShowPanel(!showPanel)}
|
||||
>
|
||||
<Bars3Icon className="mb-1 h-4 w-4" />
|
||||
<StyledBarItemLabel>{t('more')}</StyledBarItemLabel>
|
||||
</a>
|
||||
</div>
|
||||
<MoreMenuPanel showPanel={showPanel} setShowPanel={setShowPanel} />
|
||||
</>
|
||||
)
|
||||
return <>
|
||||
<div className="grid grid-cols-4 grid-rows-1 bg-th-bkg-2 py-2.5">
|
||||
<Link
|
||||
href={{
|
||||
pathname: '/',
|
||||
}}
|
||||
className={`${
|
||||
asPath === '/' ? 'text-th-primary' : 'text-th-fgd-3'
|
||||
} col-span-1 flex cursor-pointer flex-col items-center`}>
|
||||
|
||||
<HomeIcon className="mb-1 h-4 w-4" />
|
||||
<StyledBarItemLabel>{t('account')}</StyledBarItemLabel>
|
||||
|
||||
</Link>
|
||||
<Link
|
||||
href={{
|
||||
pathname: '/swap',
|
||||
}}
|
||||
shallow={true}
|
||||
className={`${
|
||||
asPath === '/swap' ? 'text-th-primary' : 'text-th-fgd-3'
|
||||
} col-span-1 flex cursor-pointer flex-col items-center`}>
|
||||
|
||||
<ArrowsRightLeftIcon className="mb-1 h-4 w-4" />
|
||||
<StyledBarItemLabel>{t('swap')}</StyledBarItemLabel>
|
||||
|
||||
</Link>
|
||||
<Link
|
||||
href="/trade"
|
||||
shallow={true}
|
||||
className={`${
|
||||
asPath === '/trade' ? 'text-th-primary' : 'text-th-fgd-3'
|
||||
} col-span-1 flex cursor-pointer flex-col items-center`}>
|
||||
|
||||
<TradeIcon className="mb-1 h-4 w-4" />
|
||||
<StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
|
||||
|
||||
</Link>
|
||||
<a
|
||||
className={`${
|
||||
showPanel ? 'text-th-primary' : 'text-th-fgd-3'
|
||||
} col-span-1 flex cursor-pointer flex-col items-center`}
|
||||
onClick={() => setShowPanel(!showPanel)}
|
||||
>
|
||||
<Bars3Icon className="mb-1 h-4 w-4" />
|
||||
<StyledBarItemLabel>{t('more')}</StyledBarItemLabel>
|
||||
</a>
|
||||
</div>
|
||||
<MoreMenuPanel showPanel={showPanel} setShowPanel={setShowPanel} />
|
||||
</>;
|
||||
}
|
||||
|
||||
export default BottomBar
|
||||
|
|
@ -161,14 +156,14 @@ const MoreMenuItem = ({
|
|||
<ChevronRightIcon className="h-5 w-5" />
|
||||
</a>
|
||||
) : (
|
||||
<Link href={path} shallow={true}>
|
||||
<a className={classNames}>
|
||||
<div className="flex items-center">
|
||||
{icon}
|
||||
<span className="ml-1.5">{title}</span>
|
||||
</div>
|
||||
<ChevronRightIcon className="h-5 w-5" />
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
(<Link href={path} shallow={true} className={classNames}>
|
||||
|
||||
<div className="flex items-center">
|
||||
{icon}
|
||||
<span className="ml-1.5">{title}</span>
|
||||
</div>
|
||||
<ChevronRightIcon className="h-5 w-5" />
|
||||
|
||||
</Link>)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,19 +12,20 @@ const MenuItem = ({ href, children, newWindow = false }: MenuItemProps) => {
|
|||
const { asPath } = useRouter()
|
||||
|
||||
return (
|
||||
<Link href={href} shallow={true}>
|
||||
<a
|
||||
className={`text-mango-200 flex h-full items-center justify-between border-b border-th-bkg-4 p-3 font-bold hover:text-yellow-400 md:border-none md:py-0
|
||||
${asPath === href ? `text-th-primary` : `border-transparent`}
|
||||
`}
|
||||
target={newWindow ? '_blank' : ''}
|
||||
rel={newWindow ? 'noopener noreferrer' : ''}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="h-5 w-5 md:hidden" />
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
(<Link
|
||||
href={href}
|
||||
shallow={true}
|
||||
className={`text-mango-200 flex h-full items-center justify-between border-b border-th-bkg-4 p-3 font-bold hover:text-yellow-400 md:border-none md:py-0
|
||||
${asPath === href ? `text-th-primary` : `border-transparent`}
|
||||
`}
|
||||
target={newWindow ? '_blank' : ''}
|
||||
rel={newWindow ? 'noopener noreferrer' : ''}>
|
||||
|
||||
{children}
|
||||
<ChevronRightIcon className="h-5 w-5 md:hidden" />
|
||||
|
||||
</Link>)
|
||||
);
|
||||
}
|
||||
|
||||
export default MenuItem
|
||||
|
|
|
|||
Loading…
Reference in New Issue