EcrituresNumeriques / stylo / 14055217767

import React, { useState } from 'react'

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

import Button from '../Button.jsx'

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

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

export default function CollaborativeEditorMenu() {

  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('metadata')}>

                Métadonnées <ChevronRight style={{ strokeWidth: 3 }} />

              </li>

            </ul>

          <div className={styles.content}>

            {activeMenu === 'metadata' && (

              <ArticleMetadata

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

                metadata={{}}

                readOnly={true}

              />

          </div>

        </section>

    </div>

}