complete footer

public/svgs/social/facebook.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 20C30 14.5 25.5 10 20 10C14.5 10 10 14.5 10 20C10 25 13.625 29.125 18.375 29.875V22.875H15.875V20H18.375V17.75C18.375 15.25 19.875 13.875 22.125 13.875C23.25 13.875 24.375 14.125 24.375 14.125V16.625H23.125C21.875 16.625 21.5 17.375 21.5 18.125V20H24.25L23.75 22.875H21.375V30C26.375 29.25 30 25 30 20Z" fill="#11212D"/>
+</svg>

public/svgs/social/instagram.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 11.5C22.75 11.5 23.125 11.5 24.25 11.5C25.25 11.5 25.75 11.75 26.125 11.875C26.625 12.125 27 12.25 27.375 12.625C27.75 13 28 13.375 28.125 13.875C28.25 14.25 28.375 14.75 28.5 15.75C28.5 16.875 28.5 17.125 28.5 20C28.5 22.875 28.5 23.125 28.5 24.25C28.5 25.25 28.25 25.75 28.125 26.125C27.875 26.625 27.75 27 27.375 27.375C27 27.75 26.625 28 26.125 28.125C25.75 28.25 25.25 28.375 24.25 28.5C23.125 28.5 22.875 28.5 20 28.5C17.125 28.5 16.875 28.5 15.75 28.5C14.75 28.5 14.25 28.25 13.875 28.125C13.375 27.875 13 27.75 12.625 27.375C12.25 27 12 26.625 11.875 26.125C11.75 25.75 11.625 25.25 11.5 24.25C11.5 23.125 11.5 22.875 11.5 20C11.5 17.125 11.5 16.875 11.5 15.75C11.5 14.75 11.75 14.25 11.875 13.875C12.125 13.375 12.25 13 12.625 12.625C13 12.25 13.375 12 13.875 11.875C14.25 11.75 14.75 11.625 15.75 11.5C16.875 11.5 17.25 11.5 20 11.5ZM20 9.625C17.125 9.625 16.875 9.625 15.75 9.625C14.625 9.625 13.875 9.875 13.25 10.125C12.625 10.375 12 10.75 11.375 11.375C10.75 12 10.5 12.5 10.125 13.25C9.875 13.875 9.75 14.625 9.625 15.75C9.625 16.875 9.625 17.25 9.625 20C9.625 22.875 9.625 23.125 9.625 24.25C9.625 25.375 9.875 26.125 10.125 26.75C10.375 27.375 10.75 28 11.375 28.625C12 29.25 12.5 29.5 13.25 29.875C13.875 30.125 14.625 30.25 15.75 30.375C16.875 30.375 17.25 30.375 20 30.375C22.75 30.375 23.125 30.375 24.25 30.375C25.375 30.375 26.125 30.125 26.75 29.875C27.375 29.625 28 29.25 28.625 28.625C29.25 28 29.5 27.5 29.875 26.75C30.125 26.125 30.25 25.375 30.375 24.25C30.375 23.125 30.375 22.75 30.375 20C30.375 17.25 30.375 16.875 30.375 15.75C30.375 14.625 30.125 13.875 29.875 13.25C29.625 12.625 29.25 12 28.625 11.375C28 10.75 27.5 10.5 26.75 10.125C26.125 9.875 25.375 9.75 24.25 9.625C23.125 9.625 22.875 9.625 20 9.625Z" fill="#777577"/>
+<path d="M20 14.625C17 14.625 14.625 17 14.625 20C14.625 23 17 25.375 20 25.375C23 25.375 25.375 23 25.375 20C25.375 17 23 14.625 20 14.625ZM20 23.5C18.125 23.5 16.5 22 16.5 20C16.5 18.125 18 16.5 20 16.5C21.875 16.5 23.5 18 23.5 20C23.5 21.875 21.875 23.5 20 23.5Z" fill="#777577"/>
+<path d="M25.5 15.75C26.1904 15.75 26.75 15.1904 26.75 14.5C26.75 13.8096 26.1904 13.25 25.5 13.25C24.8096 13.25 24.25 13.8096 24.25 14.5C24.25 15.1904 24.8096 15.75 25.5 15.75Z" fill="#777577"/>
+</svg>

