41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import { Outlet } from "react-router-dom";
|
|
import Navbar from "./Components/Navbar";
|
|
import Sidebar from "./Components/Sidebar";
|
|
import Footer from "./Components/Footer";
|
|
|
|
const Root = () => {
|
|
const [sideBarOpen, setSideBarOpen] = useState(false);
|
|
return (
|
|
<div className="xl:container mx-auto">
|
|
<Navbar sideBarOpen={sideBarOpen} openSideBar={setSideBarOpen} />
|
|
<div className="flex">
|
|
<AnimatePresence>
|
|
{sideBarOpen && (
|
|
<div id="backdrop" className="w-full h-screen absolute top-0 left-0 bg-black/20" onClick={() => setSideBarOpen(false)}>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
style={{ originX: 0.5 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{}}
|
|
duration="1.5s"
|
|
>
|
|
<Sidebar />
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
<div id="detail" className="py-3 mt-24 px-2 w-full">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Root;
|