69 lines
1.5 KiB
TypeScript
69 lines
1.5 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import {
|
|
IconHome,
|
|
IconSearch,
|
|
IconSettings,
|
|
IconFilePlus,
|
|
} from '@tabler/icons-react';
|
|
import NavigationLink from "@/components/sidebar/navigation/navigation-link";
|
|
import ButtonWithIcon from "@/components/ui/button-with-icon";
|
|
|
|
export type NavigationMenuType = {
|
|
label: string;
|
|
path: string;
|
|
icon: ReactNode;
|
|
target?: string,
|
|
onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
|
|
};
|
|
|
|
export const navigationMenu: NavigationMenuType[] = [
|
|
{
|
|
label: 'Home',
|
|
path: '',
|
|
icon: <IconHome size={16} />,
|
|
target: '/home',
|
|
},
|
|
{
|
|
label: 'Search',
|
|
path: '',
|
|
icon: <IconSearch size={16} />,
|
|
},
|
|
{
|
|
label: 'Settings',
|
|
path: '',
|
|
icon: <IconSettings size={16} />,
|
|
target: '/settings/account'
|
|
},
|
|
{
|
|
label: 'New Page',
|
|
path: '',
|
|
icon: <IconFilePlus size={16} />,
|
|
},
|
|
];
|
|
|
|
export const renderMenuItem = (menu, index) => {
|
|
if (menu.target) {
|
|
return (
|
|
<NavigationLink
|
|
key={index}
|
|
href={menu.target}
|
|
icon={menu.icon}
|
|
className="w-full flex flex-1 justify-start items-center"
|
|
>
|
|
{menu.label}
|
|
</NavigationLink>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ButtonWithIcon
|
|
key={index}
|
|
icon={menu.icon}
|
|
variant="ghost"
|
|
className="w-full flex flex-1 justify-start items-center"
|
|
// onClick={}
|
|
>
|
|
<span className="text-ellipsis overflow-hidden">{menu.label}</span>
|
|
</ButtonWithIcon>
|
|
);
|
|
};
|