public/svgs/social/linkedin.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5 30H10.25V16.625H14.5V30ZM12.375 14.75C11 14.75 10 13.75 10 12.375C10 11 11.125 10 12.375 10C13.75 10 14.75 11 14.75 12.375C14.75 13.75 13.75 14.75 12.375 14.75ZM30 30H25.75V22.75C25.75 20.625 24.875 20 23.625 20C22.375 20 21.125 21 21.125 22.875V30H16.875V16.625H20.875V18.5C21.25 17.625 22.75 16.25 24.875 16.25C27.25 16.25 29.75 17.625 29.75 21.75V30H30Z" fill="#777577"/>
+</svg>

public/svgs/social/telegram.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1249 19.6354C15.4936 17.2963 19.0736 15.7543 20.8648 15.0092C25.9792 12.882 27.0419 12.5125 27.7346 12.5001C27.8869 12.4976 28.2276 12.5353 28.4482 12.7144C28.6345 12.8655 28.6858 13.0698 28.7103 13.2131C28.7348 13.3564 28.7654 13.6829 28.7411 13.9381C28.464 16.8501 27.2647 23.9169 26.6546 27.1784C26.3965 28.5585 25.8882 29.0212 25.3961 29.0665C24.3266 29.1649 23.5145 28.3597 22.4787 27.6807C20.8578 26.6182 19.9421 25.9568 18.3688 24.92C16.5505 23.7218 17.7292 23.0633 18.7654 21.987C19.0366 21.7053 23.7487 17.4193 23.8399 17.0305C23.8513 16.9819 23.8619 16.8006 23.7542 16.7049C23.6465 16.6092 23.4876 16.6419 23.3729 16.668C23.2104 16.7049 20.621 18.4163 15.6049 21.8024C14.8699 22.3071 14.2042 22.553 13.6077 22.5401C12.9501 22.5259 11.6853 22.1683 10.745 21.8626C9.59166 21.4877 8.67503 21.2895 8.75485 20.6528C8.79642 20.3212 9.2531 19.9821 10.1249 19.6354Z" fill="#777577"/>
+</svg>

public/svgs/social/whatsapp.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27 12.875C25.125 11 22.625 10 20 10C14.5 10 10 14.5 10 20C10 21.75 10.5 23.5 11.375 25L10 30L15.25 28.625C16.75 29.375 18.375 29.875 20 29.875C25.5 29.875 30 25.375 30 19.875C30 17.25 28.875 14.75 27 12.875ZM20 28.25C18.5 28.25 17 27.875 15.75 27.125L15.5 27L12.375 27.875L13.25 24.875L13 24.5C12.125 23.125 11.75 21.625 11.75 20.125C11.75 15.625 15.5 11.875 20 11.875C22.25 11.875 24.25 12.75 25.875 14.25C27.5 15.875 28.25 17.875 28.25 20.125C28.25 24.5 24.625 28.25 20 28.25ZM24.5 22C24.25 21.875 23 21.25 22.75 21.25C22.5 21.125 22.375 21.125 22.25 21.375C22.125 21.625 21.625 22.125 21.5 22.375C21.375 22.5 21.25 22.5 21 22.5C20.75 22.375 20 22.125 19 21.25C18.25 20.625 17.75 19.75 17.625 19.5C17.5 19.25 17.625 19.125 17.75 19C17.875 18.875 18 18.75 18.125 18.625C18.25 18.5 18.25 18.375 18.375 18.25C18.5 18.125 18.375 18 18.375 17.875C18.375 17.75 17.875 16.5 17.625 16C17.5 15.625 17.25 15.625 17.125 15.625C17 15.625 16.875 15.625 16.625 15.625C16.5 15.625 16.25 15.625 16 15.875C15.75 16.125 15.125 16.75 15.125 18C15.125 19.25 16 20.375 16.125 20.625C16.25 20.75 17.875 23.375 20.375 24.375C22.5 25.25 22.875 25 23.375 25C23.875 25 24.875 24.375 25 23.875C25.25 23.25 25.25 22.75 25.125 22.75C25 22.125 24.75 22.125 24.5 22Z" fill="#777577"/>
+</svg>

