2021-04-21 13:53:23 +00:00
|
|
|
import React from "react"
|
|
|
|
import Style from "./ButtonSidebar.module.css"
|
|
|
|
import classNames from "classnames"
|
|
|
|
import make_icon from "../utils/make_icon"
|
2021-04-21 16:00:21 +00:00
|
|
|
import { Link } from "react-router-dom"
|
|
|
|
import { useRouteMatch } from "react-router"
|
2021-04-21 13:53:23 +00:00
|
|
|
|
|
|
|
|
2021-04-23 00:18:06 +00:00
|
|
|
/**
|
|
|
|
* A button residing in the sidebar, used to switch between pages.
|
|
|
|
*
|
|
|
|
* @param icon - The FontAwesome IconDefinition of the icon that should be rendered in the button.
|
|
|
|
* @param children - The contents of the button.
|
|
|
|
* @param to - The path of the page the user should be redirected to when clicking on the button.
|
|
|
|
* @param className - Additional class(es) to add to the button.
|
|
|
|
* @param props - Additional props to pass to the button.
|
|
|
|
* @returns {JSX.Element}
|
|
|
|
* @constructor
|
|
|
|
*/
|
2021-04-21 16:00:21 +00:00
|
|
|
export default function ButtonSidebar({ icon, children, to, className, ...props }) {
|
|
|
|
const match = useRouteMatch({
|
|
|
|
path: to,
|
|
|
|
strict: true,
|
|
|
|
exact: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
if(match) {
|
|
|
|
className = classNames(Style.Active, className)
|
|
|
|
}
|
|
|
|
|
2021-04-21 13:53:23 +00:00
|
|
|
return (
|
2021-04-21 16:00:21 +00:00
|
|
|
<Link to={to} className={Style.ButtonLink}>
|
|
|
|
<div className={classNames(Style.ButtonSidebar, className)} {...props}>
|
|
|
|
{make_icon(icon, Style.ButtonIcon)}
|
|
|
|
<div className={Style.ButtonText}>
|
|
|
|
{children}
|
|
|
|
</div>
|
2021-04-21 13:53:23 +00:00
|
|
|
</div>
|
2021-04-21 16:00:21 +00:00
|
|
|
</Link>
|
2021-04-21 13:53:23 +00:00
|
|
|
)
|
|
|
|
}
|