27 |
28 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | LF-ONE
57 |
58 |
59 |
60 |
28
61 |
62 |
64 |
67 |
68 |
69 |
70 |
71 |
72 | LF-MID
73 |
74 |
75 |
76 |
40
77 |
78 |
80 |
83 |
84 |
85 |
86 |
87 |
88 | LF-PRO
89 |
90 |
91 |
92 |
28
93 |
94 |
96 |
98 |
101 |
102 |
103 |
Alunos
104 |
105 |
108 |
109 |
115 |
116 |
117 |
--------------------------------------------------------------------------------
/src/app/pages/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-home',
5 | templateUrl: './home.component.html',
6 | styleUrl: './home.component.css'
7 | })
8 | export class HomeComponent {
9 |
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/pages/profile/profile.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
Name: John Doe
16 |
17 |
18 |
19 | Address:
20 |
21 |
22 |
23 |
24 |
25 | Phone Number: +1 123-456-7890
26 | Address: {{ address }}
27 | Unique ID: 123456789
28 | Status: Enrolled
29 | Courses Enroll: 5
30 |
31 |
32 |
35 |
36 |
46 |
--------------------------------------------------------------------------------
/src/app/pages/profile/profile.component.scss:
--------------------------------------------------------------------------------
1 | .profile-card {
2 | max-width: 400px;
3 | margin: 0 auto;
4 | padding: 20px;
5 | }
6 |
7 | .profile-header {
8 | text-align: center;
9 | }
10 |
11 | .profile-title {
12 | font-size: 24px;
13 | margin-bottom: 10px;
14 | }
15 |
16 | .profile-content {
17 | display: flex;
18 | align-items: center;
19 | }
20 |
21 | .profile-image {
22 | flex: 1;
23 | text-align: center;
24 |
25 | img {
26 | width: 150px;
27 | height: 150px;
28 | border-radius: 50%;
29 | object-fit: cover;
30 | }
31 | }
32 |
33 | .profile-details {
34 | flex: 3;
35 | padding-left: 20px;
36 |
37 | h2 {
38 | font-size: 20px;
39 | margin-bottom: 10px;
40 | }
41 |
42 | p {
43 | font-size: 16px;
44 | margin: 5px 0;
45 | }
46 | }
47 |
48 | .mat-card-actions {
49 | display: flex;
50 | justify-content: center;
51 | margin-top: 20px;
52 | }
53 |
54 | .custom-card {
55 | border: 1px solid #ccc; /* Add a border */
56 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a slight shadow */
57 | /* You can adjust the border color, width, and shadow properties as needed */
58 | }
59 |
--------------------------------------------------------------------------------
/src/app/pages/profile/profile.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ProfileComponent } from './profile.component';
4 |
5 | describe('ProfileComponent', () => {
6 | let component: ProfileComponent;
7 | let fixture: ComponentFixture
;
8 |
9 | beforeEach(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ProfileComponent]
12 | });
13 | fixture = TestBed.createComponent(ProfileComponent);
14 | component = fixture.componentInstance;
15 | fixture.detectChanges();
16 | });
17 |
18 | it('should create', () => {
19 | expect(component).toBeTruthy();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/src/app/pages/profile/profile.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-profile',
5 | templateUrl: './profile.component.html',
6 | styleUrls: ['./profile.component.scss']
7 | })
8 | export class ProfileComponent {
9 | address = '123 Main St, City, Country';
10 | isEditMode = false;
11 | editAddress() {
12 | // Implement your address editing logic here
13 | // You can open a dialog or navigate to an edit page
14 | // For now, let's just change the address to a placeholder value
15 | this.address = 'New Address, City, Country';
16 | }
17 |
18 |
19 | toggleEditMode() {
20 | this.isEditMode = !this.isEditMode;
21 | }
22 |
23 | saveChanges() {
24 | // Perform save logic here (e.g., update the backend)
25 | // After saving, exit edit mode
26 | this.isEditMode = false;
27 | }
28 |
29 | cancelEdit() {
30 | // Reset any changes made during edit and exit edit mode
31 | this.isEditMode = false;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/services/sidebar/sidebar.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { SidebarService } from './sidebar.service';
4 |
5 | describe('SidebarService', () => {
6 | let service: SidebarService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(SidebarService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/app/services/sidebar/sidebar.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { BehaviorSubject } from 'rxjs';
3 |
4 | @Injectable({
5 | providedIn: 'root',
6 | })
7 | export class SidebarService {
8 |
9 | private sidebarVisibilitySubject = new BehaviorSubject(true);
10 | sidebarVisibility$ = this.sidebarVisibilitySubject.asObservable();
11 |
12 | toggleSidebar() {
13 | this.sidebarVisibilitySubject.next(!this.sidebarVisibilitySubject.value);
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Talha-Ahrar/angular15-starter-project/8d7b2478ca2ec7897c63862a7b2a34326d3ddb60/src/assets/.gitkeep
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Talha-Ahrar/angular15-starter-project/8d7b2478ca2ec7897c63862a7b2a34326d3ddb60/src/assets/logo.png
--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/user.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Talha-Ahrar/angular15-starter-project/8d7b2478ca2ec7897c63862a7b2a34326d3ddb60/src/assets/user.jpg
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Talha-Ahrar/angular15-starter-project/8d7b2478ca2ec7897c63862a7b2a34326d3ddb60/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | App Lucas
6 |
7 |
8 |
9 |
10 |
16 |
17 |
18 |
22 |
23 |
27 |
28 |
29 |
30 |
31 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 |
3 | import { AppModule } from './app/app.module';
4 |
5 |
6 | platformBrowserDynamic().bootstrapModule(AppModule)
7 | .catch(err => console.error(err));
8 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | @import "~bootstrap/dist/css/bootstrap.css";
3 |
4 | .sidebar{
5 | top: 0;
6 | left : 0;
7 | z-index : 100;
8 | overflow-y: auto;
9 | }
10 | .list-group-item.active {
11 | background-color: #0000cd;
12 | }
13 |
14 | .overlay{
15 | background-color: rgb(0 0 0 / 45%);
16 | z-index: 99;
17 | }
18 |
--------------------------------------------------------------------------------
/src/styles.scss:
--------------------------------------------------------------------------------
1 | // Define custom colors
2 | $custom-body-color: #ebebeb; // Background color
3 | // Text color
4 |
5 | body {
6 | background-color: $custom-body-color;
7 | // color: white;
8 | }
9 |
10 | // You can also define styles for specific elements or classes using these colors
11 | // .custom-element {
12 | // background-color: $custom-body-color;
13 | // color: $custom-text-color;
14 | // }
15 |
16 | // .another-element {
17 | // background-color: #FFB7B7; // Another custom background color
18 | // color: #F4EEEE; // Another custom text color
19 | // }
20 |
--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": [
9 | "src/main.ts"
10 | ],
11 | "include": [
12 | "src/**/*.d.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "ES2022",
20 | "module": "ES2022",
21 | "useDefineForClassFields": false,
22 | "lib": [
23 | "ES2022",
24 | "dom"
25 | ]
26 | },
27 | "angularCompilerOptions": {
28 | "enableI18nLegacyMessageIdFormat": false,
29 | "strictInjectionParameters": true,
30 | "strictInputAccessModifiers": true,
31 | "strictTemplates": true
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": [
7 | "jasmine"
8 | ]
9 | },
10 | "include": [
11 | "src/**/*.spec.ts",
12 | "src/**/*.d.ts"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
5 |