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

27
client/package-lock.json generated
View file

@ -16,6 +16,7 @@
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/router": "^16.2.0",
"flowbite": "^1.8.1",
"jwt-decode": "^3.1.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
@ -3121,6 +3122,15 @@
"node": ">=14"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@schematics/angular": {
"version": "16.2.2",
"resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-16.2.2.tgz",
@ -6209,6 +6219,15 @@
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
"dev": true
},
"node_modules/flowbite": {
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.8.1.tgz",
"integrity": "sha512-lXTcO8a6dRTPFpINyOLcATCN/pK1Of/jY4PryklPllAiqH64tSDUsOdQpar3TO59ZXWwugm2e92oaqwH6X90Xg==",
"dependencies": {
"@popperjs/core": "^2.9.3",
"mini-svg-data-uri": "^1.4.3"
}
},
"node_modules/follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@ -8313,6 +8332,14 @@
"webpack": "^5.0.0"
}
},
"node_modules/mini-svg-data-uri": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
"bin": {
"mini-svg-data-uri": "cli.js"
}
},
"node_modules/minimalistic-assert": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",

1
client/package.json
View file

@ -18,6 +18,7 @@
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/router": "^16.2.0",
"flowbite": "^1.8.1",
"jwt-decode": "^3.1.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",

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;

32
client/src/assets/logo.svg Normal file
View file

