Made sidebar collapsible

src/pages/AppLayout.jsx

@@ -1,17 +1,22 @@
-import React from 'react'
+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}>
-     <Sidebar/>
-     <Map/>
+       <button className={`${styles.burger} ${isOpen ? styles.active : ""}`} onClick={() => setIsOpen(!isOpen)}>
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+      <Sidebar isOpen={isOpen}/>
+      <Map/>
       {isAuthenticated && <User/>}
     </div>
   )