complete home page

src/components/ui/dashboard/footer.tsx

@@ -3,7 +3,7 @@ import { socialsList } from "../../../utility/socials"
 
 export const Footer = () => {
     return (
-        <footer className="w-full flex flex-row gap-x-2 justify-end items-center">
+        <footer className="w-full flex flex-row gap-x-2 justify-center lg:justify-end items-center py-5">
             {socialsList?.map((item: SocialsInterface) => <img key={item?.name} src={item?.path} alt={item?.name} className="size-10 min-w-10 min-h-10 cursor-pointer" />)}
         </footer>
     )

src/components/ui/dashboard/header.tsx

@@ -7,7 +7,7 @@ type Props = {
 
 export const Header: FC<Props> = ({ setShow }) => {
     return (
-        <header className="flex flex-row w-full justify-between items-center mb-10 xl:mb-y-[60px]">
+        <header className="flex flex-row w-full justify-between items-center mb-10 lg:mb-[60px]">
             <div className="flex flex-row gap-x-5 lg:gap-x-3 items-center">
                 <img src="/svgs/header/burger-menu.svg" alt="burger menu" className="lg:hidden size-[27px]" onClick={setShow} />
                 <img src="/svgs/header/person.svg" alt="person" className="size-[60px]" />

src/components/ui/dashboard/layout.tsx

@@ -9,16 +9,17 @@ export const DashboardLayout = () => {
     const [show, setShow] = useState<boolean>(false)
     const handleSidebar = () => setShow(prev => !prev)
     return (
-        <div className="w-full h-screen flex flex-col lg:flex-row">
+        <div className="w-full min-h-screen flex flex-col lg:flex-row">
             <Sidebar />
             <SidebarMobile show={show} setShow={setShow} />
-            <div className="w-full h-screen p-4 xl:p-[30px] flex flex-col">
+            <div className="w-full min-h-screen p-4 pb-0 xl:p-[30px] xl:pb-0 flex flex-col overflow-y-auto">
                 <Header setShow={handleSidebar} />
-                <div className="h-screen w-full">
+                <div className="flex-grow w-full">
                     <Outlet />
                 </div>
                 <Footer />
             </div>
         </div>
+
     )
 }

src/components/ui/dashboard/sidebar.tsx

@@ -7,7 +7,7 @@ export const Sidebar = () => {
     return (
         <div className="hidden lg:flex bg-auth-form  min-w-[318px] max-w-[318px] flex-col items-center py-[42px] gap-y-20">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
-            <div className="flex flex-col justify-between h-full">
+            <div className="flex flex-col justify-between h-full bg-auth-form ">
                 <div className="flex flex-col gap-y-3">
                     {sidebarItems?.map((item: SidebarInterface) => <SidebarItem key={item?.name} item={item} />)}
                 </div>