EcrituresNumeriques / stylo / 14055709846

import React, { useState } from 'react'

import { ChevronRight, Sidebar } from 'react-feather'

import { useTranslation } from 'react-i18next'

import Button from '../Button.jsx'

import ArticleTableOfContents from './ArticleTableOfContents.jsx'

import styles from './CollaborativeEditorMenu.module.scss'

import ArticleMetadata from '../Write/ArticleMetadata.jsx'

export default function CollaborativeEditorMenu() {

  const { t } = useTranslation()

  const [open, setOpen] = useState(false)

  const [activeMenu, setActiveMenu] = useState('')

  return (

    <div className={styles.menu} role="menu">

      <Button className={styles.openMenu} onClick={() => setOpen(!open)}>

        <Sidebar />

        {open ? 'Close' : 'Menu'}

      </Button>

      {open && (

        <section className={styles.container}>

          {activeMenu === '' && (

            <ul className={styles.entries}>

              <li onClick={() => setActiveMenu('toc')}>

                {t('toc.title')}

                <ChevronRight style={{ strokeWidth: 3 }} />

              </li>

              <li onClick={() => setActiveMenu('metadata')}>

                {t('metadata.title')}

                <ChevronRight style={{ strokeWidth: 3 }} />

              </li>

            </ul>

          <div className={styles.content}>

            {activeMenu === 'metadata' && (

              <ArticleMetadata

                onBack={() => setActiveMenu('')}

                metadata={{}}

                readOnly={true}

              />

            {activeMenu === 'toc' && (

              <ArticleTableOfContents onBack={() => setActiveMenu('')} />

          </div>

        </section>

    </div>

}