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

update layout navbar and sidebar

Browse source
This commit is contained in:
Kenta420-Poom 2023-09-20 15:10:35 +07:00
parent 503186e733
commit 7aea7a8131
14 changed files with 397 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

11
client/src/app/app.component.ts
View file

@ -1,10 +1,17 @@
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { initFlowbite } from 'flowbite';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'Recipe Manager';
export class AppComponent implements OnInit {
constructor(private titleService: Title) {}
ngOnInit(): void {
this.titleService.setTitle('Recipe Manager | Tao Bin');
initFlowbite();
}
}

2
client/src/app/core/auth/auth.component.html
View file

@ -1,4 +1,4 @@
<main class="flex flex-col justify-around h-[100vh] bg-primary">
<main class="flex flex-col justify-around h-screen bg-primary">
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
<div class="sm:mx-auto sm:w-full sm:max-w-sm">
<img

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

@ -1,5 +1,129 @@
<app-layout-header></app-layout-header>
<nav class="fixed top-0 z-50 w-full bg-primary border-b border-gray-200">
<div class="px-3 py-3 lg:px-5 lg:pl-3">
<div class="flex items-center justify-between">
<div class="flex items-center justify-start">
<button
data-drawer-target="logo-sidebar"
data-drawer-toggle="logo-sidebar"
aria-controls="logo-sidebar"
type="button"
class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
>
<span class="sr-only">Open sidebar</span>
<svg
class="w-6 h-6"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
></path>
</svg>
</button>
<a routerLink="/dashboard" class="flex ml-2 md:mr-24">
<img
src="assets/logo.svg"
class="h-10 md:h-20 mr-3"
alt="Tao Bin Logo"
/>
</a>
</div>
<div class="flex items-center">
<div class="flex items-center ml-3">
<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"
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"
/>
</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 font-medium text-gray-900 truncate" role="none">
neil.sims@flowbite.com
</p>
</div>
<ul class="py-1" role="none">
<li>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>Dashboard</a
>
</li>
<li>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>Settings</a
>
</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="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>Sign out</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<router-outlet></router-outlet>
<aside
id="logo-sidebar"
class="fixed top-0 left-0 z-40 w-64 h-screen pt-28 transition-transform -translate-x-full bg-primary border-r border-gray-200 sm:translate-x-0"
aria-label="Sidebar"
>
<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">
<a
[routerLink]="item.url"
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>
</a>
</li>
</ul>
</div>
</aside>
<!-- <app-layout-footer></app-layout-footer> -->
<div class="px-4 pt-16 sm:ml-64">
<div class="p-4 border-2 border-gray-200 border-dashed rounded-lg mt-14">
<div class="grid grid-cols-1 gap-4 mb-4">
<router-outlet></router-outlet>
</div>
</div>
</div>

33
client/src/app/core/layout/layout.component.ts
View file

@ -1,12 +1,39 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
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';
interface MenuItem {
name: string;
icon_url: string;
url: string;
}
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
standalone: true,
imports: [HeaderComponent, FooterComponent, RouterModule],
imports: [
HeaderComponent,
FooterComponent,
SidebarComponent,
RouterModule,
NgFor,
],
})
export class LayoutComponent {}
export class LayoutComponent {
menuItems: MenuItem[] = [
{
name: 'Dashboard',
icon_url: 'assets/images/icons/dashboard.svg',
url: '/dashboard',
},
{
name: 'log',
icon_url: 'assets/images/icons/log.svg',
url: '/log',
},
];
}

152
client/src/app/core/layout/sidebar.component.html Normal file
View file

@ -0,0 +1,152 @@
<aside class="w-64" aria-label="Sidebar">
<div class="px-3 py-4 overflow-y-auto rounded bg-primary">
<ul class="space-y-2">
<li>
<a
href="#"
class="flex items-center p-2 text-base font-normal text-primary rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
</svg>
<span class="ml-3">Dashboard</span>
</a>
</li>
<li>
<a
href="#"
target="_blank"
class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Kanban</span>
<span
class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
>Pro</span
>
</a>
</li>
<li>
<a
href="#"
target="_blank"
class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"
></path>
<path
d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Inbox</span>
<span
class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
>3</span
>
</a>
</li>
<li>
<a
href="#"
class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
clip-rule="evenodd"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Users</span>
</a>
</li>
<li>
<a
href="#"
class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
clip-rule="evenodd"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Products</span>
</a>
</li>
<li>
<a
href="#"
class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
clip-rule="evenodd"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Sign In</span>
</a>
</li>
<li>
<a
href="#"
class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
>
<svg
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z"
clip-rule="evenodd"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Sign Up</span>
</a>
</li>
</ul>
</div>
</aside>

8
client/src/app/core/layout/sidebar.component.ts Normal file
View file

@ -0,0 +1,8 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-layout-sidebar',
templateUrl: './sidebar.component.html',
standalone: true,
})
export class SidebarComponent {}

0
client/src/app/features/dashboard/dashboard.component.css
View file

13
client/src/app/features/dashboard/dashboard.component.html
View file

@ -1,10 +1,3 @@
<p>dashboard works!</p>
<div *ngIf="userInfo">
<img [src]="userInfo.image" loading="lazy" />
<p>Hi {{ userInfo.username }}</p>
<p>Your email is {{ userInfo.email }}</p>
</div>
<button (click)="logout()" class="bg-blue-300 rounded-lg min-w-fit p-10">
Logout
</button>
<a href="/log">View Logs</a>
<main class="flex justify-center">
<p>Dashboard</p>
</main>

1
client/src/app/features/dashboard/dashboard.component.ts
View file

@ -9,7 +9,6 @@ import { NgIf } from '@angular/common';
standalone: true,
imports: [NgIf],
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css'],
})
export class DashboardComponent implements OnInit {
userInfo: User | null = null;