@ -0,0 +1,32 @@
<svg width="120" height="143" viewBox="0 0 120 143" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.30555 122.027V99.6045H0V96.1101H12.3328V99.6045H8.02729V122.027H4.30555Z" fill="#513C2F"/>
<path d="M25.335 112.963L23.5106 103.572H23.4376L21.6132 112.963H25.335ZM16.1401 122.027L21.9416 96.1101H25.0431L30.8446 122.027H27.1229L26.0283 116.458H20.9565L19.8618 122.027H16.1401Z" fill="#513C2F"/>
<path d="M38.2964 102.225C38.2964 101.182 38.4788 100.26 38.8437 99.4589C39.2086 98.6581 39.6951 97.9908 40.3032 97.4569C40.887 96.9473 41.5438 96.5591 42.2735 96.2921C43.0276 96.0252 43.7817 95.8917 44.5358 95.8917C45.2899 95.8917 46.0318 96.0252 46.7615 96.2921C47.5156 96.5591 48.1967 96.9473 48.8048 97.4569C49.3886 97.9908 49.863 98.6581 50.2279 99.4589C50.5927 100.26 50.7752 101.182 50.7752 102.225V115.912C50.7752 117.004 50.5927 117.938 50.2279 118.715C49.863 119.491 49.3886 120.134 48.8048 120.644C48.1967 121.178 47.5156 121.578 46.7615 121.845C46.0318 122.112 45.2899 122.245 44.5358 122.245C43.7817 122.245 43.0276 122.112 42.2735 121.845C41.5438 121.578 40.887 121.178 40.3032 120.644C39.6951 120.134 39.2086 119.491 38.8437 118.715C38.4788 117.938 38.2964 117.004 38.2964 115.912V102.225ZM42.0181 115.912C42.0181 116.81 42.2614 117.477 42.7479 117.914C43.2587 118.326 43.8547 118.533 44.5358 118.533C45.2169 118.533 45.8007 118.326 46.2872 117.914C46.798 117.477 47.0534 116.81 47.0534 115.912V102.225C47.0534 101.327 46.798 100.672 46.2872 100.26C45.8007 99.8229 45.2169 99.6045 44.5358 99.6045C43.8547 99.6045 43.2587 99.8229 42.7479 100.26C42.2614 100.672 42.0181 101.327 42.0181 102.225V115.912Z" fill="#513C2F"/>
<path d="M72.4973 122.027V96.1101H77.934C79.1259 96.1101 80.1354 96.2921 80.9624 96.6561C81.8138 97.0201 82.5071 97.5055 83.0423 98.1121C83.5774 98.7188 83.9544 99.4225 84.1734 100.223C84.4166 101 84.5382 101.813 84.5382 102.662V103.609C84.5382 104.312 84.4774 104.907 84.3558 105.392C84.2585 105.877 84.1004 106.302 83.8815 106.666C83.4679 107.346 82.8355 107.928 81.9841 108.413C82.8598 108.826 83.5044 109.433 83.918 110.233C84.3315 111.034 84.5382 112.126 84.5382 113.509V114.965C84.5382 117.246 83.9788 118.994 82.8598 120.207C81.7652 121.42 80.0016 122.027 77.5691 122.027H72.4973ZM76.219 110.015V118.314H77.8245C78.5786 118.314 79.1624 118.205 79.5759 117.987C80.0138 117.768 80.3422 117.465 80.5611 117.077C80.78 116.688 80.9138 116.227 80.9624 115.693C81.0111 115.159 81.0354 114.577 81.0354 113.946C81.0354 113.291 80.9989 112.721 80.926 112.235C80.853 111.75 80.707 111.337 80.4881 110.998C80.2449 110.658 79.9165 110.415 79.5029 110.27C79.0894 110.1 78.5421 110.015 77.861 110.015H76.219ZM76.219 99.6045V106.739H77.8975C79.1381 106.739 79.9651 106.436 80.3786 105.829C80.8165 105.198 81.0354 104.288 81.0354 103.099C81.0354 101.934 80.7922 101.061 80.3057 100.478C79.8435 99.8957 78.9921 99.6045 77.7515 99.6045H76.219Z" fill="#513C2F"/>
<path d="M93.9806 122.027V96.1101H97.7023V122.027H93.9806Z" fill="#513C2F"/>
<path d="M107.01 122.027V96.1101H110.586L116.205 111.726H116.278V96.1101H120V122.027H116.497L110.805 106.448H110.732V122.027H107.01Z" fill="#513C2F"/>
<path d="M25.1975 142.873H29.298C30.0638 142.873 30.7027 142.622 31.2147 142.118C31.7311 141.637 31.9938 140.983 32.0027 140.155C32.0027 139.656 31.8758 139.195 31.6221 138.77C31.3505 138.359 30.9498 138.085 30.42 137.949V137.923C30.7004 137.792 30.9364 137.645 31.1279 137.483C31.3193 137.33 31.4662 137.168 31.5686 136.997C31.769 136.639 31.8647 136.262 31.8558 135.868C31.8558 135.098 31.6132 134.479 31.1279 134.01C30.647 133.546 29.928 133.31 28.9708 133.301H25.1975V142.873ZM28.944 138.626C29.4917 138.634 29.8924 138.777 30.1461 139.052C30.3999 139.332 30.5268 139.67 30.5268 140.063C30.5268 140.449 30.3999 140.781 30.1461 141.061C29.8924 141.346 29.4917 141.492 28.944 141.501H26.6734V138.626H28.944ZM28.8038 134.595C29.3425 134.603 29.7388 134.732 29.9925 134.982C30.2508 135.249 30.3799 135.575 30.3799 135.96C30.3799 136.345 30.2508 136.665 29.9925 136.919C29.7388 137.194 29.3425 137.332 28.8038 137.332H26.6734V134.595H28.8038Z" fill="#513C2F"/>
<path d="M34.6396 142.873H40.8571V141.501H36.1155V138.691H40.1626V137.404H36.1155V134.673H40.8571V133.301H34.6396V142.873Z" fill="#513C2F"/>
<path d="M45.5442 142.873H46.6929L49.9118 133.301H48.3491L46.1319 140.589H46.1052L43.8947 133.301H42.332L45.5442 142.873Z" fill="#513C2F"/>
<path d="M52.0545 142.873H58.272V141.501H53.5304V138.691H57.5775V137.404H53.5304V134.673H58.272V133.301H52.0545V142.873Z" fill="#513C2F"/>
<path d="M62.2379 134.595H64.5486C65.0205 134.595 65.3812 134.693 65.6305 134.89C65.9466 135.113 66.1091 135.474 66.118 135.973C66.118 136.389 65.9822 136.739 65.7106 137.024C65.4346 137.33 65.0205 137.488 64.4685 137.496H62.2379V134.595ZM60.762 142.873H62.2379V138.783H64.1212L66.1314 142.873H67.8878L65.6305 138.626C66.8682 138.157 67.496 137.273 67.5138 135.973C67.4871 135.089 67.1643 134.409 66.5454 133.931C66.0334 133.511 65.3723 133.301 64.562 133.301H60.762V142.873Z" fill="#513C2F"/>
<path d="M71.9271 139.446L73.3362 135.264H73.3629L74.772 139.446H71.9271ZM75.9474 142.873H77.5035L73.964 133.301H72.7285L69.189 142.873H70.7517L71.4997 140.733H75.1928L75.9474 142.873Z" fill="#513C2F"/>
<path d="M82.5512 138.974H84.5347V139.473C84.5258 140.072 84.3343 140.556 83.9603 140.923C83.5864 141.309 83.1122 141.501 82.5379 141.501C82.1906 141.501 81.8923 141.429 81.643 141.285C81.3892 141.162 81.1844 141.002 81.0286 140.805C80.8371 140.6 80.7102 140.33 80.6479 139.998C80.5767 139.665 80.541 139.028 80.541 138.087C80.541 137.146 80.5767 136.505 80.6479 136.164C80.7102 135.84 80.8371 135.575 81.0286 135.369C81.1844 135.172 81.3892 135.008 81.643 134.877C81.8923 134.75 82.1906 134.682 82.5379 134.673C83.0098 134.682 83.4105 134.816 83.74 135.074C84.0561 135.345 84.2742 135.673 84.3944 136.059H85.9572C85.8013 135.258 85.4273 134.586 84.8352 134.043C84.2431 133.505 83.4773 133.231 82.5379 133.222C81.7721 133.231 81.1332 133.411 80.6212 133.761C80.1003 134.107 79.7218 134.5 79.4859 134.943C79.3389 135.174 79.2299 135.479 79.1586 135.855C79.0918 136.231 79.0585 136.976 79.0585 138.087C79.0585 139.181 79.0918 139.921 79.1586 140.306C79.1942 140.512 79.2388 140.683 79.2922 140.818C79.3501 140.95 79.4146 141.088 79.4859 141.232C79.7218 141.674 80.1003 142.064 80.6212 142.401C81.1332 142.751 81.7721 142.935 82.5379 142.952C83.5307 142.935 84.3544 142.604 85.0088 141.961C85.6589 141.313 85.9928 140.51 86.0106 139.551V137.601H82.5512V138.974Z" fill="#513C2F"/>
<path d="M88.8345 142.873H95.052V141.501H90.3104V138.691H94.3574V137.404H90.3104V134.673H95.052V133.301H88.8345V142.873Z" fill="#513C2F"/>
<path d="M104.532 139.709C105.497 139.709 106.279 138.927 106.279 137.963C106.279 136.998 105.497 136.216 104.532 136.216C103.568 136.216 102.786 136.998 102.786 137.963C102.786 138.927 103.568 139.709 104.532 139.709Z" fill="#513C2F"/>
<path d="M15.7173 139.709C16.6818 139.709 17.4637 138.927 17.4637 137.963C17.4637 136.998 16.6818 136.216 15.7173 136.216C14.7528 136.216 13.9709 136.998 13.9709 137.963C13.9709 138.927 14.7528 139.709 15.7173 139.709Z" fill="#513C2F"/>
<path d="M16.1155 30.6692V52.0877L16.154 51.3757L47.2378 40.2835L37.5601 28.6635H17.6833L16.1155 30.6692Z" fill="#513C2F"/>
<path d="M50.1994 39.2266L60.3848 35.5919L70.2272 39.1664L80.0505 27.36L69.8331 14.288H50.5465L40.329 27.36L50.1994 39.2266Z" fill="#513C2F"/>
<path d="M73.1775 40.2378L103.884 51.3894V30.1831L102.696 28.6635H82.8195L73.1775 40.2378Z" fill="#513C2F"/>
<path d="M103.47 25.0667C101.547 13.5656 93.1078 4.27715 82.0853 1.14078C82.1758 1.16652 82.2661 1.19273 82.3562 1.21931L72.881 13.3416L82.8195 26.0566H102.696L103.47 25.0667Z" fill="#513C2F"/>
<path d="M78.8463 0.411703C77.2271 0.14089 75.564 0 73.868 0H46.1316C44.3884 0 42.6801 0.148882 41.0182 0.434658C41.071 0.42555 41.1239 0.416628 41.1768 0.407799L50.1322 11.8651H69.8939L78.8463 0.411703Z" fill="#513C2F"/>
<path d="M37.8593 1.15658C31.1984 3.06565 25.4851 7.22236 21.5885 12.7555L21.4348 12.9425L21.4582 12.9421C19.0658 16.3944 17.3767 20.3728 16.5987 24.6691L17.6833 26.0566H37.5601L47.441 13.4153L37.8593 1.15658Z" fill="#513C2F"/>
<path d="M72.2502 68.607C74.342 66.562 75.9216 63.9975 76.7792 61.1227H67.5016L59.9998 55.5094L52.498 61.1227H43.2205C44.078 63.9975 45.6576 66.562 47.7494 68.607H72.2502Z" fill="#513C2F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M77.3268 58.6279C77.4436 57.813 77.5041 56.9801 77.5041 56.1331C77.5041 46.4882 69.6671 38.6695 59.9998 38.6695C50.3325 38.6695 42.4956 46.4882 42.4956 56.1331C42.4956 56.9801 42.556 57.813 42.6728 58.6279H51.2477L59.9998 52.3908L68.7519 58.6279H77.3268ZM68.7519 53.6383C70.133 53.6383 71.2525 52.5213 71.2525 51.1435C71.2525 49.7657 70.133 48.6487 68.7519 48.6487C67.3709 48.6487 66.2514 49.7657 66.2514 51.1435C66.2514 52.5213 67.3709 53.6383 68.7519 53.6383ZM53.7483 51.1435C53.7483 52.5213 52.6287 53.6383 51.2477 53.6383C49.8667 53.6383 48.7471 52.5213 48.7471 51.1435C48.7471 49.7657 49.8667 48.6487 51.2477 48.6487C52.6287 48.6487 53.7483 49.7657 53.7483 51.1435Z" fill="#513C2F"/>
<path d="M76.2853 81.0811L86.2877 71.1019H61.2501V81.0811H76.2853Z" fill="#513C2F"/>
<path d="M58.7495 71.1019H34.2613L44.2638 81.0811H58.7495V71.1019Z" fill="#513C2F"/>
<path d="M79.8217 81.0811H89.3348C92.9402 81.0811 96.3701 79.5283 98.7443 76.8213L103.76 71.1019H89.8241L79.8217 81.0811Z" fill="#513C2F"/>
<path d="M30.725 71.1019H16.2393L21.3692 76.8789C23.7422 79.5512 27.1492 81.0811 30.7278 81.0811H40.7274L30.725 71.1019Z" fill="#513C2F"/>
<path d="M31.2429 53.1522H8.73738C8.04687 53.1522 7.48715 53.7107 7.48715 54.3996C7.48715 55.0885 8.04687 55.647 8.73738 55.647H11.238V56.8944H8.73738C7.35635 56.8944 6.23682 57.7321 6.23682 58.7655C6.23682 59.7989 7.35635 60.6366 8.73738 60.6366H11.238V61.884H8.73738C7.35635 61.884 6.23682 62.7217 6.23682 63.7551C6.23682 64.7885 7.35635 65.6262 8.73738 65.6262H11.238V66.8736H8.73738C8.04687 66.8736 7.48715 67.4321 7.48715 68.121C7.48715 68.8099 8.04687 69.3684 8.73738 69.3684H31.2429V69.3448C31.3533 69.3531 31.4643 69.3593 31.576 69.3633C31.6729 69.3666 31.7702 69.3684 31.868 69.3684C36.3564 69.3684 39.995 65.7383 39.995 61.2603C39.995 56.7823 36.3564 53.1522 31.868 53.1522C31.8238 53.1522 31.7798 53.1525 31.7358 53.1532C31.6967 53.1538 31.6576 53.1548 31.6186 53.1559L31.5655 53.1577L31.5254 53.1593C31.4758 53.1613 31.4263 53.1638 31.377 53.1668C31.3322 53.1694 31.2875 53.1724 31.2429 53.1758V53.1522Z" fill="#513C2F"/>
<path d="M111.262 69.8545H88.7568V69.8308C88.5505 69.8465 88.342 69.8545 88.1316 69.8545C83.6432 69.8545 80.0046 66.2243 80.0046 61.7463C80.0046 57.2684 83.6432 53.6383 88.1316 53.6383C88.342 53.6383 88.5505 53.6462 88.7568 53.6619V53.6383H111.262C111.953 53.6383 112.512 54.1967 112.512 54.8856C112.512 55.5746 111.953 56.1331 111.262 56.1331H108.762V57.3804H111.262C112.643 57.3804 113.763 58.2181 113.763 59.2515C113.763 60.2849 112.643 61.1227 111.262 61.1227H108.762V62.3701H111.262C112.643 62.3701 113.763 63.2078 113.763 64.2411C113.763 65.2745 112.643 66.1122 111.262 66.1122H108.762V67.3597H111.262C111.953 67.3597 112.512 67.9182 112.512 68.607C112.512 69.296 111.953 69.8545 111.262 69.8545Z" fill="#513C2F"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

2
client/src/index.html
View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Client</title>
<title>Recipe Manager</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />

7
client/tailwind.config.js
View file

@ -1,6 +1,9 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,ts}"],
content: [
"./src/**/*.{html,ts}",
"./node_modules/flowbite/**/*.js" // add this line
],
theme: {
extend: {
"backgroundColor": {
@ -11,6 +14,6 @@ module.exports = {
}
},
},
plugins: [],
plugins: [require("flowbite/plugin")],
}