+
\ No newline at end of file
diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss
new file mode 100644
index 00000000..9ade72b0
--- /dev/null
+++ b/src/app/components/footer/footer.component.scss
@@ -0,0 +1,3 @@
+:host {
+ display: block;
+}
\ No newline at end of file
diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts
new file mode 100644
index 00000000..0c25bf25
--- /dev/null
+++ b/src/app/components/footer/footer.component.ts
@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+@Component({
+ selector: "app-footer",
+ templateUrl: "./footer.component.html",
+ styleUrls: ["./footer.component.scss"],
+ standalone: false,
+})
+export class FooterComponent {
+ readonly currentYear = new Date().getFullYear();
+}
\ No newline at end of file
diff --git a/src/app/components/navbar-actions/navbar-actions.component.html b/src/app/components/navbar-actions/navbar-actions.component.html
new file mode 100644
index 00000000..0bfc5110
--- /dev/null
+++ b/src/app/components/navbar-actions/navbar-actions.component.html
@@ -0,0 +1,69 @@
+
\ No newline at end of file
diff --git a/src/app/components/navbar-actions/navbar-actions.component.scss b/src/app/components/navbar-actions/navbar-actions.component.scss
new file mode 100644
index 00000000..e07d14db
--- /dev/null
+++ b/src/app/components/navbar-actions/navbar-actions.component.scss
@@ -0,0 +1,128 @@
+:host {
+ display: contents;
+}
+
+.login-btn {
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+}
+
+.nav-link {
+ color: var(--warm-text-secondary);
+ text-decoration: none;
+
+ &:hover,
+ &:focus {
+ color: var(--warm-accent-primary);
+ text-decoration: none;
+ }
+
+ &.dropdown-toggle::after {
+ margin-left: 0.35em;
+ }
+}
+
+.dropdown.show > .nav-link.dropdown-toggle {
+ color: var(--warm-accent-primary);
+}
+
+.dropdown-menu {
+ display: none;
+ border-radius: 10px;
+ box-shadow:
+ 0 4px 8px var(--warm-shadow-color),
+ 0 8px 16px var(--warm-shadow-color),
+ 0 16px 32px var(--warm-shadow-color-medium);
+ padding: 0.5rem;
+ margin-top: 0.5rem;
+
+ &.show {
+ display: block;
+ }
+}
+
+.dropdown-item {
+ border-radius: 6px;
+ padding: 0.5rem 1rem;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ &:active {
+ background-color: var(--warm-accent-primary);
+ color: var(--warm-btn-contrast-text);
+ }
+}
+
+.theme-toggle-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ padding: 0;
+ border-radius: 50%;
+ background-color: var(--warm-bg-accent);
+ border: 1px solid var(--warm-border-color);
+ color: var(--warm-text-secondary);
+ transition: all 0.2s ease;
+ cursor: pointer;
+
+ i {
+ font-size: 1.1rem;
+ transition: transform 0.3s ease;
+ }
+
+ &:hover {
+ background-color: var(--warm-accent-primary);
+ border-color: var(--warm-accent-primary);
+ color: var(--warm-btn-contrast-text);
+ transform: scale(1.05);
+
+ i {
+ transform: rotate(15deg);
+ }
+ }
+
+ &:active {
+ transform: scale(0.95);
+ }
+
+ &:focus {
+ box-shadow: 0 0 0 3px var(--warm-input-focus-ring);
+ outline: none;
+ }
+}
+
+@media (min-width: 1200px) {
+ ul {
+ order: 2;
+ }
+}
+
+@media (max-width: 1199.98px) {
+ ul {
+ margin: 0;
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ gap: 5px;
+
+ li {
+ margin: 0 !important;
+ }
+ }
+}
+
+@media (max-width: 767.98px) {
+ .nav-item {
+ margin: 0.25rem 0;
+ }
+
+ .theme-toggle-btn {
+ margin-left: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/navbar-actions/navbar-actions.component.ts b/src/app/components/navbar-actions/navbar-actions.component.ts
new file mode 100644
index 00000000..5806cbab
--- /dev/null
+++ b/src/app/components/navbar-actions/navbar-actions.component.ts
@@ -0,0 +1,30 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { ThemeService } from "@shared/services/theme/theme.service";
+
+@Component({
+ selector: "app-navbar-actions",
+ templateUrl: "./navbar-actions.component.html",
+ styleUrls: ["./navbar-actions.component.scss"],
+ standalone: false,
+})
+export class NavbarActionsComponent {
+ @Input() loginName: string | null = null;
+ @Input() loginButtonAvailable = false;
+
+ @Output() loginClick = new EventEmitter
();
+ @Output() logoutClick = new EventEmitter();
+
+ constructor(public readonly themeService: ThemeService) {}
+
+ toggleTheme(): void {
+ this.themeService.toggleTheme();
+ }
+
+ login(): void {
+ this.loginClick.emit();
+ }
+
+ logout(): void {
+ this.logoutClick.emit();
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/navbar-list/navbar-list.component.html b/src/app/components/navbar-list/navbar-list.component.html
new file mode 100644
index 00000000..4e20d213
--- /dev/null
+++ b/src/app/components/navbar-list/navbar-list.component.html
@@ -0,0 +1,30 @@
+
\ No newline at end of file
diff --git a/src/app/components/navbar-list/navbar-list.component.scss b/src/app/components/navbar-list/navbar-list.component.scss
new file mode 100644
index 00000000..283af14b
--- /dev/null
+++ b/src/app/components/navbar-list/navbar-list.component.scss
@@ -0,0 +1,89 @@
+:host {
+ display: contents;
+}
+
+.nav-link {
+ color: var(--warm-text-secondary);
+ text-decoration: none;
+
+ &:hover,
+ &:focus {
+ color: var(--warm-accent-primary);
+ text-decoration: none;
+ }
+
+ &.dropdown-toggle::after {
+ margin-left: 0.35em;
+ }
+}
+
+.dropdown.show > .nav-link.dropdown-toggle {
+ color: var(--warm-accent-primary);
+}
+
+.dropdown-menu {
+ border-radius: 10px;
+ box-shadow:
+ 0 4px 8px var(--warm-shadow-color),
+ 0 8px 16px var(--warm-shadow-color),
+ 0 16px 32px var(--warm-shadow-color-medium);
+ padding: 0.5rem;
+ margin-top: 0.5rem;
+}
+
+.dropdown-item {
+ border-radius: 6px;
+ padding: 0.5rem 1rem;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ &:active {
+ background-color: var(--warm-accent-primary);
+ color: var(--warm-btn-contrast-text);
+ }
+}
+
+.dropdown-divider {
+ margin: 0.5rem 0;
+}
+
+@media (min-width: 1200px) {
+ ul {
+ order: 1;
+ }
+}
+
+@media (max-width: 1199.98px) {
+ .nav-item {
+ width: 100%;
+ max-width: 400px;
+ }
+}
+
+
+
+@media (max-width: 767.98px) {
+ .nav-item {
+ margin: 0.25rem 0;
+ }
+
+ .dropdown-menu {
+ border: none;
+ box-shadow: none;
+ background-color: transparent;
+ padding-left: 1rem;
+ }
+
+ .dropdown-item {
+ padding: 0.5rem 0.75rem;
+ }
+}
+
+@media (max-width: 528.98px) {
+ .nav-item {
+ max-width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/navbar-list/navbar-list.component.ts b/src/app/components/navbar-list/navbar-list.component.ts
new file mode 100644
index 00000000..bef3d59a
--- /dev/null
+++ b/src/app/components/navbar-list/navbar-list.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input } from "@angular/core";
+
+export interface NavbarLink {
+ title: string;
+ url: string;
+ show: boolean;
+}
+
+export interface NavbarDropdown {
+ title: string;
+ links: NavbarLink[];
+ show: boolean;
+}
+
+@Component({
+ selector: "app-navbar-list",
+ templateUrl: "./navbar-list.component.html",
+ styleUrls: ["./navbar-list.component.scss"],
+ standalone: false,
+})
+export class NavbarListComponent {
+ @Input() dropdowns: NavbarDropdown[] = [];
+}
\ No newline at end of file
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index e16ece37..895b7b7a 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -1,9 +1,9 @@
-