diff --git a/src/App.tsx b/src/App.tsx
index 919aef497e28e0a971fd6f8e308ffb8e44109365..9829f71b2b8962b19f020aec1a8062f3288969d3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,7 +25,7 @@ function App() {
return () => {
subscribed = false
}
- }, [isLogged])
+ }, [isLogged, setisLogged])
return (
<BrowserRouter>
diff --git a/src/components/DateSelector/dateSelector.scss b/src/components/DateSelector/dateSelector.scss
index 4b4539cf43d57ed64c592b763e010ff722b2ac9c..8154e6a42a9ec43b4573ea03fc3b32134af75eb1 100644
--- a/src/components/DateSelector/dateSelector.scss
+++ b/src/components/DateSelector/dateSelector.scss
@@ -1,5 +1,6 @@
@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;
diff --git a/src/components/Editing/Editing.tsx b/src/components/Editing/Editing.tsx
index 9fef0a70d11f73897c4ea7bbce838226e8b6b815..2755666eba0fec9969bff11a1f9279e954d1b949 100644
--- a/src/components/Editing/Editing.tsx
+++ b/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}
diff --git a/src/components/Editing/editing.scss b/src/components/Editing/editing.scss
index ecbd98691d21a350bdca44cf667fb7688f40d3f1..4987046c8f117b64586dbd488290b8f3c617aa1a 100644
--- a/src/components/Editing/editing.scss
+++ b/src/components/Editing/editing.scss
@@ -1,17 +1,22 @@
@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;
diff --git a/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss
index e6bd32e65aeba592769f4894394611e70f15d541..4b8d70d0c0c416688a4ea43c470811589c52aa1e 100644
--- a/src/components/Layout/layout.module.scss
+++ b/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;
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 8f7fdf8d5aa25024ec1c9056c069f0800e6eb23b..26383e996ee0a9f44ed3e2c49306f40fe52f3b31 100644
--- a/src/components/Menu/Menu.tsx
+++ b/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
diff --git a/src/components/Menu/menu.scss b/src/components/Menu/menu.scss
index 09c90162de9d1199922ae0b1cba795e2103d1344..e4d3cfc0cc85aef8d4c36f8c6225b1819666caf5 100644
--- a/src/components/Menu/menu.scss
+++ b/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;
+ }
}
diff --git a/src/components/Modal/modal.scss b/src/components/Modal/modal.scss
index 11500dab80af1eefa9e79d1894358366153ddcba..bf0f5ffd96635f667ccf8f78ddfbbcbba256cb4e 100644
--- a/src/components/Modal/modal.scss
+++ b/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;
diff --git a/src/components/Navbar/navbar.scss b/src/components/Navbar/navbar.scss
index 93bb05bafcedea44ea117519c06562a2b78edb36..b39e88051c760d2db58c9944698ee1b1c42d5057 100644
--- a/src/components/Navbar/navbar.scss
+++ b/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;
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index f9d7e53207f9d73c4183b6dfa6f26c9cb420cad6..3b9ba2367dde99c7deca2701580b20ad97690e61 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -1,6 +1,7 @@
-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 {
diff --git a/src/styles/config/_layout.scss b/src/styles/config/_layout.scss
index 1a3df8c1bcdb958279ae7e3a449e1989642de78f..b63b2df1123e6d2c473c0284e949c482dcbfe1be 100644
--- a/src/styles/config/_layout.scss
+++ b/src/styles/config/_layout.scss
@@ -1,2 +1,3 @@
$menu-width: 8rem;
$navbar-height: 3.5rem;
+$navigator-height: 8rem;