update layout ui

client/src/app/app-routing.module.ts

@@ -65,12 +65,16 @@ const routes: Routes = [
           ),
         canActivate: [authGuard],
       },
+      {
+        path: 'log',
+        loadComponent: () =>
+          import('./features/changelog/changelog.component').then(
+            (m) => m.ChangelogComponent
+          ),
+      },
     ],
   },
-  {
+
-    path: 'log',
-    loadComponent: () => import('./features/changelog/changelog.component').then((m) => m.ChangelogComponent),
-  },
   {
     path: '**',
     pathMatch: 'full',

client/src/app/core/layout/header.component.html

@@ -12,12 +12,12 @@
       <div class="flex flex-row items-center" *ngIf="user; else login_button">
         <div class="flex flex-col items-center px-5">
           <span
-            class="flex items-center text-primary text-xl font-normal font-[kanit]"
+            class="flex items-center text-primary text-xl font-normal font-kanit"
           >
             {{ date | date : "dd MMM yyyy" }}
           </span>
           <span
-            class="flex items-center text-primary text-xl font-normal font-[kanit]"
+            class="flex items-center text-primary text-xl font-normal font-kanit"
           >
             {{ user.username }}
           </span>

client/src/app/core/layout/layout.component.html

@@ -24,48 +24,70 @@
             ></path>
           </svg>
         </button>
-        <a routerLink="/dashboard" class="flex ml-2 md:mr-24">
+        <a routerLink="/dashboard" class="flex ml-2 md:mr-24 max-sm:hidden">
           <img
             src="assets/logo.svg"
-            class="h-10 md:h-20 mr-3"
+            class="h-10 md:h-20 px-4"
             alt="Tao Bin Logo"
           />
         </a>
       </div>
       <div class="flex items-center">
         <div class="flex items-center ml-3">
-          <div>
+          <div class="flex flex-row">
+            <div class="flex justify-center sm:flex-row md:flex-col sm:px-5">
+              <span
+                class="flex items-center text-primary max-sm:text-xs sm:text-sm md:text-xl font-normal font-kanit"
+              >
+                {{ date | date : "dd MMM yyyy" }}
+              </span>
+              <p
+                class="md:hidden px-1 flex items-center text-primary font-normal font-kanit"
+              >
+                |
+              </p>
+              <span
+                class="flex items-center text-primary max-sm:text-xs sm:text-xs md:text-xl font-normal font-kanit"
+              >
+                {{ user?.username }}
+              </span>
+            </div>
             <button
               type="button"
-              class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+              class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 max-sm:hidden"
               aria-expanded="false"
               data-dropdown-toggle="dropdown-user"
             >
               <span class="sr-only">Open user menu</span>
               <img
-                class="w-8 h-8 rounded-full"
+                class="sm:h-10 md:h-14 rounded-full cursor-pointer"
-                src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+                src="{{ user?.image }}"
-                alt="user photo"
+                loading="lazy"
+                alt="profile picture"
               />
             </button>
           </div>
+
           <div
             class="z-50 hidden my-4 text-base list-none bg-primary divide-y divide-gray-100 rounded shadow"
             id="dropdown-user"
           >
             <div class="px-4 py-3" role="none">
-              <p class="text-sm text-gray-900" role="none">Neil Sims</p>
+              <p class="text-sm text-gray-900" role="none">
+                {{ user?.username }}
+              </p>
               <p class="text-sm font-medium text-gray-900 truncate" role="none">
-                neil.sims@flowbite.com
+                {{ user?.email }}
               </p>
             </div>
             <ul class="py-1" role="none">
               <li>
                 <a
-                  href="#"
+                  routerLink="/dashboard"
                   class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                   role="menuitem"
-                  >Dashboard</a
+                >
+                  Dashboard</a
                 >
               </li>
               <li>
@@ -78,17 +100,10 @@
               </li>
               <li>
                 <a
-                  href="#"
+                  routerLink="#"
-                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                  role="menuitem"
-                  >Earnings</a
-                >
-              </li>
-              <li>
-                <a
-                  href="#"
                   class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                   role="menuitem"
+                  (click)="logout()"
                   >Sign out</a
                 >
               </li>
@@ -107,13 +122,19 @@
 >
   <div class="h-full px-3 pb-4 overflow-y-auto bg-primary">
     <ul class="space-y-2 font-medium">
-      <li *ngFor="let item of menuItems">
+      <li *ngFor="let menu of menuItems">
         <a
-          [routerLink]="item.url"
+          routerLink="{{ menu.link }}"
+          routerLinkActive="bg-gray-100 text-gray-900"
           class="flex items-center p-2 text-gray-900 rounded-lg hover:bg-gray-100 group"
         >
-          <img src="{{ item.icon_url }}" class="w-6 h-6" alt="icon" />
+          <img
-          <span class="ml-3 capitalize">{{ item.name }}</span>
+            *ngIf="menu.icon_url"
+            class="w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900"
+            src="{{ menu.icon_url }}"
+            alt="dashboard icon"
+          />
+          <span class="ml-3 capitalize font-kanit">{{ menu.name }}</span>
         </a>
       </li>
     </ul>

client/src/app/core/layout/layout.component.ts

@@ -3,12 +3,17 @@ import { HeaderComponent } from './header.component';
 import { FooterComponent } from './footer.component';
 import { RouterModule } from '@angular/router';
 import { SidebarComponent } from './sidebar.component';
-import { NgFor } from '@angular/common';
+import { DatePipe, NgFor, NgIf } from '@angular/common';
+import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
+import { UserService } from '../services/user.service';
+import { User } from '../models/user.model';
+import { initFlowbite } from 'flowbite';
+import { Subject, takeUntil } from 'rxjs';
 
 interface MenuItem {
   name: string;
-  icon_url: string;
+  icon_url?: string;
-  url: string;
+  link: string;
 }
 
 @Component({
@@ -21,19 +26,42 @@ interface MenuItem {
     SidebarComponent,
     RouterModule,
     NgFor,
+    NgIf,
+    GoogleButtonComponent,
+    DatePipe,
   ],
 })
-export class LayoutComponent {
+export class LayoutComponent implements OnInit {
   menuItems: MenuItem[] = [
     {
       name: 'Dashboard',
-      icon_url: 'assets/images/icons/dashboard.svg',
+      icon_url: 'assets/icons/dashboard.svg',
-      url: '/dashboard',
+      link: '/dashboard',
     },
     {
-      name: 'log',
+      name: 'Log',
-      icon_url: 'assets/images/icons/log.svg',
+      icon_url: 'assets/icons/logs.svg',
-      url: '/log',
+      link: '/log',
     },
   ];
+  date = new Date();
+  isMenuOpen: boolean = false;
+  user: User | null = null;
+  exit$ = new Subject<void>();
+
+  constructor(private _userService: UserService) {}
+
+  ngOnInit(): void {
+    initFlowbite();
+
+    this._userService.currentUser
+      .pipe(takeUntil(this.exit$))
+      .subscribe((user) => (this.user = user));
+  }
+
+  logout() {
+    this.exit$.next();
+    this.exit$.complete();
+    this._userService.logout();
+  }
 }

client/src/app/features/dashboard/dashboard.component.html

@@ -1,3 +1,45 @@
-<main class="flex justify-center">
+<main class="relative overflow-hidden shadow-md sm:rounded-lg">
-  <p>Dashboard</p>
+  <table class="w-full text-sm text-left text-gray-500">
+    <caption
+      class="p-5 text-lg font-semibold text-left text-gray-900 bg-primary"
+    >
+      Our products
+      <p class="mt-1 text-sm font-normal text-gray-200">
+        Browse a list of Flowbite products designed to help you work and play,
+        stay organized, get answers, keep in touch, grow your business, and
+        more.
+      </p>
+    </caption>
+    <thead class="text-xs text-gray-700 uppercase bg-secondary">
+      <tr>
+        <th scope="col" class="px-6 py-3">Product name</th>
+        <th scope="col" class="px-6 py-3">Color</th>
+        <th scope="col" class="px-6 py-3">Category</th>
+        <th scope="col" class="px-6 py-3 sm:hidden md:block">Price</th>
+        <th scope="col" class="px-6 py-3">
+          <span class="sr-only">Edit</span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+        <th
+          scope="row"
+          class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+        >
+          Apple MacBook Pro 17"
+        </th>
+        <td class="px-6 py-4">Silver</td>
+        <td class="px-6 py-4">Laptop</td>
+        <td class="px-6 py-4 sm:hidden md:block">$2999</td>
+        <td class="px-6 py-4 text-right">
+          <a
+            href="#"
+            class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+            >Edit</a
+          >
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </main>

client/src/assets/icons/dashboard.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M520-600v-240h320v240H520ZM120-440v-400h320v400H120Zm400 320v-400h320v400H520Zm-400 0v-240h320v240H120Zm80-400h160v-240H200v240Zm400 320h160v-240H600v240Zm0-480h160v-80H600v80ZM200-200h160v-80H200v80Zm160-320Zm240-160Zm0 240ZM360-280Z"/></svg>

client/src/assets/icons/logout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z"/></svg>

client/src/assets/icons/logs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h168q13-36 43.5-58t68.5-22q38 0 68.5 22t43.5 58h168q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm80-80h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm200-190q13 0 21.5-8.5T510-820q0-13-8.5-21.5T480-850q-13 0-21.5 8.5T450-820q0 13 8.5 21.5T480-790ZM200-200v-560 560Z"/></svg>

client/tailwind.config.js

@@ -8,9 +8,13 @@ module.exports = {
     extend: {
       "backgroundColor": {
         "primary": "#EAE6E1",
+        "secondary": "#F5F5F5",
       },
       "textColor": {
         "primary": "#513C2F",
+      },
+      "fontFamily": {
+        "kanit": ["Kanit"],
       }
     },
   },