css adjustments

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

@@ -4,4 +4,20 @@
     justify-content: end;
     align-items: center;
     width: 100%;
+    height: 100%;
+    position: relative;
+    padding-right: 10px;
+}
+.menu{
+    position: absolute;
+    top:100%;
+    right: 0;
+    background: white;
+    border: 1px solid #ddd;
+    padding: 8px;
+    list-style: none;
+}
+.menu button {
+    width: 100%;
+    text-align: left;
 }

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

@@ -1,12 +1,29 @@
-import type { ReactElement } from "react";
+import { useState, type ReactElement } from "react";
 import styles from "./Header.module.css"
+import { logout } from "../../../api/token";
+import { useNavigate } from "react-router-dom";
 
 export function Header():ReactElement {
+    const [open, setOpen] = useState(false);
+    const navigate = useNavigate();
     
+    function toggleMenu() {
+        setOpen(!open);
+    }
+
+    async function handleLogout() {
+        await logout();
+        navigate("/");
+    }
     return (
         <>
         <div className={styles.profile}>
-            <p>profile</p>
+            <button onClick={toggleMenu}>profile</button>
+            {open && (<ul className={styles.menu}>
+                <li>Settings</li>
+                <li><button onClick={handleLogout}>logout</button></li>
+            </ul>
+        )}
         </div>
         </>
     );

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

@@ -2,5 +2,4 @@
     display: grid;
     align-content: center;
     justify-content: center;
-    height: 100vh;
 }

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

@@ -1,9 +1,17 @@
+.wrapper{
+    display: grid;
+    grid-template-areas: 
+    "logo logo"
+    "elements elements";
+}
 .sidebar_elements{
     display: grid;
+    grid-area: elements;
     align-content: start;
     gap: 15px;
 }
 .logo {
+    grid-area: logo;
     display: grid;
     grid-template-columns: 1fr 1fr;
 }
@@ -11,4 +19,5 @@
     display: grid;
     text-align: center;
     place-items: center;
+    height: 5vh;
 }

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

@@ -5,6 +5,7 @@ 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>
@@ -14,6 +15,7 @@ export function Sidebar():ReactElement {
             <button>Excel</button>
             <button>Papers</button>
         </div>
+        </div>
         </>
     );
 }

frontend/src/index.css

@@ -9,7 +9,7 @@ html,body{
   font-family: 'Manrope', sans-serif;
   user-select: none;
   font-size:100%;line-height:1;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
-input,button,textarea{font-family:inherit;}
+input, button, textarea { font: inherit; }
 input::-ms-clear{display: none;}
 button{cursor: pointer;}
 button::-moz-focus-inner{padding:0;border:0;}

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

@@ -1,27 +1,39 @@
 
-/* * {
+* {
   outline: 1px solid red;
-} */
+}
 .wrapper {
     display: grid;
-    grid-template-columns: 20% 1fr;
+    grid-template-columns: 20% 1fr 20%;
-    height: 100vh;
+    grid-template-rows: 5vh 1fr;
+    min-height: 100vh;
+    background-color:#F7FAF9;
+    grid-template-areas:
+    "left_sidebar header header"
+    "left_sidebar content right_sidebar";
 }
 .left_sidebar{
     display: grid;
+    grid-area: left_sidebar;
     align-content: start;
     gap:10px;
+    background-color:#F1FAF7;
+    border-right: 1px solid #E1E9E6 ;
 }
 
 .header {
     display: grid;
+    grid-area: header;
+    background: #FFFFFF;
+    border-bottom: 1px solid #E1E9E6;
 }
 
 .content {
     display: grid;
+    grid-area: content;
 }
 
-.wrapper_1 {
+/* .wrapper_1 {
     display: grid;
     grid-template-rows: 5vh 1fr;
     height: 100%;
@@ -30,7 +42,10 @@
     display: grid;
     grid-template-columns: 70% 1fr;
     height: 100%;
-}
+} */
 .right_sidebar{
     display: grid;
+    grid-area: right_sidebar;
+    background: #FFFFFF;
+    border-left: 1px solid #E1E9E6;
 }

frontend/src/layouts/Main/Dashboard.tsx

@@ -1,12 +1,9 @@
 import type { ReactNode } from "react";
 import styles from "./Dashboard.module.css"
-import { useNavigate } from "react-router-dom";
-import { logout } from "../../api/token";
 import { usePermissions } from "../../hooks/usePermissions";
 
 
 export function MainLayout({sidebar, header, content, right_sidebar }: { sidebar: ReactNode;header: ReactNode; content: ReactNode; right_sidebar: ReactNode }) {
-    const navigate = useNavigate();
     //const { permissions, loading } = usePermissions();
     const { loading } = usePermissions();
     
@@ -14,31 +11,21 @@ export function MainLayout({sidebar, header, content, right_sidebar }: { sidebar
         return null;
     }
 
-    async function handleLogout() {
-        await logout();
-        navigate("/");
-    }
-
     return (
 
         <div className={styles.wrapper}>
             <div className={styles.left_sidebar}>
                 {sidebar}
             </div>
-            <div className={styles.wrapper_1}>
+            <div className={styles.header}>
-                <div className={styles.header}>
+                {header}
-                    {header}
+                {/* {permissions.has("admin") && <div><p>test</p></div>} */}
-                    {/* {permissions.has("admin") && <div><p>test</p></div>} */}
+            </div>
-                    <button onClick={handleLogout}>logout</button>
+            <div className={styles.content}>
-                </div>
+                    {content}
-                <div className={styles.wrapper_2}>
+            </div>
-                    <div className={styles.content}>
+            <div className={styles.right_sidebar}>
-                        {content}
+                    {right_sidebar}
-                    </div>
-                    <div className={styles.right_sidebar}>
-                        {right_sidebar}
-                    </div>
-                </div>
             </div>
         </div>
     );