47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { Menu as TMenu } from "tdesign-react";
|
|
import type { MenuValue } from "tdesign-react";
|
|
import { APP_ROUTES, routePath, type RouteId } from "../router";
|
|
|
|
export interface AppMenuProps {
|
|
activeId: RouteId;
|
|
collapsed?: boolean;
|
|
onChange: (id: RouteId) => void;
|
|
className?: string;
|
|
showLogo?: boolean;
|
|
width?: [string, string];
|
|
}
|
|
|
|
const { MenuItem } = TMenu;
|
|
|
|
export default function AppMenu({ activeId, collapsed = false, onChange, className, showLogo = true, width = ["232px", "64px"] }: AppMenuProps) {
|
|
const handleChange = (value: MenuValue) => {
|
|
if (typeof value === "string") onChange(value as RouteId);
|
|
};
|
|
|
|
return (
|
|
<TMenu
|
|
className={className}
|
|
value={activeId}
|
|
collapsed={collapsed}
|
|
width={width}
|
|
theme="light"
|
|
logo={showLogo ? <MenuLogo collapsed={collapsed} /> : undefined}
|
|
onChange={handleChange}
|
|
>
|
|
{APP_ROUTES.map(({ id, title, icon: Icon }) => (
|
|
<MenuItem key={id} value={id} href={routePath(id)} onClick={({ e }) => e.preventDefault()} icon={<Icon className="t-icon tn-menu-icon" size={18} strokeWidth={1.8} />}>
|
|
{title}
|
|
</MenuItem>
|
|
))}
|
|
</TMenu>
|
|
);
|
|
}
|
|
|
|
function MenuLogo({ collapsed }: { collapsed: boolean }) {
|
|
return (
|
|
<div className="tn-menu-logo" aria-label="TallyNote">
|
|
<span className={collapsed ? "tn-logo-short" : "tn-logo-full"}>{collapsed ? "TN" : "TallyNote"}</span>
|
|
</div>
|
|
);
|
|
}
|