feat: add a footer

src/app/app.component.ts

@@ -1,10 +1,14 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {RouterOutlet} from '@angular/router';
+import {FooterComponent} from "@component/footer/footer.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, FooterComponent],
-  template: `<router-outlet/>`
+  template: `
+    <router-outlet/>
+    <app-footer/>`
 })
-export class AppComponent {}
+export class AppComponent {
+}

src/components/footer/footer.component.css

@@ -0,0 +1,81 @@
+.app-footer {
+  padding: 12px;
+  font-size: 12px;
+  color: white;
+}
+
+.app-footer-copyright {
+  display: flex;
+  flex: 1;
+  justify-content: flex-end;
+  flex-direction: column;
+  min-width: 225px;
+  margin-top: 16px;
+  color: #BCBEC0;
+  align-self: center;
+  text-align: center;
+}
+
+/*noinspection CssInvalidPropertyValue*/
+a {
+  text-decoration: none;
+  color: inherit;
+  text-wrap: balance;
+}
+
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+
+.app-footer-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 1fr;
+  grid-column-gap: 15px;
+  align-items: center;
+  justify-items: center;
+}
+
+.app-footer-list div h1 {
+  margin: 0;
+}
+
+@media screen and (min-width: 600px) and (max-width: 960px) {
+  .app-footer-list {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 1fr 3fr;
+  }
+
+  .app-footer-list > div:nth-child(1) {
+    grid-area: 1 / 1 / 2 / 4;
+  }
+
+  .app-footer-list > div:nth-child(2) {
+    grid-area: 2 / 1 / 3 / 2;
+  }
+
+  .app-footer-list > div:nth-child(3) {
+    grid-area: 2 / 2 / 3 / 3;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .app-footer-list {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr repeat(2, 3fr);
+    justify-items: start;
+  }
+
+  .app-footer-list > div:nth-child(1) {
+    grid-area: 1 / 1 / 2 / 4;
+  }
+
+  .app-footer-list > div:nth-child(2) {
+    grid-area: 2 / 1 / 3 / 2;
+  }
+
+  .app-footer-list > div:nth-child(3) {
+    grid-area: 3 / 1 / 4 / 2;
+  }
+}

src/components/footer/footer.component.html

@@ -0,0 +1,30 @@
+<footer style="background-color: #1A2026;">
+  <hr/>
+  <div class="app-footer">
+    <div class="app-footer-list">
+      <div>
+        <h1>Winsomnia</h1>
+      </div>
+      <div>
+        <mat-list role="list">
+          <mat-list-item role="listitem"><a href="policy/">Политика Конфиденциальности</a></mat-list-item>
+          <mat-list-item role="listitem"><a href="#">Политика по Отношению к Cookie</a></mat-list-item>
+          <mat-list-item role="listitem"><a href="#">Правила и Условия Использования</a></mat-list-item>
+        </mat-list>
+      </div>
+      <div>
+        <mat-list role="list">
+          <mat-list-item role="listitem"><a href="#">Документация</a></mat-list-item>
+          <mat-list-item role="listitem"><a href="#">Лицензия</a></mat-list-item>
+          <mat-list-item role="listitem"><a href="#">О Нас</a></mat-list-item>
+        </mat-list>
+      </div>
+    </div>
+    <hr/>
+    <div class="app-footer-copyright">
+        <span>Powered by Winsomnia &copy;{{ currentYear }}.</span>
+        <a href="https://opensource.org/license/mit/">Code licensed under an MIT-style License.</a>
+        <span>Current Version: {{ version }}</span>
+    </div>
+  </div>
+</footer>

src/components/footer/footer.component.ts

@@ -0,0 +1,23 @@
+import {Component} from "@angular/core";
+import {MatList, MatListItem} from "@angular/material/list";
+import {version} from "@/../package.json";
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  imports: [
+    MatList,
+    MatListItem
+  ],
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.css'
+})
+export class FooterComponent {
+  currentYear: number;
+  version: string;
+
+  constructor() {
+    this.currentYear = new Date().getFullYear();
+    this.version = version;
+  }
+}