NavBar avancement

Site Web/src/App.js

@@ -1,5 +1,4 @@
 //import logo from './logo.svg';
-import './styles/App.scss';
 import React from 'react';
 import 'tachyons';
 import Connexion from './pages/Connexion';
@@ -7,12 +6,14 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Home from './pages/Home';
 import Tendances from './pages/Tendances';
 import Decouvrir from './pages/Decouvrir';
+import Inscription from './pages/Inscription';
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Connexion/>} />
+        <Route path="/inscription" element={<Inscription/>} />
         <Route path="/home" element={<Home/>} />
         <Route path="/tendances" element={<Tendances/>} />
         <Route path="/decouvrir" element={<Decouvrir/>} />

Site Web/src/assets/img/param.svg

@@ -0,0 +1,3 @@
+<svg id="Flat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <path d="M128,20A108,108,0,1,0,236,128,108.12186,108.12186,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09562,84.09562,0,0,1,128,212Zm16-84a16,16,0,1,1-16-16A16.01833,16.01833,0,0,1,144,128Zm48,0a16,16,0,1,1-16-16A16.01833,16.01833,0,0,1,192,128Zm-96,0a16,16,0,1,1-16-16A16.01833,16.01833,0,0,1,96,128Z"/>
+</svg>

Site Web/src/components/Navbar.js

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

Site Web/src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './styles/index.scss';
 import App from './App';
+import "./styles/index.scss";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

Site Web/src/pages/Connexion.js

@@ -1,8 +1,8 @@
 import 'tachyons';
 import React from 'react';
-import '../styles/All.scss';
+import '../styles/components/_connexion.scss';
-import '../styles/Connexion.scss';
+import { NavLink } from "react-router-dom";
-import App from '../App';
+//import App from '../App';
 
 function Connexion(){
     return(
@@ -18,8 +18,10 @@ function Connexion(){
                         <input type="password" required="required"/>
                         <span>mot de passe</span>
                     </div>
-                    <input type="submit" value="connection"/>
+                    <input type="submit" value="connexion"/>
-    		        <button id="buttonTEL">Inscription</button>
+                    <NavLink to="/Inscription" className='b'>
+    		            <button id="buttonTEL">Inscription</button>
+                    </NavLink>
                 </form>
                 <p className=''>Mot de passe oublié?</p>
             </div>

Site Web/src/pages/Inscription.js

@@ -3,7 +3,6 @@ import React from 'react';
 const Inscription = () => {
     return (
         <div>
-            
         </div>
     );
 };

Site Web/src/styles/All.scss

@@ -1,5 +0,0 @@
-*{
-    top: 0;
-    margin: 0;
-    box-sizing: border-box;
-}

Site Web/src/styles/Connexion.scss

@@ -1,66 +0,0 @@
-.formulaire {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-}
-
-.cadre {
-    position: relative;
-    padding: 50px 50px;
-    background: #fff;
-    border-radius: 10px;
-    background:purple;
-}
-
-.cadre h1 {
-    letter-spacing: 5px;
-    margin-bottom: 60px;
-    font-weight: bold;
-    padding-left: 10px;
-  }
-  
-  .cadre .inputbox {
-    position: relative;
-    width: 300px;
-    height: 50px;
-    margin-bottom: 25px;
-  }
-  .cadre .inputbox input {
-    width: 100%;
-    border: 2px solid #000;
-    outline: none;
-    background: none;
-    padding: 10px;
-    border-radius: 10px;
-    font-size: 1.2em;
-  }
-  
-  .cadre .inputbox span {
-    position: absolute;
-    top: 14px;
-    left: 20px;
-    font-size: 1em;
-    transition: 0.3s;
-    font-family: sans-serif;
-  }
-  
-  .span_date{
-    margin-left: 7px;
-    font-size: 1em;
-    font-family: sans-serif;
-  }
-  
-  .cadre .inputbox input:focus ~ span,
-  .cadre .inputbox input:valid ~ span {
-    transform: translateX(-13px) translateY(-35px);
-    font-size: 1em;
-  }
-  
-input[type="submit"], #buttonTEL{
-    border: none;
-    border-radius: 5px;
-    border: 2px solid #000;
-    margin: 10px 0px 0px 25%;
-    padding: 20px 10% 20px 10%;
-}

Site Web/src/styles/_settings.scss

@@ -0,0 +1,11 @@
+
+
+$color-1: #61dafb;
+$color-2: salmon;
+$color-3: #282c34;
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }

Site Web/src/styles/components/_connexion.scss

@@ -0,0 +1,64 @@
+.formulaire {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.cadre {
+    position: relative;
+    padding: 50px 50px;
+    background: #fff;
+    border-radius: 10px;
+    background:purple;
+    h1 {
+      letter-spacing: 5px;
+      margin-bottom: 60px;
+      font-weight: bold;
+      padding-left: 10px;
+    }
+    .inputbox {
+      position: relative;
+      width: 300px;
+      height: 50px;
+      margin-bottom: 25px;
+      input {
+        width: 100%;
+        border: 2px solid #000;
+        outline: none;
+        background: none;
+        padding: 10px;
+        border-radius: 10px;
+        font-size: 1.2em;
+      }
+      span {
+        position: absolute;
+        top: 14px;
+        left: 20px;
+        font-size: 1em;
+        transition: 0.3s;
+        font-family: sans-serif;
+      }
+    }
+}
+  
+  
+.span_date{
+  margin-left: 7px;
+  font-size: 1em;
+  font-family: sans-serif;
+}
+  
+.cadre .inputbox input:focus ~ span,
+.cadre .inputbox input:valid ~ span {
+  transform: translateX(-13px) translateY(-35px);
+  font-size: 1em;
+}
+  
+input[type="submit"], #buttonTEL{
+    border: none;
+    border-radius: 5px;
+    border: 2px solid #000;
+    margin: 10px 0px 0px 25%;
+    padding: 20px 10% 20px 10%;
+}

Site Web/src/styles/components/_navbar.scss

@@ -0,0 +1,63 @@
+.b:visited {
+    color: #b9b9b9;
+}
+
+
+.b:hover, 
+.b:focus {
+    color: lightgrey; 
+}
+
+nav{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    background-color: #AAAAAA;
+    top: 0;
+    left: 0;
+    right: 0;
+    text-transform: uppercase;
+    color: #b9b9b9;
+    position: fixed;
+}
+
+.logo{
+    margin-right: 250px;
+}
+
+.b:active {
+    color: #b9b9b9;
+}
+
+
+.home{
+    width: 2rem;
+}
+
+ul{
+    display: flex;
+    flex-direction: row;
+    align-self: center;
+    list-style-type: none;
+    li{
+        padding-left: 1rem;
+    }
+}
+
+.b{
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.nav-neko-bleue{
+    color: blue;
+}
+
+.n{
+    height: 0.95rem;
+    width: 0.95rem;
+    padding-top: 0.15rem;
+    overflow: hidden;
+    fill: #b9b9b9;
+}

Site Web/src/styles/index.scss

@@ -1,13 +1,2 @@
-body {
+@import "./settings";
-  margin: 0;
+@import "./components/navbar";
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}