2022-07-18 11:38:44 +03:00

59 lines
2.5 KiB
TypeScript

/* -------------------------------------------------------------------------- */
/* Libraries */
/* -------------------------------------------------------------------------- */
import React from "react";
import { useTranslation } from "react-i18next";
/* -------------------------------------------------------------------------- */
/* Icons */
/* -------------------------------------------------------------------------- */
import { ReactComponent as SVGUserIcon } from "assets/svg/user.svg";
import { ReactComponent as SVGShieldIcon } from "assets/svg/shield.svg";
import { ReactComponent as SVGServicesIcon } from "assets/svg/services.svg";
/* -------------------------------------------------------------------------- */
/* Types */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* Components */
/* -------------------------------------------------------------------------- */
import SideNavItem from "./SideNavItem";
/* -------------------------------------------------------------------------- */
/* SideNav top-level component */
/* -------------------------------------------------------------------------- */
type Props = {
collapsed: boolean;
};
export default function SideNav({ collapsed }: Props) {
const { t } = useTranslation();
return (
<div className="space-y-1">
<SideNavItem
collapsed={collapsed}
icon={<SVGServicesIcon className="w-full h-full stroke-white" />}
caption={t("sidemenu.dashboard")}
to="/"
/>
<SideNavItem
collapsed={collapsed}
icon={<SVGUserIcon className="w-full h-full stroke-white" />}
caption={t("sidemenu.account")}
to="/personal-information"
/>
<SideNavItem
collapsed={collapsed}
caption={t("sidemenu.security")}
icon={<SVGShieldIcon className="w-full h-full stroke-white" />}
to="/security"
/>
<SideNavItem
collapsed={collapsed}
caption={t("sidemenu.services")}
icon={<SVGServicesIcon className="w-full h-full stroke-white" />}
to="/services"
/>
</div>
);
}