From 99f3be65bca4413099528d6e7b99b428726bb661 Mon Sep 17 00:00:00 2001
From: Ruben <rubensenpai11@gmail.com>
Date: Tue, 25 Mar 2025 21:08:14 +0100
Subject: [PATCH] feat: adding header

---
 src/app/admin/layout.tsx           |  8 ++++----
 src/app/components/adminHeader.tsx | 18 ++++++++++++++++++
 src/app/components/sidebar.tsx     |  4 ++--
 src/app/globals.css                |  6 +++---
 4 files changed, 27 insertions(+), 9 deletions(-)
 create mode 100644 src/app/components/adminHeader.tsx

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 7aaf709..90a195a 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -1,16 +1,16 @@
 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 }) {
 
   return (
-    
+
     <div className="r-flex-between">
-      <Sidebar/>
+      <Sidebar />
       <main className="flex-grow-1 min-w-0 pt-md-1 pt-sm-5">
+        <Header/>
         <div className="p-4">
           {children}
         </div>
diff --git a/src/app/components/adminHeader.tsx b/src/app/components/adminHeader.tsx
new file mode 100644
index 0000000..e5e5131
--- /dev/null
+++ b/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>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/app/components/sidebar.tsx b/src/app/components/sidebar.tsx
index 9d1cae6..e093e6a 100644
--- a/src/app/components/sidebar.tsx
+++ b/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 ">
diff --git a/src/app/globals.css b/src/app/globals.css
index 8b805a3..2662a8b 100644
--- a/src/app/globals.css
+++ b/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;
   }
 }