diff --git a/github-option-three-app/src/app/app.component.css b/github-option-three-app/src/app/app.component.css index e105dec..dd10f10 100644 --- a/github-option-three-app/src/app/app.component.css +++ b/github-option-three-app/src/app/app.component.css @@ -1,8 +1,9 @@ .wrapper { display: flex; + min-height: 80vh; } -.sidenav { +.sidenav-spacer { width: 20dvw; } diff --git a/github-option-three-app/src/app/app.component.html b/github-option-three-app/src/app/app.component.html index 57daaf2..12b9494 100644 --- a/github-option-three-app/src/app/app.component.html +++ b/github-option-three-app/src/app/app.component.html @@ -1,9 +1,9 @@
-
- +
-
+
+ diff --git a/github-option-three-app/src/app/app.component.ts b/github-option-three-app/src/app/app.component.ts index 34914d4..ea5bcdd 100644 --- a/github-option-three-app/src/app/app.component.ts +++ b/github-option-three-app/src/app/app.component.ts @@ -4,12 +4,12 @@ import { RouterOutlet } from "@angular/router"; import { HeaderComponent } from "./components/header/header.component"; import { HomeComponent } from "./components/home/home.component"; -import { SidenavComponent } from "./components/sidenav/sidenav.component"; +import { FooterComponent } from "./components/footer/footer.component"; @Component({ selector: "app-root", standalone: true, - imports: [CommonModule, RouterOutlet, HeaderComponent, SidenavComponent, HomeComponent], + imports: [CommonModule, RouterOutlet, HeaderComponent, HomeComponent, FooterComponent], templateUrl: "./app.component.html", styleUrl: "./app.component.css", }) diff --git a/github-option-three-app/src/app/app.routes.ts b/github-option-three-app/src/app/app.routes.ts index fb39925..d777654 100644 --- a/github-option-three-app/src/app/app.routes.ts +++ b/github-option-three-app/src/app/app.routes.ts @@ -1,8 +1,12 @@ import { Routes } from '@angular/router'; import { HomeComponent } from './components/home/home.component'; import { AboutComponent } from './components/about/about.component'; +import { AboutAngularComponent } from './components/about-angular/about-angular.component'; export const routes: Routes = [ - { path: '', component: HomeComponent }, - {path: 'about', component: AboutComponent}, + { path: '', pathMatch: 'full', redirectTo: 'home'}, + { path: 'home', component: HomeComponent }, + { path: 'about', component: AboutComponent }, + { path: 'about-angular', component: AboutAngularComponent }, + { path: '**', pathMatch: 'full', redirectTo: ''} ]; diff --git a/github-option-three-app/src/app/components/about-angular/about-angular.component.css b/github-option-three-app/src/app/components/about-angular/about-angular.component.css new file mode 100644 index 0000000..a81fefa --- /dev/null +++ b/github-option-three-app/src/app/components/about-angular/about-angular.component.css @@ -0,0 +1,179 @@ +:host { + --f4f4f4: oklch(95% 0.042 0); + --bright-blue: oklch(0.57 0.24 266.03); + --electric-violet: oklch(53.18% 0.28 296.97); + --french-violet: oklch(0.59 0.3 306.65); + --vivid-pink: oklch(69.02% 0.277 332.77); + --hot-red: oklch(61.42% 0.238 15.34); + --orange-red: oklch(63.32% 0.24 31.68); + + --gray-900: oklch(19.37% 0.006 300.98); + --gray-700: oklch(36.98% 0.014 302.71); + --gray-400: oklch(70.9% 0.015 304.04); + + --red-to-pink-to-purple-vertical-gradient: linear-gradient( + 180deg, + var(--orange-red) 0%, + var(--vivid-pink) 50%, + var(--electric-violet) 100% + ); + + --red-to-pink-to-purple-horizontal-gradient: linear-gradient( + 90deg, + var(--orange-red) 0%, + var(--vivid-pink) 50%, + var(--electric-violet) 100% + ); + + --pill-accent: var(--bright-blue); + + display: flex; + flex-wrap: wrap; + flex-direction: column; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +h1 { + font-size: 2rem; + font-weight: 500; + line-height: 3rem; + letter-spacing: -0.125rem; + margin: 0; + font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; +} + +p { + color: var(--gray-400); + margin: 0; +} + +main { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 1rem; + box-sizing: inherit; + position: relative; +} + +.angular-logo { + max-width: 9.2rem; +} + +.content { + display: flex; + justify-content: space-around; + width: 100%; + max-width: 50rem; + margin-bottom: 3rem; +} + +.content h1 { + margin-top: 1rem; +} + +.content p { + margin-top: 0.5rem; +} + +.content .left-side { + max-width: 65%; +} + +.divider { + width: 1px; + background: var(--red-to-pink-to-purple-vertical-gradient); + margin-inline: 0.5rem; +} + +.content .right-side { + display: flex; + flex-direction: column; + justify-content: center; +} + +.pill-group { + display: flex; + flex-direction: column; + align-items: start; + flex-wrap: wrap; + gap: 2rem; +} + +.pill { + display: flex; + align-items: center; + --pill-accent: var(--bright-blue); + background: color-mix(in srgb, var(--pill-accent) 20%, transparent); + color: var(--pill-accent); + padding-inline: 0.75rem; + padding-block: 0.375rem; + border-radius: 2.75rem; + border: 0; + transition: background 0.3s ease; + font-family: var(--inter-font); + font-size: 0.875rem; + font-style: normal; + font-weight: 500; + line-height: 1.4rem; + letter-spacing: -0.00875rem; + text-decoration: none; +} + +.pill:hover { + background: color-mix(in srgb, var(--pill-accent) 15%, transparent); +} + +.pill-group .pill:nth-child(6n + 1) { + --pill-accent: var(--bright-blue); +} +.pill-group .pill:nth-child(6n + 2) { + --pill-accent: var(--french-violet); +} +.pill-group .pill:nth-child(6n + 3), +.pill-group .pill:nth-child(6n + 4), +.pill-group .pill:nth-child(6n + 5) { + --pill-accent: var(--hot-red); +} + +.pill-group svg { + margin-inline-start: 0.25rem; +} + +.social-links { + display: flex; + align-items: center; + gap: 0.73rem; + margin-top: 1.5rem; +} + +.social-links path { + transition: fill 0.3s ease; + fill: var(--gray-400); +} + +.social-links a:hover svg path { + fill: var(--gray-900); +} + +@media screen and (max-width: 650px) { + .content { + flex-direction: column; + width: max-content; + } + + .divider { + height: 1px; + width: 100%; + background: var(--red-to-pink-to-purple-horizontal-gradient); + margin-block: 1.5rem; + } +} diff --git a/github-option-three-app/src/app/components/about-angular/about-angular.component.html b/github-option-three-app/src/app/components/about-angular/about-angular.component.html new file mode 100644 index 0000000..71b16f3 --- /dev/null +++ b/github-option-three-app/src/app/components/about-angular/about-angular.component.html @@ -0,0 +1,109 @@ +
+
+
+ + +

More About Angular

+

Congratulations! Your app is running. 🎉

+
+ +
+
+ @for (item of [ + { title: 'Explore the Docs', link: 'https://angular.dev' }, + { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, + { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, + { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, + { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, + ]; track item.title) { + + {{ item.title }} + + + + + } +
+ +
+
+
+ diff --git a/github-option-three-app/src/app/components/about-angular/about-angular.component.spec.ts b/github-option-three-app/src/app/components/about-angular/about-angular.component.spec.ts new file mode 100644 index 0000000..d5acd00 --- /dev/null +++ b/github-option-three-app/src/app/components/about-angular/about-angular.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AboutAngularComponent } from './about-angular.component'; + +describe('AboutAngularComponent', () => { + let component: AboutAngularComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AboutAngularComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AboutAngularComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/github-option-three-app/src/app/components/about-angular/about-angular.component.ts b/github-option-three-app/src/app/components/about-angular/about-angular.component.ts new file mode 100644 index 0000000..908f545 --- /dev/null +++ b/github-option-three-app/src/app/components/about-angular/about-angular.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-about-angular', + standalone: true, + imports: [], + templateUrl: './about-angular.component.html', + styleUrl: './about-angular.component.css' +}) +export class AboutAngularComponent { + +} diff --git a/github-option-three-app/src/app/components/about/about.component.css b/github-option-three-app/src/app/components/about/about.component.css index 6fcc8c1..e69de29 100644 --- a/github-option-three-app/src/app/components/about/about.component.css +++ b/github-option-three-app/src/app/components/about/about.component.css @@ -1,184 +0,0 @@ -:host { - --f4f4f4: oklch(95% 0.042 0); - --bright-blue: oklch(0.57 0.24 266.03); - --electric-violet: oklch(53.18% 0.28 296.97); - --french-violet: oklch(0.59 0.3 306.65); - --vivid-pink: oklch(69.02% 0.277 332.77); - --hot-red: oklch(61.42% 0.238 15.34); - --orange-red: oklch(63.32% 0.24 31.68); - - --gray-900: oklch(19.37% 0.006 300.98); - --gray-700: oklch(36.98% 0.014 302.71); - --gray-400: oklch(70.9% 0.015 304.04); - - --red-to-pink-to-purple-vertical-gradient: linear-gradient( - 180deg, - var(--orange-red) 0%, - var(--vivid-pink) 50%, - var(--electric-violet) 100% - ); - - --red-to-pink-to-purple-horizontal-gradient: linear-gradient( - 90deg, - var(--orange-red) 0%, - var(--vivid-pink) 50%, - var(--electric-violet) 100% - ); - - --pill-accent: var(--bright-blue); - - display: flex; - flex-wrap: wrap; - flex-direction: column; - font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol"; - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -h1 { - font-size: 2rem; - font-weight: 500; - line-height: 3rem; - letter-spacing: -0.125rem; - margin: 0; - font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol"; -} - -p { - color: var(--gray-400); - margin: 0; -} - -main { - width: 100%; - min-height: 100%; - display: flex; - justify-content: center; - align-items: center; - padding: 1rem; - box-sizing: inherit; - position: relative; -} - -.main { - min-height: 95vh; -} - -.angular-logo { - max-width: 9.2rem; -} - -.content { - display: flex; - justify-content: space-around; - width: 100%; - max-width: 50rem; - margin-bottom: 3rem; -} - -.content h1 { - margin-top: 1rem; -} - -.content p { - margin-top: 0.5rem; -} - -.content .left-side { - max-width: 65%; -} - -.divider { - width: 1px; - background: var(--red-to-pink-to-purple-vertical-gradient); - margin-inline: 0.5rem; -} - -.content .right-side { - display: flex; - flex-direction: column; - justify-content: center; -} - -.pill-group { - display: flex; - flex-direction: column; - align-items: start; - flex-wrap: wrap; - gap: 2rem; -} - -.pill { - display: flex; - align-items: center; - --pill-accent: var(--bright-blue); - background: color-mix(in srgb, var(--pill-accent) 20%, transparent); - color: var(--pill-accent); - padding-inline: 0.75rem; - padding-block: 0.375rem; - border-radius: 2.75rem; - border: 0; - transition: background 0.3s ease; - font-family: var(--inter-font); - font-size: 0.875rem; - font-style: normal; - font-weight: 500; - line-height: 1.4rem; - letter-spacing: -0.00875rem; - text-decoration: none; -} - -.pill:hover { - background: color-mix(in srgb, var(--pill-accent) 15%, transparent); -} - -.pill-group .pill:nth-child(6n + 1) { - --pill-accent: var(--bright-blue); -} -.pill-group .pill:nth-child(6n + 2) { - --pill-accent: var(--french-violet); -} -.pill-group .pill:nth-child(6n + 3), -.pill-group .pill:nth-child(6n + 4), -.pill-group .pill:nth-child(6n + 5) { - --pill-accent: var(--hot-red); -} - -.pill-group svg { - margin-inline-start: 0.25rem; -} - -.social-links { - display: flex; - align-items: center; - gap: 0.73rem; - margin-top: 1.5rem; -} - -.social-links path { - transition: fill 0.3s ease; - fill: var(--gray-400); -} - -.social-links a:hover svg path { - fill: var(--gray-900); -} - -@media screen and (max-width: 650px) { - .content { - flex-direction: column; - width: max-content; - } - - .divider { - height: 1px; - width: 100%; - background: var(--red-to-pink-to-purple-horizontal-gradient); - margin-block: 1.5rem; - } -} diff --git a/github-option-three-app/src/app/components/about/about.component.html b/github-option-three-app/src/app/components/about/about.component.html index 3520347..e69de29 100644 --- a/github-option-three-app/src/app/components/about/about.component.html +++ b/github-option-three-app/src/app/components/about/about.component.html @@ -1,108 +0,0 @@ -
-
-
- - -

Angular v17 Deploy To GitHub Pages using GitHub Actions CI/CD (automated)

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
diff --git a/github-option-three-app/src/app/components/footer/footer.component.css b/github-option-three-app/src/app/components/footer/footer.component.css index e69de29..aff9dfe 100644 --- a/github-option-three-app/src/app/components/footer/footer.component.css +++ b/github-option-three-app/src/app/components/footer/footer.component.css @@ -0,0 +1,7 @@ +a { + text-decoration: none; +} + +a:hover { + color: #edbff5; +} diff --git a/github-option-three-app/src/app/components/footer/footer.component.html b/github-option-three-app/src/app/components/footer/footer.component.html index 28c0d7d..367d3f8 100644 --- a/github-option-three-app/src/app/components/footer/footer.component.html +++ b/github-option-three-app/src/app/components/footer/footer.component.html @@ -1 +1,11 @@ -

footer works!

+ +
+
+ +
+

by Esther White

+
+ +
+
+ diff --git a/github-option-three-app/src/app/components/footer/footer.component.ts b/github-option-three-app/src/app/components/footer/footer.component.ts index e2d1a44..c712868 100644 --- a/github-option-three-app/src/app/components/footer/footer.component.ts +++ b/github-option-three-app/src/app/components/footer/footer.component.ts @@ -1,9 +1,11 @@ import { Component } from '@angular/core'; +import { ToolbarModule } from "primeng/toolbar"; + @Component({ selector: 'app-footer', standalone: true, - imports: [], + imports: [ToolbarModule], templateUrl: './footer.component.html', styleUrl: './footer.component.css' }) diff --git a/github-option-three-app/src/app/components/header/header.component.html b/github-option-three-app/src/app/components/header/header.component.html index dc02981..8e6d238 100644 --- a/github-option-three-app/src/app/components/header/header.component.html +++ b/github-option-three-app/src/app/components/header/header.component.html @@ -1,9 +1,9 @@
- +
- + diff --git a/github-option-three-app/src/app/components/header/header.component.ts b/github-option-three-app/src/app/components/header/header.component.ts index 06b3bfe..2eded87 100644 --- a/github-option-three-app/src/app/components/header/header.component.ts +++ b/github-option-three-app/src/app/components/header/header.component.ts @@ -4,6 +4,7 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { ToolbarModule } from "primeng/toolbar"; import { InputSwitchModule } from "primeng/inputswitch"; import { ButtonModule } from "primeng/button"; +import { SidenavComponent } from "../sidenav/sidenav.component"; @Component({ selector: "app-header", @@ -11,6 +12,7 @@ import { ButtonModule } from "primeng/button"; imports: [ FormsModule, ReactiveFormsModule, + SidenavComponent, ToolbarModule, InputSwitchModule, ButtonModule, @@ -20,4 +22,9 @@ import { ButtonModule } from "primeng/button"; }) export class HeaderComponent { checked: boolean = true; + sidenavOpen: boolean = true; + + toggleSidenav() { + this.sidenavOpen = !this.sidenavOpen; + } } diff --git a/github-option-three-app/src/app/components/home/home.component.css b/github-option-three-app/src/app/components/home/home.component.css index ba6be91..1738d73 100644 --- a/github-option-three-app/src/app/components/home/home.component.css +++ b/github-option-three-app/src/app/components/home/home.component.css @@ -7,16 +7,3 @@ height: 18rem; } } - -small { - color: var(--gray-400); -} - -small a { - color: var(--gray-400); - text-decoration: none; -} - -small a:hover { - color: var(--white); -} diff --git a/github-option-three-app/src/app/components/home/home.component.html b/github-option-three-app/src/app/components/home/home.component.html index 224d16b..ffffe44 100644 --- a/github-option-three-app/src/app/components/home/home.component.html +++ b/github-option-three-app/src/app/components/home/home.component.html @@ -1,5 +1,6 @@ +

Angular v17 Deploy To GitHub Pages using GitHub Actions CI/CD (automated)

-by Esther White + diff --git a/github-option-three-app/src/app/components/sidenav/sidenav.component.css b/github-option-three-app/src/app/components/sidenav/sidenav.component.css index 130d79a..fc51db6 100644 --- a/github-option-three-app/src/app/components/sidenav/sidenav.component.css +++ b/github-option-three-app/src/app/components/sidenav/sidenav.component.css @@ -1,4 +1,5 @@ .sidenav { + position:absolute; display: flex; margin: 0.5rem 0; } @@ -6,6 +7,20 @@ nav { display: flex; flex-direction: column; - width: 7vw; - min-height: 80vh; + min-height: 73vh; + padding: 0 0.5rem 0 0; +} + +.nav-item { + color: #CE93D8; +} + +.pi { + margin-right: 0.5rem; +} + +a { + text-transform: uppercase; + text-decoration: none; + line-height: 2rem; } diff --git a/github-option-three-app/src/app/components/sidenav/sidenav.component.html b/github-option-three-app/src/app/components/sidenav/sidenav.component.html index 4bd6d07..5ca4ba9 100644 --- a/github-option-three-app/src/app/components/sidenav/sidenav.component.html +++ b/github-option-three-app/src/app/components/sidenav/sidenav.component.html @@ -1,6 +1,11 @@ +@if (sidenavOpen) { +} diff --git a/github-option-three-app/src/app/components/sidenav/sidenav.component.ts b/github-option-three-app/src/app/components/sidenav/sidenav.component.ts index 1b48821..130a4fa 100644 --- a/github-option-three-app/src/app/components/sidenav/sidenav.component.ts +++ b/github-option-three-app/src/app/components/sidenav/sidenav.component.ts @@ -1,18 +1,32 @@ -import { Component } from '@angular/core'; +import { Component, Input } from "@angular/core"; import { RouterOutlet, RouterLink, RouterLinkActive } from "@angular/router"; import { ToolbarModule } from "primeng/toolbar"; @Component({ - selector: 'app-sidenav', - standalone: true, - imports: [ - RouterOutlet, - RouterLink, - RouterLinkActive, - ToolbarModule], - templateUrl: './sidenav.component.html', - styleUrl: './sidenav.component.css' + selector: "app-sidenav", + standalone: true, + imports: [RouterOutlet, RouterLink, RouterLinkActive, ToolbarModule], + templateUrl: "./sidenav.component.html", + styleUrl: "./sidenav.component.css", }) export class SidenavComponent { + @Input() sidenavOpen: boolean = true; + items = [ + { + label: "Home", + icon: "pi pi-home", + route: "/home", + }, + { + label: "About Me", + icon: "pi pi-user", + route: "/about", + }, + { + label: "About Angular", + icon: "pi pi-shield", + route: "/about-angular", + }, + ]; }