import React, { useState } from 'react'
import Sidebar from '../components/Sidebar'
import styles from './AppLayout.module.css'
import Map from '../components/Map'
import User from '../components/User'
import { useAuth } from '../contexts/AuthContext'

const AppLayout = () => {
  const {isAuthenticated}=useAuth();
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div className={styles.app}>
       <button className={`${styles.burger} ${isOpen ? styles.active : ""}`} onClick={() => setIsOpen(!isOpen)}>
        <span></span>
        <span></span>
        <span></span>
      </button>
      <Sidebar isOpen={isOpen}/>
      <Map/>
      {isAuthenticated && <User/>}
    </div>
  )
}

export default AppLayout