64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import {
|
|
VscCircuitBoard,
|
|
VscCode,
|
|
VscSettingsGear,
|
|
VscSourceControl,
|
|
VscTerminal,
|
|
} from "react-icons/vsc";
|
|
import { ReactElement, ReactNode } from "react";
|
|
import ActiveLink from "../Navigation/ActiveLink";
|
|
|
|
const SideBar = () => {
|
|
return (
|
|
<div className="sidebar">
|
|
<ActiveLink href="/board" activeClassName="sidebar-icon-active" shallow>
|
|
<SideBarIcon
|
|
tooltipText="Настройка Платы"
|
|
icon={<VscCircuitBoard size={40} />}
|
|
/>
|
|
</ActiveLink>
|
|
<ActiveLink href="/flow" activeClassName="sidebar-icon-active" shallow>
|
|
<SideBarIcon
|
|
tooltipText="Визуальная среда"
|
|
icon={<VscSourceControl size={40} />}
|
|
/>
|
|
</ActiveLink>
|
|
<ActiveLink href="/editor" activeClassName="sidebar-icon-active" shallow>
|
|
<SideBarIcon tooltipText="Редактор кода" icon={<VscCode size={40} />} />
|
|
</ActiveLink>
|
|
|
|
<ActiveLink href="/console" activeClassName="sidebar-icon-active" shallow>
|
|
<SideBarIcon tooltipText="Консоль" icon={<VscTerminal size={40} />} />
|
|
</ActiveLink>
|
|
|
|
<ActiveLink
|
|
href="/settings"
|
|
activeClassName="sidebar-icon-active"
|
|
shallow
|
|
>
|
|
<SideBarIcon
|
|
tooltipText="Настройки"
|
|
icon={<VscSettingsGear size={40} />}
|
|
/>
|
|
</ActiveLink>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
type SideBarIconProps = {
|
|
className?: string;
|
|
tooltipText: string;
|
|
icon: ReactElement;
|
|
};
|
|
|
|
const SideBarIcon = ({ icon, tooltipText, className }: SideBarIconProps) => {
|
|
return (
|
|
<div className={`sidebar-icon group ${className}`}>
|
|
{icon}
|
|
<span className="sidebar-tooltip group-hover:visible">{tooltipText}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SideBar;
|