src/components/ui/auth/layout.tsx

@@ -1,10 +1,15 @@
 import { Outlet } from "react-router-dom"
+import { socialsList } from "../../../utility/socials"
+import { SocialsInterface } from "../../../types"
 
 export const AuthLayout = () => {
     return (
         <section
-            className="flex flex-row min-h-screen p-5 justify-center items-center xl:justify-stretch xl:items-stretch max-h-[750px] overflow-y-hidden">
+            className="flex flex-row min-h-screen p-5 justify-center items-center xl:justify-stretch xl:items-stretch max-h-[750px] overflow-y-hidden relative">
             <Outlet />
+            <footer className="hidden w-full xl:flex flex-row gap-x-2 justify-end !absolute left-4 bottom-4">
+                {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>
         </section>
     )
 }

src/components/ui/dashboard/footer.tsx

@@ -0,0 +1,10 @@
+import { SocialsInterface } from "../../../types"
+import { socialsList } from "../../../utility/socials"
+
+export const Footer = () => {
+    return (
+        <footer className="w-full flex flex-row gap-x-2 justify-end items-center">
+            {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 (
-        <div className="flex flex-row w-full justify-between items-center">
+        <header className="flex flex-row w-full justify-between items-center mb-10 xl:mb-y-[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]" />
@@ -17,6 +17,6 @@ export const Header: FC<Props> = ({ setShow }) => {
                 <p className="font-normal text-sm lg:text-xl">45597000-021</p>
                 <Call color="#11212D" variant="Bold" className="size-[27px]" />
             </div>
-        </div>
+        </header>
     )
 }

src/components/ui/dashboard/layout.tsx

@@ -0,0 +1,24 @@
+import { Outlet } from "react-router-dom"
+import { Sidebar } from "./sidebar"
+import { Header } from "./header"
+import { useState } from "react"
+import { SidebarMobile } from "./sidebar-mobile"
+import { Footer } from "./footer"
+
+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">
+            <Sidebar />
+            <SidebarMobile show={show} setShow={setShow} />
+            <div className="w-full h-screen p-4 xl:p-[30px] flex flex-col">
+                <Header setShow={handleSidebar} />
+                <div className="h-screen w-full">
+                    <Outlet />
+                </div>
+                <Footer />
+            </div>
+        </div>
+    )
+}

src/types/index.ts

@@ -43,3 +43,8 @@ export interface SidebarInterface {
     icon: React.ReactNode,
     activeIcon: React.ReactNode
 }
+
+export interface SocialsInterface {
+    name: string,
+    path: string
+}

src/utility/socials.tsx

@@ -0,0 +1,24 @@
+import { SocialsInterface } from "../types";
+
+export const socialsList: SocialsInterface[] | [] = [
+    {
+        name: "whatsapp",
+        path: "/svgs/social/whatsapp.svg"
+    },
+    {
+        name: "telegram",
+        path: "/svgs/social/telegram.svg"
+    },
+    {
+        name: "instagram",
+        path: "/svgs/social/instagram.svg"
+    },
+    {
+        name: "linkedin",
+        path: "/svgs/social/linkedin.svg"
+    },
+    {
+        name: "facebook",
+        path: "/svgs/social/facebook.svg"
+    },
+]