Source

components/SideNav/SideNavLink/SideNavLink.js

  1. // NPM module imports
  2. import React from "react";
  3. import PropTypes from "prop-types";
  4. import { Link } from "react-router-dom";
  6. // Style imports
  7. import styles from "./SideNavLink.module.scss";
  9. /**
  10.  * Renders the SideNavLink component
  11.  * @component
  12.  * @category SideNav
  13.  * @author Dan Levy <danlevy124@gmail.com>
  14.  */
  15. // TODO: This component should be split into a two components: (1) side nav link and (2) side nav sign out link
  16. const SideNavLink = (props) => {
  17.     // The component to render
  18.     let component;
  20.     if (props.isSignOutLink) {
  21.         // Sets component to the sign out version of SideNavLink
  22.         component = (
  23.             <button
  24.                 className={`${styles.sideNavLink} ${styles.sideNavLinkSignOut}`}
  25.                 type="button"
  26.                 onClick={props.onClick}
  27.             >
  28.                 {/* Tab icon */}
  29.                 <img
  30.                     className={styles.sideNavLinkIcon}
  31.                     src={props.icon}
  32.                     alt={props.name + " Icon"}
  33.                 />
  35.                 {/* Tab name */}
  36.                 <h3
  37.                     className={`${styles.sideNavLinkName} ${styles.sideNavLinkNameWhiteText}`}
  38.                 >
  39.                     {props.name}
  40.                 </h3>
  41.             </button>
  42.         );
  43.     } else {
  44.         const currentTabStyle = props.isCurrentTab
  45.             ? styles.sideNavLinkCurrentTab
  46.             : "";
  48.         const textColorStyle = props.isCurrentTab
  49.             ? styles.sideNavLinkNameBlueText
  50.             : styles.sideNavLinkNameWhiteText;
  52.         // Sets component to the regular version of SideNavLink
  53.         component = (
  54.             <Link
  55.                 className={`${styles.sideNavLink} ${currentTabStyle}`}
  56.                 to={props.route}
  57.                 onClick={props.onClick}
  58.             >
  59.                 {/* Tab icon */}
  60.                 <img
  61.                     className={styles.sideNavLinkIcon}
  62.                     src={props.icon}
  63.                     alt={props.name + " Icon"}
  64.                 />
  66.                 {/* Tab name */}
  67.                 <h3 className={`${styles.sideNavLinkName} ${textColorStyle}`}>
  68.                     {props.name}
  69.                 </h3>
  70.             </Link>
  71.         );
  72.     }
  74.     // Returns the JSX to render
  75.     return component;
  76. };
  78. // Prop types for the SideNavLink component
  79. SideNavLink.propTypes = {
  80.     /**
  81.      * Indicates if the tab is the currently selected tab
  82.      */
  83.     isCurrentTab: PropTypes.bool,
  85.     /**
  86.      * The tab name
  87.      */
  88.     name: PropTypes.string.isRequired,
  90.     /**
  91.      * The tab icon
  92.      */
  93.     icon: PropTypes.string.isRequired,
  95.     /**
  96.      * Where to route if the tab is clicked on
  97.      */
  98.     route: PropTypes.string,
  100.     /**
  101.      * Click handler
  102.      */
  103.     onClick: PropTypes.func.isRequired,
  105.     /**
  106.      * Indicates if the link is a sign out link
  107.      */
  108.     isSignOutLink: PropTypes.bool.isRequired,
  109. };
  111. export default SideNavLink;