noan.randon
/
Favor
3
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix pb couleur / navbar

Browse Source
pull/1/head
Noan07 3 years ago
parent 9b2f6824a3
commit 27a1caf36f
5 changed files with 104 additions and 39735 deletions
Show Stats Download Patch File Download Diff File

39682
Site Web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
Site Web/src/App.js
Unescape View File

@ -7,6 +7,7 @@ import Home from './pages/Home';
import Tendances from './pages/Tendances';
import Decouvrir from './pages/Decouvrir';
import Inscription from './pages/Inscription';
import "./styles/index.scss"
function App() {
return (

BIN
Site Web/src/assets/img/unknown.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

71
Site Web/src/components/Navbar.js
Unescape View File

@ -1,47 +1,62 @@
import React from "react";
import { NavLink } from "react-router-dom";
import "../styles/components/_navbar.scss"
import PP from "../assets/img/unknown.png";
const Navbar = () => {
return (
<header>
<nav>
<ul>
<ul className="partie-gauche-nav">
<li className="logo">
<img src=''alt='Logo'/>
</li>
<NavLink to="/Decouvrir" className='b'>
<li>
</ul>
<ul>
<li className={(nav) => (nav.isActive ? "nav-active" : "")}>
<NavLink to="/Decouvrir" className='b'>
<span>Découvrir</span>
</li>
</NavLink>
<NavLink to="/Home" className='b'>
<li>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="home">
</NavLink>
</li>
<li >
<NavLink to="/Home" className={'b' + ((nav) => (nav.isActive ? "nav-active" : ""))}>
<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>
</li>
</NavLink>
<NavLink to="/Tendances" className='b'>
<li>
</NavLink>
</li>
<li className={(nav) => (nav.isActive ? "nav-active" : "")}>
<NavLink to="/Tendances" className='b'>
<span>Tendances</span>
</li>
</NavLink>
<NavLink to="/Tendances" className='b'>
<li>
</NavLink>
</li>
</ul>
<ul className="partie-droit-nav">
<li >
<NavLink to="/Tendances" className='b'>
<span>pseudo</span>
</li>
</NavLink>
<NavLink to="/Tendances" className='b'>
<li>
<span>test</span>
</li>
</NavLink>
<NavLink to="/Tendances" className='b'>
<li>
</li>
</NavLink>
</NavLink>
</li>
<li>
<NavLink to="/Tendances" className='b'>
<img src={PP} alt='Logo' className="img-profile"/>
</NavLink>
</li>
<li>
<NavLink to="/Tendances" 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>
</NavLink>
</li>
</ul>
</nav>
</header>
);
}

85
Site Web/src/styles/components/_navbar.scss
Unescape View File

@ -1,19 +1,8 @@
.b:visited {
color: #b9b9b9;
}
.b:hover,
.b:focus {
color: lightgrey;
}
nav{
display: flex;
align-items: center;
justify-content: center;
header {
height: 50px;
background-color: #AAAAAA;
background-color: $color-2;
top: 0;
left: 0;
right: 0;
@ -22,27 +11,77 @@ nav{
position: fixed;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
margin-right: 250px;
//margin-right: 250px;
}
.b:active {
color: #b9b9b9;
.partie-droit-nav,.partie-gauche-nav{
width: 20%;
}
.home{
width: 2rem;
.svg-home{
height: 45px;
width: 45px;
}
.svg-param{
height: 42px;
width: 42px;
}
ul{
display: flex;
flex-direction: row;
align-self: center;
list-style-type: none;
li{
list-style-type: none;
padding-left: 1rem;
align-self: center;
}
.nav-active {
position: relative;
&::after {
content: "";
height: 4px;
width: 0;
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{
@ -50,10 +89,6 @@ ul{
cursor: pointer;
}
.nav-neko-bleue{
color: blue;
}
.n{
height: 0.95rem;
width: 0.95rem;

Write Preview
Loading…
Cancel
Save