CP # Toolbar layout

src/app/app.component.css

@@ -5,18 +5,30 @@ p-toolbar img{
     height: 33px;
     padding-left: 50px;
 }
-p-toolbar button{
-    background: none;
-    border: none;
-    color: #3366ff;
-}
 
 
-.splitBtn{
-    background: none !important;
 
-}
 .ui-inputgroup{
     padding-top: 10px;
     padding-bottom: 10px
 }
+
+p-toolbar {
+    background-color: lightgrey;
+    opacity: 0.7;
+    z-index: 999;
+    position: absolute;
+    width: 100%;
+    border:none;
+}
+
+
+
+
+p-toolbar .ui-button {
+    background-color: transparent ;
+    opacity: 1;
+    color:#3366ff;
+    border: none;
+}
+

src/app/app.component.html

@@ -12,7 +12,8 @@
         
         <button pButton type="button" label="SIGN UP" icon="pi pi-pencil" iconPos="right" (click)="signUp()"></button>
         <button pButton type="button" label="LOG IN" icon="pi pi-sign-in" iconPos="right" (click)="logIn()"></button>
-        <p-splitButton [style]="{color:'black;'}" class="splitBtn" type="button" label="SIGN UP"></p-splitButton>
+        
+        <p-splitButton *ngIf="Connected" class="btnDeMerde"  type="button" label="Nom du gars"></p-splitButton>
         
     </div>
 

src/app/app.component.ts

@@ -12,20 +12,17 @@ export class AppComponent implements OnInit{
 
   items : MenuItem[];
 
+  public Connected : false;
+  display: boolean = false;
+
   constructor(){}
   ngOnInit(){
     this.items = [
       {label: 'Update', icon: 'pi pi-refresh'},
       {label: 'Delete', icon: 'pi pi-times'} 
-      
   ];
-  
-
-
   }
 
-  display: boolean = false;
-
 
   public logIn() 
   {