Improve layout + logout

src/App.tsx

@@ -25,7 +25,7 @@ function App() {
     return () => {
       subscribed = false
     }
-  }, [isLogged])
+  }, [isLogged, setisLogged])
 
   return (
     <BrowserRouter>

src/components/DateSelector/dateSelector.scss

 @import '../../styles/config/colors';
 @import '../../styles/config/typography';
+@import '../../styles/config/breakpoints';
 .date-selector {
   display: flex;
   align-items: center;
@@ -7,6 +8,10 @@
   height: 3rem;
   margin: auto;
   max-width: 250px;
+  @media screen and(min-width: $width-desktop) {
+    position: relative;
+    left: -2rem;
+  }
   .text {
     @include text-large();
     color: white;

src/components/Editing/Editing.tsx

@@ -142,12 +142,12 @@ const Editing: React.FC = () => {
         <p className="title pagetitle">
           Édition des informations et de la citation du mois
         </p>
+        <DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
       </div>
       {isLoading ? (
         <Loader />
       ) : (
         <div className="content">
-          <DateSelector date={date} setDate={setDate} isEmpty={isEmpty} />
           <MonthlyNews
             header={header}
             quote={quote}

src/components/Editing/editing.scss

 @import '../../styles/config/typography.scss';
+@import '../../styles/config/layout.scss';
 .header {
+  position: fixed;
+  z-index: 1500;
+  width: inherit;
   background: radial-gradient(
     74.83% 76.97% at 50% 13.64%,
     #343641 0%,
     #1b1c22 100%
   );
-  height: 5rem;
-  box-shadow: 0px 5px 5px rgb(0 0 0 / 20%), 0px 3px 14px rgb(0 0 0 / 12%),
-    0px 8px 10px rgb(0 0 0 / 14%);
+  height: $navigator-height;
+  box-shadow: 0px 5px 5px rgb(0 0 0 / 0%), 0px 3px 14px rgb(0 0 0 / 0%),
+    0px 8px 10px rgb(0 0 0 / 15%);
   padding: 1.7rem;
 }
 .content {
   padding: 1rem;
+  margin-top: $navigator-height;
 }
 .subtitle {
   margin: 1rem 0;

src/components/Layout/layout.module.scss

@@ -12,6 +12,8 @@
   left: 0;
   width: $menu-width;
   height: 100vh;
+  z-index: 1501;
+
   @media screen and(max-width: $width-phone) {
     width: 0;
     display: none;
@@ -23,6 +25,7 @@
   left: 0;
   height: $navbar-height;
   width: 100%;
+  z-index: 1500;
 }
 .wrapper {
   flex: 1;

src/components/Menu/Menu.tsx

@@ -6,8 +6,14 @@ import { NavLink } from 'react-router-dom'
 import { UserContext } from '../../hooks/userContext'
 
 const Menu: React.FC = () => {
-  const { isLogged, logoutUser } = useContext(UserContext)
+  const { isLogged, logoutUser, setisLogged } = useContext(UserContext)
 
+  const handleLogout = () => {
+    if (logoutUser && setisLogged) {
+      logoutUser()
+      setisLogged(false)
+    }
+  }
   return (
     <nav className={'menu'}>
       <div className="logo-container">
@@ -24,7 +30,9 @@ const Menu: React.FC = () => {
       </div>
       <div className="administration">
         {isLogged ? (
-          <p onClick={logoutUser}>Logout</p>
+          <button className="btnValid logButton" onClick={handleLogout}>
+            Logout
+          </button>
         ) : (
           <NavLink to="/login" activeClassName="active">
             Login

src/components/Menu/menu.scss

@@ -10,6 +10,9 @@
   border-top: unset;
   border-right: unset;
   background-color: $grey-dark;
+  position: relative;
+  z-index: 1501;
+
   .logo-container {
     display: flex;
   }
@@ -35,7 +38,8 @@
   .administration {
     margin-top: auto;
   }
-}
-.mobileMenu {
-  margin-left: -$menu-width;
+  .logButton {
+    width: 100px;
+    min-width: 0;
+  }
 }

src/components/Modal/modal.scss

@@ -8,7 +8,7 @@
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: 999;
+  z-index: 9999;
 
   .modal-container {
     align-items: center;

src/components/Navbar/navbar.scss

@@ -10,6 +10,7 @@
   align-items: center;
   justify-content: center;
   padding: 0 1rem;
+  z-index: 1500;
   .menu-list {
     display: flex;
     align-items: center;

src/hooks/useAuth.ts

-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
 import axios from 'axios'
 import { User } from '../models/user.model'
+import { UserContext } from './userContext'
 
 const _apiUrl: string = 'https://localhost:1443/'
 
@@ -13,7 +14,7 @@ export interface Auth {
 }
 export const useAuth = (): Auth => {
   const [error, setError] = useState(null)
-
+  const { setisLogged } = useContext(UserContext)
   //login user
   const loginUser = async (): Promise<void> => {
     try {

src/styles/config/_layout.scss

 $menu-width: 8rem;
 $navbar-height: 3.5rem;
+$navigator-height: 8rem;