feat: adding header

src/app/admin/layout.tsx

@@ -1,8 +1,7 @@
 import { ReactNode } from "react";
-import Image from "next/image";
-import { icons } from "#/assets/icons"
 import "../../assets/css/admin.css"
 import Sidebar from "../components/sidebar";
+import Header from "../components/adminHeader";
 
 export default function Dashboard({ children }: { children: ReactNode }) {
 
@@ -11,6 +10,7 @@ export default function Dashboard({ children }: { children: ReactNode }) {
     <div className="r-flex-between">
       <Sidebar />
       <main className="flex-grow-1 min-w-0 pt-md-1 pt-sm-5">
+        <Header/>
         <div className="p-4">
           {children}
         </div>

src/app/components/adminHeader.tsx

@@ -0,0 +1,18 @@
+import Image from "next/image";
+import { icons } from "#/assets/icons"
+
+export default function AdminHeader() {
+
+  return (
+    <>
+      <nav className="header r-flex-between px-[44px] py-[20px] ">
+        <p className="name text-[26px]">Bienvenue, <span>Ken B.</span> </p>
+        <div className="r-flex-between justify-center items-center r-gap-12">
+          <Image src={icons.notificationsIcon} alt="Notifications" />
+          <Image src={icons.profilePicture} alt="ProfilePicture" />
+          <Image src={icons.arrowUp} alt="arrowUp" />
+        </div>
+      </nav>
+    </>
+  )
+}

src/app/components/sidebar.tsx

@@ -18,8 +18,8 @@ export default function Sidebar() {
 
   return (
     <>
-      <div className="sidebar r-m-0 d-flex flex-column pt-[16px] max-w-[90px] h-[100vh] relative ">
-        <div className="logo r-flex-center pt-[13px] px-[20px] ">
+      <div className="sidebar r-m-0 d-flex flex-column pt-[25px] max-w-[90px] h-[100vh] relative ">
+        <div className="logo r-flex-center px-[20px] ">
           <Image src={icons.logo} alt="Logo" className="scale-95" />
         </div>
         <div className="nav-menu r-column-center h-max pt-[160px] r-gap-40 ">

src/app/globals.css

@@ -1,20 +1,20 @@
 @import "tailwindcss";
 
 :root {
-  --foreground: #000000;
+  --foreground: #04060F;
   --background: #ffffff;
   --primary: #246BFD;
   --cinder: #E7E5E4;
 }
 
 [ data-theme="dark"] {
-  --foreground: #000000;
+  --foreground: #04060F;
   --background: #ffffff;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground: #000000;
+    --foreground: #04060F;
     --background: #ffffff;
   }
 }