65 lines
1.5 KiB
TypeScript
65 lines
1.5 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import React from "react";
|
|
import styled from "styled-components";
|
|
import { NavLink, useRouteMatch } from "react-router-dom";
|
|
import { MenuItem, Classes } from "@blueprintjs/core";
|
|
import AnalyticsUtil from "utils/AnalyticsUtil";
|
|
|
|
const Content = styled.div<{ collapsed: boolean }>`
|
|
display: flex;
|
|
justify-content: ${(props) => (props.collapsed ? "center" : "flex-start")};
|
|
align-items: center;
|
|
& > div:first-of-type {
|
|
margin-right: ${(props) => (props.collapsed ? 0 : props.theme.spaces[5])}px;
|
|
}
|
|
`;
|
|
|
|
export interface SideNavItemProps {
|
|
id: string;
|
|
icon?: ReactNode;
|
|
text: string;
|
|
path: string;
|
|
loading: boolean;
|
|
showText?: boolean;
|
|
}
|
|
|
|
export function SideNavItem(props: SideNavItemProps) {
|
|
const match = useRouteMatch({
|
|
path: props.path,
|
|
exact: true,
|
|
});
|
|
const menuItemContent = (
|
|
<Content collapsed={!props.showText}>
|
|
{props.icon}
|
|
{props.showText ? props.text : null}
|
|
</Content>
|
|
);
|
|
|
|
return (
|
|
<NavLink
|
|
exact
|
|
onClick={() => {
|
|
AnalyticsUtil.logEvent("PAGE_SWITCH", {
|
|
pageName: props.text,
|
|
pageId: props.id,
|
|
mode: "VIEW",
|
|
});
|
|
}}
|
|
to={props.path}
|
|
>
|
|
<MenuItem
|
|
active={!!match}
|
|
className={
|
|
props.loading
|
|
? Classes.SKELETON
|
|
: `${Classes.FILL} t--page-nav-${props.text}`
|
|
}
|
|
tagName="div"
|
|
text={menuItemContent}
|
|
/>
|
|
</NavLink>
|
|
);
|
|
}
|
|
|
|
export default SideNavItem;
|