import { useEffect  } from 'react';
import { Outlet, useLocation } from 'react-router-dom';

import styles from './Home.module.css'

import Sidebar from '../components/Sidebar';

import { AnimatePresence, motion } from "framer-motion";

function Home () {
    useEffect(()=> {
        document.title = "PowerOn";
    }, []);
    const location = useLocation();
    return (
        <div className={styles.homeContainer}> 
            <div className={styles.body}>
                <div className={styles.homeSidebar}>
                    <Sidebar />
                </div>
                <div className={styles.homeContent}>
                    <AnimatePresence mode="wait">
                    <motion.div
                        key={location.pathname}
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ duration: 0.3, ease: "easeInOut" }}
                        >
                            <Outlet />
                        </motion.div>
                    </AnimatePresence>
                </div>
                
            </div>
        </div>)
}

export default Home;