text: import React from "react";
  import { Icon, Menu } from "semantic-ui-react";
  import "./SidebarItem.scss";
  
  export const SidebarItem = (props) => {
    // React will ignore custom boolean attributes, therefore we pass a string
    // we use this attribute in our SCSS for styling
    const highlight = props.highlight ? "highlight-item" : null;
    return (
      <Menu.Item
        href={props.link}
        className={["sidebar-item", highlight].join(" ")}
      >
        <div className="sidebar-item-alignment-container">
          <span>
            <Icon
              size="large"
              name={props.icon}
              style={{
                marginLeft: props.toggle || props.userToggle ? "145px" : "0",
              }}
            />{" "}
          </span>
          <span>{props.toggle || props.userToggle ? "" : props.label}</span>
        </div>
      </Menu.Item>
    );
  };
  