northshrevebaptist.org/src/Root.jsx

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;