css dasboard 1.0

frontend/src/features/dashboard/components/Header.module.css

@@ -6,7 +6,17 @@
     width: 100%;
     height: 100%;
     position: relative;
-    padding-right: 10px;
+    display: flex;
+}
+.profile_avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(0, 66, 33);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    margin-right: 15px;
 }
 .menu{
     position: absolute;
@@ -20,4 +30,26 @@
 .menu button {
     width: 100%;
     text-align: left;
+}
+.profile_button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+}
+.text_profile {
+}
+.profile_name {
+    text-align: start;
+    margin-bottom: 5px;
+    font-weight: 500;
+}
+.profile_post {
+    color: #444;
+    font-weight: 300;
+}
+.arrow_down {
+    width: 12px;
+    height: 12px;
+    margin: 20px;
 }

frontend/src/features/dashboard/components/Header.tsx

@@ -18,7 +18,22 @@ export function Header():ReactElement {
     return (
         <>
         <div className={styles.profile}>
-            <button onClick={toggleMenu}>profile</button>
+            <button onClick={toggleMenu} className={styles.profile_button}>
+            <div className={styles.profile_avatar}>
+                ИИ
+            </div>
+                <div className={styles.text_profile}>
+                    <div className={styles.profile_name}>
+                        Иван Иванов
+                    </div>
+                    <div className={styles.profile_post}>
+                        Администратор
+                    </div>
+                </div>
+                <div className={styles.arrow_down}>
+<svg fill="#444" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 30.727 30.727" xml:space="preserve" stroke="#444"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M29.994,10.183L15.363,24.812L0.733,10.184c-0.977-0.978-0.977-2.561,0-3.536c0.977-0.977,2.559-0.976,3.536,0 l11.095,11.093L26.461,6.647c0.977-0.976,2.559-0.976,3.535,0C30.971,7.624,30.971,9.206,29.994,10.183z"></path> </g> </g></svg>
+                </div>
+            </button>
             {open && (<ul className={styles.menu}>
                 <li>Settings</li>
                 <li><button onClick={handleLogout}>logout</button></li>

frontend/src/features/dashboard/components/Sidebar.module.css

@@ -13,11 +13,24 @@
 .logo {
     grid-area: logo;
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 30% 1fr;
+    padding: 20px 20px 20px 5px;
 }
-.p {
-    display: grid;
-    text-align: center;
-    place-items: center;
-    height: 5vh;
+.l_img {
+    width: 100%;
+    height: 100%;
+}
+.logo_name {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+    justify-content: space-between;
+    padding: 6% 0;
+}
+.logo_title {
+    font-weight: 900;
+}
+.logo_heading {
+    color: #444;
+    font-weight: 500;
 }

frontend/src/features/dashboard/components/Sidebar.tsx

@@ -1,15 +1,26 @@
 import type { ReactElement } from "react";
 import styles from "./Sidebar.module.css"
+import l_img from "../../../assets/LOGO.png";
 
 export function Sidebar():ReactElement {
 
     return (
         <>
         <div className={styles.wrapper}>
+           {/* ссылку на главную */}
         <div className={styles.logo}>
-            <p className={styles.p}>logo</p>
-            <p className={styles.p}>Project name</p>
+                <img className={styles.l_img} src={l_img} alt="Logo" />
+            
+            <p className={styles.logo_name}>
+                <div className={styles.logo_title}>
+                    The DisExcel
+                </div>
+                <div className={styles.logo_heading}>
+                    Project
+                </div>
+            </p>
         </div>
+            {/* до сюда */}
         <div className={styles.sidebar_elements}>
             <button>Dashboard</button>
             <button>Excel</button>

frontend/src/layouts/Main/Dashboard.module.css

@@ -5,7 +5,7 @@
 .wrapper {
     display: grid;
     grid-template-columns: 20% 1fr 20%;
-    grid-template-rows: 5vh 1fr;
+    grid-template-rows: 8.5% 1fr;
     min-height: 100vh;
     background-color:#F7FAF9;
     grid-template-areas: