38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
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;
|