add toolbar layout on the left when mobile on below image and text

API/FamilyTreeAPI/Program.cs

@@ -123,7 +123,16 @@ using (var scope = app.Services.CreateScope())
                     //if (!databaseCreator.Exists())
                     try
                     {
-                        databaseCreator.CreateTables();
+                        // Check if database exists
+                        if (!databaseCreator.Exists()) 
+                        {
+                            databaseCreator.Create();
+                        }
+                        
+                        if (!databaseCreator.HasTables())
+                        {
+                            databaseCreator.CreateTables();
+                        }
                     }
                     catch 
                     {

API/FamilyTreeAPI/appsettings.json

@@ -2,8 +2,8 @@
 
   "AppSettings": {
     "Secret": "Super Secret SIGN AND VERIFY JWT TOKENS, BEARER TOKEN USE WHEN CALLING THIS API.",
-    "SQLConnectionString_i": "host=localhost;port=5432;database=FamilyTreeDB;username=postgres;password=Positive~1;",
-    "SQLConnectionString": "host=192.168.1.240;port=5432;database=FamilyTreeDB;username=postgres;password=Positive~1;",
+    "SQLConnectionString_i": "host=localhost;port=5432;database=FamilyTreeDB_prod;username=postgres;password=Positive~1;",
+    "SQLConnectionString": "host=192.168.1.240;port=5432;database=FamilyTreeDB_prod;username=postgres;password=Positive~1;",
 
     "ImageFolder": "c:\\temp\\Family",
     "ImportFolder":  "c:\\temp"

UI/src/app/toolbar/toolbar.component.html

@@ -1,17 +1,15 @@
-@if (currentUserS() && isAuth)
+@if (currentUserS() && isAuth == true)
 {
 <div class="flex flex-column justify-between md:flex-row rounded" style="background-color:transparent">
     <div style="margin-top:5px;padding-right:35px; cursor: pointer;width:400px;">
         <img (click)="onHome()" src="images/application_image.png" alt="Banner" style="height:80px;width:100%" />
     </div>
+    
     <div class="flex justify-end items-end flex-row">
         <div class="flex-column">
             <label class=" flex justify-end items-end mr-1 mb-2 myname">{{loginUser}}</label>
             <div>
-                <span class="md:hidden flex justify-end"> <!--hidden on md screen show on small-->
-                    <button type="button" pButton icon="pi pi-align-justify" (click)="onemenu.toggle($event);"></button>
-                    <p-menu #onemenu [popup]="true" [model]="oneMenu"></p-menu>
-                </span>
+               
                 <span class="hidden md:inline-flex"> <!--hidden when small screen-->
                  <p-buttonGroup >
                     <button type="button" pButton icon="pi pi-slack" label="Home" (click)="onHome()"
@@ -38,4 +36,9 @@
         </div>
     </div>
 </div>
+<!--put in the left new row if in mobile not much room-->
+<span class="md:hidden flex justify-start"> <!--hidden on md screen show on small-->
+                    <button type="button" pButton icon="pi pi-align-justify" (click)="onemenu.toggle($event);"></button>
+                    <p-menu #onemenu [popup]="true" [model]="oneMenu"></p-menu>
+</span>
 }