Function Header

apps/web/ui/Thread/Header/index.tsx:54–102

({
  thread,
  manage,
  expanded,
  breadcrumb,
  onClose,
  onExpandClick,
  onSetTitle,
  sidebar,
}: Props)

}

export default function Header({
  thread,
  manage,
  expanded,
  breadcrumb,
  onClose,
  onExpandClick,
  onSetTitle,
  sidebar,
}: Props) {
  const { title, state } = thread;
  return (
    <StickyHeader
      className={classNames({
        [styles.expanded]: expanded,
      })}
    >
      <div className={styles.container}>
        <div className={styles.center}>
          <div className={styles.header}>
            <Navigation
              breadcrumb={breadcrumb}
              onClose={onClose}
              onExpandClick={onExpandClick}
            />
            <div>
              <Title
                title={title}
                state={state}
                manage={manage}
                onSetTitle={onSetTitle}
              />
              <div className={styles.channelName}>
                # {' ' + thread.channel?.channelName}
              </div>
            </div>
          </div>
        </div>
        <div className={styles.icons}>
          {sidebar && (
            <Icon onClick={onClose}>
              <FiX />
            </Icon>
          )}
        </div>
      </div>
    </StickyHeader>
  );
}