ISSUE #25: CREATE global margin

src/app/components/Header.js

@@ -60,7 +60,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
   },
 }));
 
-export default function Header({ toggleSideBar }) {
+export default function Header({ handleOpenMenu }) {
 
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
@@ -80,10 +80,7 @@ export default function Header({ toggleSideBar }) {
     setOpenSearch(!openSearch);
   };
 
-  const [openMenu, setOpenMenu] = useState(false);
-  const handleOpenMenu = () => {
-    setOpenMenu(!openMenu);
-  };
+
 
   const [openMenuProfile, setOpenMenuProfile] = useState(false);
   const handleOpenMenuProfile = () => {
@@ -153,8 +150,8 @@ export default function Header({ toggleSideBar }) {
                 />
               </Search>
               <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
-                <Button className="bg-secondary text-white rounded-lg  normal-case h-7 mt-0.5 p-4 px-6 font-bold	">Filtros</Button>
-                <Button className="bg-orange text-white rounded-lg  normal-case h-7  p-4 mt-0.5 ml-10 font-bold	">
+                <Button className="bg-secondary hover:bg-secondary-hover text-white rounded-lg  normal-case h-7 mt-0.5 p-4 px-6 font-bold	">Filtros</Button>
+                <Button className="bg-orange hover:bg-orange-hover text-white rounded-lg  normal-case h-7  p-4 mt-0.5 ml-10 font-bold	">
                   +Publicar </Button>
               </Box>
             </div>
@@ -217,7 +214,6 @@ export default function Header({ toggleSideBar }) {
         </AppBar>
         {renderMobileMenu}
       </Box>
-      <SideBar openMenu={openMenu} />
     </div>
   );
 }

src/app/components/Overlay.js

+"use client"
+
+import Header from "./Header";
+import SideBar from "./SideBar";
+import { useState } from "react";
+
+export default function Overlay({ children}) {
+  const [openMenu, setOpenMenu] = useState(false);
+  const handleOpenMenu = () => {
+    setOpenMenu(!openMenu);
+  };
+
+  return (
+    <main className="flex min-h-screen bg-main flex-col items-center ">
+      <Header handleOpenMenu={handleOpenMenu}/>
+      <SideBar openMenu={openMenu} />
+      
+      <div className={`flex flex-col ${openMenu ? "ml-64" :"ml-22"} mt-[63px] items-center bg-main justify-center`}>
+        {children}
+      </div>
+    </main>
+  );
+}

src/app/components/SideBar.js

@@ -6,6 +6,7 @@ import LocalLibraryIcon from '@mui/icons-material/LocalLibrary';
 import PeopleAltIcon from '@mui/icons-material/PeopleAlt';
 import HomeIcon from '@mui/icons-material/Home';
 import { useEffect, useState } from 'react';
+import { Button } from '@mui/material';
 
 const acessoRapido = [
     {
@@ -61,7 +62,7 @@ export default function SideBar({ openMenu }) {
 
     return (
         <>
-            <div className={`top-16 max-[470px]:top-[60px] bg-main start-0 overflow-y-auto pb-24 bg-main pl-8 w-64 text-white fixed h-full z-40 ease-in-out duration-300 ${!openMenu ? "-translate-x-full " : "translate-x-0"
+            <div className={`top-16 max-[470px]:top-[60px] start-0 overflow-y-auto pb-24 bg-main pl-8 w-64 text-white fixed h-full z-40 ease-in-out duration-300 ${!openMenu ? "-translate-x-full " : "translate-x-0"
                 }`}>
                 <div className='pt-4'>
                     <a className='text-xl font-bold text-gray-500 '>Acesso Rápido</a>
@@ -90,8 +91,8 @@ export default function SideBar({ openMenu }) {
                     </div>
                 </div>
             </div>
-            {!openMenu && <div>
-            <div className='flex flex-col pt-2 pl-8 top-16 max-[470px]:top-[60px] bg-main start-0 overflow-y-auto pb-24 bg-main pl-0 w-[82px] text-white fixed h-full z-40 ease-in-out duration-300 '>
+            {!openMenu && <div className='max-[893px]:hidden '>
+            <div className='flex flex-col pt-2 items-center pl-4 top-16 max-[470px]:top-[60px] start-0 overflow-y-auto pb-24 bg-main w-[82px] text-white fixed h-full z-40 ease-in-out duration-300 '>
                 {acessoRapido.map((item, index) => {
                     return <Link href={item.href} key={index} className='cursor-pointer text-center	 text-secondary text-xs rounded hover:bg-slate-300 pt-x pt-0 mb-4 max-w-max '> < item.icon className='text-secondary text-3xl  cursor-pointer' />  </Link>
                 })}

src/app/page.js

 "use client"
 
-import Header from "./components/Header";
-import SideBar from "./components/SideBar";
-import { useState } from "react";
+import Overlay from "./components/Overlay";
+import UserCard from "./perfil/components/UserCard";
 
 export default function Home() {
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between">
-      <Header />
-    </main>
+    <Overlay>
+      {/* Coloque sua página aqui */}
+    </Overlay>
   );
 }

tailwind.config.js

@@ -11,8 +11,9 @@ module.exports = {
         "main": "#eaeded",
         "secondary": "#00bacc",
         "white": "#fff",
-        "orange": "#ED6F24"
-
+        "orange": "#ED6F24",
+        "secondary-hover": "#039EB7",
+        "orange-hover": "#DE5518",
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",