70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import React, { useContext, useRef } from 'react';
|
|
|
|
import { ISideMenuItem } from '@/components/navigation/SideMenu';
|
|
import Link from 'next/link';
|
|
import { ScreenContext } from '@/contexts/screen';
|
|
import { ReactComponent as TriangleOutlinedSVG } from '@/assets/svgs/triangle-outlined.svg';
|
|
import { UI } from '@/constants';
|
|
import classNames from 'classnames';
|
|
import { collapseSideMenu } from '@/state/navigation';
|
|
import { useDispatch } from 'react-redux';
|
|
import { useHoverDirty } from 'react-use';
|
|
|
|
interface SideMenuRowProps {
|
|
item: ISideMenuItem;
|
|
isActive: boolean;
|
|
}
|
|
|
|
export function SideMenuRow({ item, isActive }: SideMenuRowProps) {
|
|
const { isMobile, isTablet, isDesktop, isHuge, isEnormous } = useContext(
|
|
ScreenContext,
|
|
);
|
|
const isCollapsible = isTablet || isMobile;
|
|
const dispatch = useDispatch();
|
|
|
|
const handleOnClick = () => {
|
|
dispatch(collapseSideMenu());
|
|
};
|
|
|
|
const ref = useRef(null);
|
|
const isHovering = useHoverDirty(ref);
|
|
const isExcited = !isCollapsible && (isActive || isHovering);
|
|
|
|
const inner = (
|
|
<div
|
|
ref={ref}
|
|
onClick={handleOnClick}
|
|
style={{
|
|
maxHeight: '5rem',
|
|
padding:
|
|
isMobile || isTablet
|
|
? `0 ${UI.PAGE_CONTAINED_PADDING_VW}vw`
|
|
: 'unset',
|
|
}}
|
|
className={classNames(
|
|
'flex flex-1 space-x-6 justify-between text-primary items-center cursor-pointer border-b border-black py-4 hover:bg-secondary duration-300 whitespace-nowrap',
|
|
(isHuge || isEnormous) ? 'text-2xl' : isDesktop ? 'text-xl' : 'text-xl',
|
|
isActive ? 'bg-secondary' : 'bg-transparent',
|
|
item.shouldHide ? 'hidden' : '',
|
|
)}
|
|
>
|
|
<span className="pl-6 whitespace-no-wrap">{item.label}</span>
|
|
|
|
{!isMobile && !isTablet && (
|
|
<TriangleOutlinedSVG
|
|
className={classNames(
|
|
'h-4 pr-6 duration-300 fill-current transform',
|
|
isExcited ? 'text-primary scale-y-75' : 'text-transparent',
|
|
)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
return item.isExternal ? (
|
|
<a href={item.href}>{inner}</a>
|
|
) : (
|
|
<Link href={item.href}>{inner}</Link>
|
|
);
|
|
}
|