navBar affichage pseudo
continuous-integration/drone/push Build encountered an error
Details
continuous-integration/drone/push Build encountered an error
Details
Noan07
2 years ago
parent
4cfad400ba
commit
cff1932854
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,8 @@
|
||||
import { configureStore } from "@reduxjs/toolkit";
|
||||
import picturesReducer from "../feature/pictures.slice";
|
||||
|
||||
export default configureStore({
|
||||
reducer: {
|
||||
pictures: picturesReducer,
|
||||
},
|
||||
});
|
||||
|
After Width: | Height: | Size: 448 B |
|
After Width: | Height: | Size: 336 B |
|
After Width: | Height: | Size: 226 B |
|
After Width: | Height: | Size: 384 B |
|
After Width: | Height: | Size: 243 KiB |
|
After Width: | Height: | Size: 55 KiB |
@ -0,0 +1,93 @@
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { UidContext } from "./AppContext";
|
||||
import React, { useContext } from 'react';
|
||||
import { useSelector } from "react-redux";
|
||||
import PP from "../assets/img/unknown.png";
|
||||
import cookie from 'js-cookie';
|
||||
import axios from "axios";
|
||||
|
||||
const Navbar = () => {
|
||||
const uid = useContext( UidContext );
|
||||
const userData = useSelector((state) => state.pictures.pictures);
|
||||
|
||||
const removeCookie = (key) => {
|
||||
if(window !== "undefined"){
|
||||
cookie.remove(key, {expires: 1} );
|
||||
}
|
||||
}
|
||||
|
||||
const logout = async () => {
|
||||
await axios({
|
||||
method: 'get',
|
||||
url: `${process.env.REACT_APP_API_URL}api/user/logout`,
|
||||
withCredentials: true,
|
||||
})
|
||||
.then(() => removeCookie('jwt'))
|
||||
.catch((err) => console.log(err));
|
||||
window.location = "/Profil";
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{uid ? (
|
||||
<header>
|
||||
<nav>
|
||||
<ul className="partie-gauche-nav ul-navBar">
|
||||
<li className="logo">
|
||||
<img src=''alt='Logo'/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="ul-navBar">
|
||||
<li>
|
||||
<NavLink to="/Discover" className={((nav) => (nav.isActive ? "nav-active b nav-active-tendances-decouvrir" : "b"))}>
|
||||
<span>Découvrir</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<NavLink to="/Home" className={((nav) => (nav.isActive ? "nav-active b nav-active-menu" : "b"))}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="svg-home">
|
||||
<path stroke="black" fill='black' d="M256 73.825a182.18 182.18 0 0 0-182.18 182.18c0 100.617 81.567 182.17 182.18 182.17a182.175 182.175 0 1 0 0-364.35zm76.636 161.579h-12.037v91.503a18.908 18.908 0 0 1-18.896 18.904h-26.78v-53.56a6.299 6.299 0 0 0-6.297-6.294H232.4a6.3 6.3 0 0 0-6.302 6.294v53.56h-26.771a18.91 18.91 0 0 1-18.906-18.904v-91.503h-11.97a7.879 7.879 0 0 1-5.071-13.905l82.055-69.039a7.89 7.89 0 0 1 10.142 0l81.479 68.547a7.88 7.88 0 0 1-4.421 14.396z" data-name="Home"/>
|
||||
</svg>
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<NavLink to="/Trends" className={((nav) => (nav.isActive ? "nav-active b nav-active-tendances-decouvrir" : "b"))}>
|
||||
<span>Tendances</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="partie-droit-nav ul-navBar">
|
||||
<li >
|
||||
<NavLink to="/Trends" className='b'>
|
||||
{ (userData==null) ? (<span></span>):(<span>{userData.pseudo}</span>)}
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<NavLink to="/Trends" className='b'>
|
||||
<img src={PP} alt='Logo' className="img-profile"/>
|
||||
</NavLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div onClick={logout} className='b'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="svg-param" viewBox="0 0 256 256">
|
||||
<path d="M128,24A104,104,0,1,0,232,128,104.11791,104.11791,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.09957,88.09957,0,0,1,128,216Zm12-88a12,12,0,1,1-12-12A12.01375,12.01375,0,0,1,140,128Zm48,0a12,12,0,1,1-12-12A12.01375,12.01375,0,0,1,188,128Zm-96,0a12,12,0,1,1-12-12A12.01375,12.01375,0,0,1,92,128Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
) : (<div> </div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
@ -0,0 +1,18 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
export const picturesSlice = createSlice({
|
||||
name: "pictures",
|
||||
initialState: {
|
||||
pictures: null,
|
||||
},
|
||||
reducers: {
|
||||
setPictureData: (state,action) => {
|
||||
state.pictures = action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const {setPictureData} = picturesSlice.actions;
|
||||
export default picturesSlice.reducer;
|
||||
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import Navbar from '../components/Navbar';
|
||||
|
||||
const Discover = () => {
|
||||
return (
|
||||
<Navbar />
|
||||
);
|
||||
};
|
||||
|
||||
export default Discover;
|
||||
@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import Navbar from '../components/Navbar';
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<Navbar />
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import Navbar from '../components/Navbar';
|
||||
|
||||
const Trends = () => {
|
||||
return (
|
||||
<Navbar />
|
||||
);
|
||||
};
|
||||
|
||||
export default Trends;
|
||||
@ -1,2 +1,5 @@
|
||||
@import './_settings.scss';
|
||||
@import './pages/profil';
|
||||
@import './pages/navbar';
|
||||
@import './pages/profil';
|
||||
@import './pages/profil';
|
||||
@import './pages/poste';
|
||||
@ -0,0 +1,105 @@
|
||||
|
||||
|
||||
header {
|
||||
height: 50px;
|
||||
background-color: $color-2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-transform: uppercase;
|
||||
color: #b9b9b9;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
nav{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.logo{
|
||||
//margin-right: 250px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.partie-droit-nav,.partie-gauche-nav{
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
|
||||
.svg-home{
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
.svg-param{
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ul-navBar{
|
||||
display: flex;
|
||||
li{
|
||||
list-style-type: none;
|
||||
padding-left: 1rem;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.nav-active-menu {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.nav-active-tendances-decouvrir {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-active {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
height: 4px;
|
||||
background: violet;
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
-webkit-animation: anim 0.3s ease forwards;
|
||||
animation: anim 0.6s ease forwards;
|
||||
|
||||
@-webkit-keyframes anim {
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes anim {
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img-profile{
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.b{
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.n{
|
||||
height: 0.95rem;
|
||||
width: 0.95rem;
|
||||
padding-top: 0.15rem;
|
||||
overflow: hidden;
|
||||
fill: #b9b9b9;
|
||||
}
|
||||
@ -0,0 +1,49 @@
|
||||
|
||||
#cadrePoste{
|
||||
background: white;
|
||||
border: 2px solid;
|
||||
border-radius: 5px;
|
||||
border-color: grey;
|
||||
width: 40%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#hautPoste{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
#cadreInfoPoste{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
#PProfile{
|
||||
margin: 10px 15px 0px 20px;
|
||||
width: 40px;
|
||||
height:40px;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #555;
|
||||
}
|
||||
|
||||
#NomProfile{
|
||||
font-family: arial;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/*bas poste*/
|
||||
#basPoste{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#like, #commentaire{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
}
|
||||
Loading…
Reference in new issue