Changement page Admin

src/pages/Admin.js

@@ -6,9 +6,48 @@ const Admin = () => {
         <div className="page_admin">
             {/* Create a admin page */}
             <div className="nav_bar_verticale">
-                nav_bar
+                <img className="logo" srcSet="./LogoApp.svg"></img>
+                <div className="create_user">
+                    <button id="user" className="bouton" type="button" value="Créer un utilisateur" /*onClick="Create_user()"*/>Créer un nouvel utilisateur</button>
+                </div>
+                <div className="modify_user">
+                    <button id="user" className="bouton" type="button" value="Modifier un utilisateur" /*onClick="Modify_user()"*/>Modifier un utilisateur</button>
+                </div>
+                <div className="delete_user">
+                    <button id="user" className="bouton" type="button" value="Supprimer un utilisateur" /*onClick="Delete_user()"*/>Supprimer un utilisateur</button>
+                </div>
+            </div>
+            <div className="Formulaire">
+                <p className="Titre">Admin</p>
+                <form className="form">
+                    <table className="Formulaire_de_connexion">
+                        <tr>
+                            <p className="texte">Nom :</p>
+                            <input id="nom" className="texte_zone" type="text"/>
+                        </tr>
+                        <tr>
+                            <p className="texte">Prénom :</p>
+                            <input id="prénom" className="texte_zone" type="text"/>
+                        </tr>
+                        <tr>
+                            <p className="texte">Rôle dans l'entreprise :</p>
+                            <input id="rôle" className="texte_zone" type="text"/>
+                        </tr>
+                        <tr>
+                            <p className="texte">Identifiant :</p>
+                            <input id="identifiant" className="texte_zone" type="text"/>
+                        </tr>
+                        <tr>
+                            <p className="texte">Mot de passe (par défaut) :</p>
+                            <input id="password" className="texte_zone" type="text"/>
+                        </tr>
+                        <tr>
+                            <button className="bouton_val_ann" type="submit">Valider</button>
+                            <button className="bouton_val_ann" type="submit">Annuler</button>
+                        </tr>
+                    </table>
+                </form>
             </div>
-            <div className="create_user"></div>
         </div>
     );
 };

src/styles/components/_admin.scss

@@ -4,11 +4,145 @@
 
     .nav_bar_verticale {
         display: flex;
-        width: 150px;
+        flex-direction: column;
+        width: 200px;
         height: 753px;
-        background-color: pink;
+        border: 5px white inset;
+
+        .create_user{
+            padding: 30px;
+            align-self: center;
+        }
+
+        .modify_user{
+            padding: 30px;
+            align-self: center;
+        }
+
+        .delete_user{
+            padding: 30px;
+            align-self: center;
+        }
+
+        
+        .bouton{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            width: 180px;
+            height: 100px;
+            border-radius: 30px;
+            font-size: 13.5px;
+            font-weight: bold;
+            transition: 1s box-shadow;
+            cursor: pointer;
+            border: none;
+            box-shadow: 0 0 5px rgba(0,0,0,0.5);
+            background-color: white;
+        }
+
+
+        .bouton:hover{
+            box-shadow: 0, 5px, 35px, 0 rgba(0,0,0,1);
+            color: white;
+            background-color: black;
         }
 
+        .bouton:hover::before, .bouton:hover::after{
+            content: '';
+            display: block;
+            position: absolute;
+            z-index: -1;
+            width: 100%;
+            height: 100%;
+            background: black;
+            border-radius: 30px;
+            animation: 0.5s jiggle infinite;
+        }
 
+        .bouton:hover::after{
+            background: black;
+            animation: 1s jiggle infinite;
+        }
 
+        @keyframes jiggle {
+            0% {
+                transform: translate(-5px, -5px);
+            }
+            14% {
+                transform: translate(0px, -5px);
+            }
+            28% {
+                transform: translate(5px, -5px);
+            }
+            42% {
+                transform: translate(5px, 0px);
+            }
+            57% {
+                transform: translate(5px, 5px);
+            }
+            71% {
+                transform: translate(0, 5px);
+            }
+            85% {
+                transform: translate(-5px, 5px);
+            }
+            100% {
+                transform: translate(-5px, 0);
+            }
+        }
+    }
+
+    .Titre{
+        display: flex;
+        font-weight: bold;
+        font-size: 80px;
+        margin: 20px;
+    }
+
+    .Formulaire{
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .form{
+        align-self: center;
+        flex-direction: row;
+        font-size: 30px;
+    }
+
+    .texte{
+        align-self: center;
+        font-weight: bold;
+        padding: 10px;
+    }
+
+    .texte_zone{
+        width: 600px;
+        height: 50px;
+        font-size: 30px;
+    }
+    
+    .bouton_val_ann{
+        width: 150px;
+        height: 40px;
+        border-radius: 10px;
+        border: 0.5px solid;
+        color: $white;
+        border: 0;
+        background-color: black;
+        border: 1px solid rgba(255,255,255,0.1);
+        backdrop-filter: blur(30px);
+        color: rgb(255, 255, 255);
+        cursor: pointer;
+        font-size: 15px;
+        &:hover{
+            background-color: rgba(114, 114, 114, 0.371);   
+        }
+        &:active{
+            background-color:rgba(68, 68, 68, 0.972);   
+        }
+    }
 }