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

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

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

Write Preview
Loading…
Cancel
Save