pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update layout ui

Browse source
This commit is contained in:
Kenta420-Poom 2023-09-21 12:37:21 +07:00
parent 17ad8486a6
commit 51ba80406a
9 changed files with 143 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

69
client/src/app/core/layout/layout.component.html
View file

@ -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"
src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
alt="user photo"
class="sm:h-10 md:h-14 rounded-full cursor-pointer"
src="{{ user?.image }}"
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="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>Earnings</a
>
</li>
<li>
<a
href="#"
routerLink="#"
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" />
<span class="ml-3 capitalize">{{ item.name }}</span>
<img
*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>