From 0bc25ed054373c16f82e474efab5b246a036ffab Mon Sep 17 00:00:00 2001 From: Truong Le Vinh Phuc Date: Mon, 28 Jul 2025 11:03:31 +0700 Subject: [PATCH 1/2] Upgrade Angular dependencies and add Material/CDK Updated all Angular dependencies to ^19.2.6 and switched to caret versions for easier future upgrades. Added @angular/material and @angular/cdk to dependencies for UI component support. --- package-lock.json | 154 ++++++++++++++++++++++++++++------------------ package.json | 22 ++++--- 2 files changed, 105 insertions(+), 71 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5de27c45..65166a50 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,15 +8,17 @@ "name": "angularexampleapp", "version": "19.0.0", "dependencies": { - "@angular/animations": "19.2.5", - "@angular/common": "19.2.5", - "@angular/compiler": "19.2.5", - "@angular/core": "19.2.5", - "@angular/forms": "19.2.5", - "@angular/localize": "19.2.5", - "@angular/platform-browser": "19.2.5", - "@angular/platform-browser-dynamic": "19.2.5", - "@angular/router": "19.2.5", + "@angular/animations": "^19.2.6", + "@angular/cdk": "^19.2.9", + "@angular/common": "^19.2.6", + "@angular/compiler": "^19.2.6", + "@angular/core": "^19.2.6", + "@angular/forms": "^19.2.6", + "@angular/localize": "^19.2.6", + "@angular/material": "^19.2.9", + "@angular/platform-browser": "^19.2.6", + "@angular/platform-browser-dynamic": "^19.2.6", + "@angular/router": "^19.2.6", "ngx-progressbar": "14.0.0", "rxjs": "7.8.2", "tslib": "2.8.1" @@ -29,7 +31,7 @@ "@angular-eslint/schematics": "19.3.0", "@angular-eslint/template-parser": "19.3.0", "@angular/cli": "19.2.6", - "@angular/compiler-cli": "19.2.5", + "@angular/compiler-cli": "^19.2.6", "@commitlint/cli": "19.8.0", "@commitlint/config-conventional": "19.8.0", "@eslint/js": "9.23.0", @@ -642,9 +644,9 @@ } }, "node_modules/@angular/animations": { - "version": "19.2.5", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-19.2.5.tgz", - "integrity": "sha512-m4RtY3z1JuHFCh6OrOHxo25oKEigBDdR/XmdCfXIwfTiObZzNA7VQhysgdrb9IISO99kXbjZUYKDtLzgWT8Klg==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-19.2.14.tgz", + "integrity": "sha512-xhl8fLto5HHJdVj8Nb6EoBEiTAcXuWDYn1q5uHcGxyVH3kiwENWy/2OQXgCr2CuWo2e6hNUGzSLf/cjbsMNqEA==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -653,8 +655,8 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/common": "19.2.5", - "@angular/core": "19.2.5" + "@angular/common": "19.2.14", + "@angular/core": "19.2.14" } }, "node_modules/@angular/build": { @@ -845,6 +847,21 @@ "tslib": "^2.1.0" } }, + "node_modules/@angular/cdk": { + "version": "19.2.19", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.2.19.tgz", + "integrity": "sha512-PCpJagurPBqciqcq4Z8+3OtKLb7rSl4w/qBJoIMua8CgnrjvA1i+SWawhdtfI1zlY8FSwhzLwXV0CmWWfFzQPg==", + "license": "MIT", + "dependencies": { + "parse5": "^7.1.2", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^19.0.0 || ^20.0.0", + "@angular/core": "^19.0.0 || ^20.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, "node_modules/@angular/cli": { "version": "19.2.6", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.2.6.tgz", @@ -934,9 +951,9 @@ } }, "node_modules/@angular/common": { - "version": "19.2.5", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-19.2.5.tgz", - "integrity": "sha512-vFCBdas4C5PxP6ts/4TlRddWD3DUmI3aaO0QZdZvqyLHy428t84ruYdsJXKaeD8ie2U4/9F3a1tsklclRG/BBA==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-19.2.14.tgz", + "integrity": "sha512-NcNklcuyqaTjOVGf7aru8APX9mjsnZ01gFZrn47BxHozhaR0EMRrotYQTdi8YdVjPkeYFYanVntSLfhyobq/jg==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -945,14 +962,14 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/core": "19.2.5", + "@angular/core": "19.2.14", "rxjs": "^6.5.3 || ^7.4.0" } }, "node_modules/@angular/compiler": { - "version": "19.2.5", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-19.2.5.tgz", - "integrity": "sha512-34J+HubQjwkbZ0AUtU5sa4Zouws9XtP/fKaysMQecoYJTZ3jewzLSRu3aAEZX1Y4gIrcVVKKIxM6oWoXKwYMOA==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-19.2.14.tgz", + "integrity": "sha512-ZqJDYOdhgKpVGNq3+n/Gbxma8DVYElDsoRe0tvNtjkWBVdaOxdZZUqmJ3kdCBsqD/aqTRvRBu0KGo9s2fCChkA==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -962,9 +979,9 @@ } }, "node_modules/@angular/compiler-cli": { - "version": "19.2.5", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-19.2.5.tgz", - "integrity": "sha512-b2cG41r6lilApXLlvja1Ra2D00dM3BxmQhoElKC1tOnpD6S3/krlH1DOnBB2I55RBn9iv4zdmPz1l8zPUSh7DQ==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-19.2.14.tgz", + "integrity": "sha512-e9/h86ETjoIK2yTLE9aUeMCKujdg/du2pq7run/aINjop4RtnNOw+ZlSTUa6R65lP5CVwDup1kPytpAoifw8cA==", "dev": true, "license": "MIT", "dependencies": { @@ -986,14 +1003,14 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/compiler": "19.2.5", + "@angular/compiler": "19.2.14", "typescript": ">=5.5 <5.9" } }, "node_modules/@angular/core": { - "version": "19.2.5", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-19.2.5.tgz", - "integrity": "sha512-NNEz1sEZz1mBpgf6Tz3aJ9b8KjqpTiMYhHfCYA9h9Ipe4D8gUmOsvPHPK2M755OX7p7PmUmzp1XCUHYrZMVHRw==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-19.2.14.tgz", + "integrity": "sha512-EVErpW9tGqJ/wNcAN3G/ErH8pHCJ8mM1E6bsJ8UJIpDTZkpqqYjBMtZS9YWH5n3KwUd1tAkAB2w8FK125AjDUQ==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -1007,9 +1024,9 @@ } }, "node_modules/@angular/forms": { - "version": "19.2.5", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-19.2.5.tgz", - "integrity": "sha512-2Zvy3qK1kOxiAX9fdSaeG48q7oyO/4RlMYlg1w+ra9qX1SrgwF3OQ2P2Vs+ojg1AxN3z9xFp4aYaaID/G2LZAw==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-19.2.14.tgz", + "integrity": "sha512-hWtDOj2B0AuRTf+nkMJeodnFpDpmEK9OIhIv1YxcRe73ooaxrIdjgugkElO8I9Tj0E4/7m117ezhWDUkbqm1zA==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -1018,16 +1035,16 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/common": "19.2.5", - "@angular/core": "19.2.5", - "@angular/platform-browser": "19.2.5", + "@angular/common": "19.2.14", + "@angular/core": "19.2.14", + "@angular/platform-browser": "19.2.14", "rxjs": "^6.5.3 || ^7.4.0" } }, "node_modules/@angular/localize": { - "version": "19.2.5", - "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-19.2.5.tgz", - "integrity": "sha512-oAc19bubk6Z/2Vv6OkV0MsjdgC8cUaUwBmwdc6blFVe1NCX1KjdaqDyC2EQAO3nWfcdV4uvOOuu8myxB64bamw==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-19.2.14.tgz", + "integrity": "sha512-T2qPVE5N4qe1rQnx9tkxqUzXV+gUgAwSpVG+vHHRJe//jxCIVfk5zyPd2Z9nFzwGarHP61hvnEzbdbZHtCmbcQ==", "license": "MIT", "dependencies": { "@babel/core": "7.26.9", @@ -1044,14 +1061,31 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/compiler": "19.2.5", - "@angular/compiler-cli": "19.2.5" + "@angular/compiler": "19.2.14", + "@angular/compiler-cli": "19.2.14" + } + }, + "node_modules/@angular/material": { + "version": "19.2.19", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.2.19.tgz", + "integrity": "sha512-auIE6JUzTIA3LyYklh9J/T7u64crmphxUBgAa0zcOMDog6SYfwbNe9YeLQqua5ek4OUAOdK/BHHfVl5W5iaUoQ==", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/cdk": "19.2.19", + "@angular/common": "^19.0.0 || ^20.0.0", + "@angular/core": "^19.0.0 || ^20.0.0", + "@angular/forms": "^19.0.0 || ^20.0.0", + "@angular/platform-browser": "^19.0.0 || ^20.0.0", + "rxjs": "^6.5.3 || ^7.4.0" } }, "node_modules/@angular/platform-browser": { - "version": "19.2.5", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.5.tgz", - "integrity": "sha512-Lshy++X16cvl6OPvfzMySpsqEaCPKEJmDjz7q7oSt96oxlh6LvOeOUVLjsNyrNaIt9NadpWoqjlu/I9RTPJkpw==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.2.14.tgz", + "integrity": "sha512-hzkT5nmA64oVBQl6PRjdL4dIFT1n7lfM9rm5cAoS+6LUUKRgiE2d421Kpn/Hz3jaCJfo+calMIdtSMIfUJBmww==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -1060,9 +1094,9 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/animations": "19.2.5", - "@angular/common": "19.2.5", - "@angular/core": "19.2.5" + "@angular/animations": "19.2.14", + "@angular/common": "19.2.14", + "@angular/core": "19.2.14" }, "peerDependenciesMeta": { "@angular/animations": { @@ -1071,9 +1105,9 @@ } }, "node_modules/@angular/platform-browser-dynamic": { - "version": "19.2.5", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-19.2.5.tgz", - "integrity": "sha512-15in8u4552EcdWNTXY2h0MKuJbk3AuXwWr0zVTum4CfB/Ss2tNTrDEdWhgAbhnUI0e9jZQee/fhBbA1rleMYrA==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-19.2.14.tgz", + "integrity": "sha512-Hfz0z1KDQmIdnFXVFCwCPykuIsHPkr1uW2aY396eARwZ6PK8i0Aadcm1ZOnpd3MR1bMyDrJo30VRS5kx89QWvA==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -1082,16 +1116,16 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/common": "19.2.5", - "@angular/compiler": "19.2.5", - "@angular/core": "19.2.5", - "@angular/platform-browser": "19.2.5" + "@angular/common": "19.2.14", + "@angular/compiler": "19.2.14", + "@angular/core": "19.2.14", + "@angular/platform-browser": "19.2.14" } }, "node_modules/@angular/router": { - "version": "19.2.5", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-19.2.5.tgz", - "integrity": "sha512-9pSfmdNXLjaOKj0kd4UxBC7sFdCFOnRGbftp397G3KWqsLsGSKmNFzqhXNeA5QHkaVxnpmpm8HzXU+zYV5JwSg==", + "version": "19.2.14", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-19.2.14.tgz", + "integrity": "sha512-cBTWY9Jx7YhbmDYDb7Hqz4Q7UNIMlKTkdKToJd2pbhIXyoS+kHVQrySmyca+jgvYMjWnIjsAEa3dpje12D4mFw==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -1100,9 +1134,9 @@ "node": "^18.19.1 || ^20.11.1 || >=22.0.0" }, "peerDependencies": { - "@angular/common": "19.2.5", - "@angular/core": "19.2.5", - "@angular/platform-browser": "19.2.5", + "@angular/common": "19.2.14", + "@angular/core": "19.2.14", + "@angular/platform-browser": "19.2.14", "rxjs": "^6.5.3 || ^7.4.0" } }, @@ -9216,7 +9250,6 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=0.12" @@ -14580,7 +14613,6 @@ "version": "7.2.1", "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz", "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==", - "dev": true, "license": "MIT", "dependencies": { "entities": "^4.5.0" diff --git a/package.json b/package.json index 7a7bb711..936b78f6 100755 --- a/package.json +++ b/package.json @@ -17,15 +17,17 @@ "bundle-report": "ng build --configuration=production-sourcemaps && source-map-explorer dist/angularexampleapp/browser/**/*.js" }, "dependencies": { - "@angular/animations": "19.2.5", - "@angular/common": "19.2.5", - "@angular/compiler": "19.2.5", - "@angular/core": "19.2.5", - "@angular/forms": "19.2.5", - "@angular/localize": "19.2.5", - "@angular/platform-browser": "19.2.5", - "@angular/platform-browser-dynamic": "19.2.5", - "@angular/router": "19.2.5", + "@angular/animations": "^19.2.6", + "@angular/cdk": "^19.2.9", + "@angular/common": "^19.2.6", + "@angular/compiler": "^19.2.6", + "@angular/core": "^19.2.6", + "@angular/forms": "^19.2.6", + "@angular/localize": "^19.2.6", + "@angular/material": "^19.2.9", + "@angular/platform-browser": "^19.2.6", + "@angular/platform-browser-dynamic": "^19.2.6", + "@angular/router": "^19.2.6", "ngx-progressbar": "14.0.0", "rxjs": "7.8.2", "tslib": "2.8.1" @@ -38,7 +40,7 @@ "@angular-eslint/schematics": "19.3.0", "@angular-eslint/template-parser": "19.3.0", "@angular/cli": "19.2.6", - "@angular/compiler-cli": "19.2.5", + "@angular/compiler-cli": "^19.2.6", "@commitlint/cli": "19.8.0", "@commitlint/config-conventional": "19.8.0", "@eslint/js": "9.23.0", From a94a91c6f65149074aaa20d1c445f791d05c2c22 Mon Sep 17 00:00:00 2001 From: Truong Le Vinh Phuc Date: Mon, 28 Jul 2025 12:06:46 +0700 Subject: [PATCH 2/2] Add persistent Material sidebar navigation Introduces a persistent sidebar using Angular Material components for navigation, including icons and improved styling. Updates app component HTML, SCSS, and TypeScript to support the new layout and navigation items. Adds Material theme and icon font to project styles and index.html for consistent UI. Header navigation remains for user/account actions. --- angular.json | 2 + src/app/app.component.html | 42 ++++- src/app/app.component.scss | 152 ++++++++++++++- src/app/app.component.ts | 21 +++ .../components/header/header.component.html | 177 ++++++------------ src/index.html | 4 +- 6 files changed, 268 insertions(+), 130 deletions(-) diff --git a/angular.json b/angular.json index 72e57f25..65620093 100755 --- a/angular.json +++ b/angular.json @@ -34,6 +34,7 @@ } ], "styles": [ + "@angular/material/prebuilt-themes/azure-blue.css", "normalize.css/normalize.css", "@shoelace-style/shoelace/dist/themes/light.css", "src/styles/global.scss" @@ -123,6 +124,7 @@ } ], "styles": [ + "@angular/material/prebuilt-themes/azure-blue.css", "normalize.css/normalize.css", "@shoelace-style/shoelace/dist/themes/light.css", "src/styles/global.scss" diff --git a/src/app/app.component.html b/src/app/app.component.html index 129149d6..ab963e1d 100755 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -3,11 +3,37 @@ -
- -
- - -
- -
+ + + + + +
+

Angular Example App

+
+ + + @for (item of navigationItems; track item.route) { + + + {{ item.icon }} + {{ item.label }} + + + } + + + + + +
+ +
+ + +
+ +
+ + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index f48e07c9..e66788ec 100755 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,14 +1,107 @@ @use 'base/media-queries' as mq; -$page-max-width: 2560px; - :host { display: flex; - flex-direction: row; - align-items: flex-start; min-height: 100vh; margin-inline: auto; + .app__sidenav-container { + width: 100%; + height: 100vh; + + .app__sidenav { + width: 280px; + border-right: 1px solid #e0e0e0; + background: #ffffff; + box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1); + + .app__sidenav-header { + padding: 24px 16px; + border-bottom: 1px solid #e0e0e0; + background: linear-gradient(135deg, #1976d2, #1565c0); + color: white; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + + h2 { + margin: 0; + font-size: 24px; + font-weight: 600; + letter-spacing: 0.5px; + text-align: center; + } + } + + mat-nav-list { + padding: 16px 0; + + mat-list-item { + margin: 0 8px 4px; + border-radius: 8px; + transition: all 0.2s ease; + + &:hover { + background: #f5f7fa; + transform: translateX(4px); + } + + .app__nav-link { + display: flex; + align-items: center; + width: 100%; + padding: 16px; + text-decoration: none; + color: #2c3e50; + border-radius: 8px; + transition: all 0.3s ease; + font-weight: 500; + + mat-icon { + margin-right: 16px; + color: #64748b; + font-size: 20px; + width: 20px; + height: 20px; + transition: all 0.3s ease; + } + + span { + font-size: 16px; + font-weight: 500; + letter-spacing: 0.25px; + } + + &:hover { + color: #1976d2; + background: #e3f2fd; + + mat-icon { + color: #1976d2; + transform: scale(1.1); + } + } + + &.active { + color: white; + background: linear-gradient(135deg, #1976d2, #1565c0); + box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3); + + mat-icon { + color: white; + } + } + } + } + } + } + + .app__main-content { + flex: 1; + display: flex; + flex-direction: column; + background: #f8fafc; + } + } + .app__main-container { display: flex; flex-direction: column; @@ -17,14 +110,16 @@ $page-max-width: 2560px; .app__page-container { display: grid; + flex: 1; + padding: 16px; } } .app__content-skip-button { position: absolute; top: var(--spacing-r-md); - left: var(--spacing-r-md); - z-index: var(--z-index-skip-button); + left: calc(280px + var(--spacing-r-md)); + z-index: 1000; padding: var(--spacing-r-md); font-size: var(--font-size-xs); color: var(--page-background); @@ -39,3 +134,48 @@ $page-max-width: 2560px; } } } + +@include mq.for-phone-only { + :host { + .app__sidenav-container { + .app__sidenav { + width: 240px; + + .app__sidenav-header { + padding: 16px 12px; + + h2 { + font-size: 18px; + } + } + + mat-nav-list { + padding: 8px 0; + + mat-list-item { + margin: 0 4px 4px; + + .app__nav-link { + padding: 12px; + + mat-icon { + margin-right: 12px; + font-size: 18px; + width: 18px; + height: 18px; + } + + span { + font-size: 14px; + } + } + } + } + } + + .app__content-skip-button { + left: calc(240px + var(--spacing-r-md)); + } + } + } +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c9543318..65680a36 100755 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -11,6 +11,11 @@ import { ProgressBarComponent } from '~core/components/progress-bar/progress-bar import { CookiePopupComponent } from '~core/components/cookie-popup/cookie-popup.component'; import { toSignal } from '@angular/core/rxjs-interop'; import { ToastStackComponent } from '~core/components/toast-stack/toast-stack.component'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { MatListModule } from '@angular/material/list'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { RouterLink, RouterLinkActive } from '@angular/router'; @Component({ selector: 'app-root', @@ -19,11 +24,17 @@ import { ToastStackComponent } from '~core/components/toast-stack/toast-stack.co changeDetection: ChangeDetectionStrategy.OnPush, imports: [ RouterOutlet, + RouterLink, + RouterLinkActive, HeaderComponent, FooterComponent, ProgressBarComponent, CookiePopupComponent, ToastStackComponent, + MatSidenavModule, + MatListModule, + MatIconModule, + MatButtonModule, ], }) export class AppComponent { @@ -40,6 +51,16 @@ export class AppComponent { { initialValue: this.router.url }, ); + // Sidenav navigation items with correct routes + readonly navigationItems = [ + { label: 'Home', icon: 'home', route: '/', exact: true }, + { label: 'Explore Pokemon', icon: 'explore', route: '/pokemon', exact: false }, + { label: 'My Collection', icon: 'favorite', route: '/my-pokemon', exact: true }, + { label: 'Sign In', icon: 'login', route: '/auth/log-in', exact: true }, + { label: 'Register', icon: 'person_add', route: '/auth/register', exact: true }, + { label: 'Profile', icon: 'account_circle', route: '/auth/my-account', exact: true }, + ]; + constructor() { this.titleService.setTitle(translations.title); diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html index 8d450245..930d7d42 100755 --- a/src/app/core/components/header/header.component.html +++ b/src/app/core/components/header/header.component.html @@ -9,145 +9,92 @@
@if (!menuOpen()) { - + }
- angular logo + angular logo
- + {{ translations.home }}
@if (!isUserLoggedIn()) { -
- - {{ translations.logIn }} - -
+
+ + {{ translations.logIn }} + +
- -
- - {{ translations.register }} - -
+ +
+ + {{ translations.register }} + +
-
- - github logo - -
+
+ + github logo + +
-
- -
+
+ +
-
- -
+
+ +
} @else { - -
- - {{ translations.myPokemon }} - -
+ +
+ + {{ translations.myPokemon }} + +
- -
- -
+ +
+ +
- -
- - - avatar image - -
-
- - {{ translations.myAccount }} - -
-
- - Log out - -
+ +
+ + + avatar image + +
+
+ + {{ translations.myAccount }} +
- -
+
+ + Log out + +
+
+ +
}
diff --git a/src/index.html b/src/index.html index 776f3a71..a637a849 100755 --- a/src/index.html +++ b/src/index.html @@ -126,7 +126,9 @@ - + + +