frontend2/src/components/layout/Sidebar.tsx

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconDefinition, faListAlt, faMap, faAddressBook, faUser, faFileArchive, faFolderOpen, faFolder, faFileAlt } from "@fortawesome/free-regular-svg-icons";
import { faArchive, faDatabase, faAlignJustify, faHashtag, faHistory, faPlus, faPen, faRadiation } from "@fortawesome/free-solid-svg-icons";

import styles from "./Sidebar.module.sass";

export function Sidebar() {

  return (
    <div className={styles.sidebar}>
      <SidebarItem icon={faListAlt} href="/story/" text="Story" />
      <SidebarItem icon={faArchive} href="/logs/" text="Logs" />
      <SidebarItem icon={faAddressBook} href="/data/characters/" text="Characters" />
      <SidebarItem icon={faHashtag} href="/data/channels/" text="Channels" />
      <SidebarItem icon={faFileAlt} href="/data/files/" text="Files" />
      <SidebarItem icon={faHistory} href="/data/changes/" text="History" />
      <SidebarItem icon={faPlus} text="Add" skip />
      <SidebarItem icon={faRadiation} text="Danger Zone" />
      <SidebarItem icon={faUser} text="Logout [Gisle]" />
    </div>
  )
}

interface SidebarItemProps {
  icon: IconDefinition
  text: string
  href?: string
  skip?: boolean
}

export function SidebarItem(props: SidebarItemProps) {
  let className = styles.sidebarItem;
  if (props.skip === true) {
    className += " " + styles.sidebarItemSkip;
  }

  const content = (
    <>
      <div className={styles.sidebarItemIcon}>
        <FontAwesomeIcon icon={props.icon} />
      </div>
      <div className={styles.sidebarItemText}>{props.text}</div>
    </>
  );

  if (props.href) {
    return (
      <a href={props.href}>
        <div className={className}>
          {content}
        </div>
      </a>
    )
  }

  return (
    <div className={className}>
      {content}
    </div>
  )
}