demo/2.0: Finish header

projects/ngx-tippy-demo/src/app/app.component.html

@@ -12,17 +12,6 @@
 
   <main class="t-demo__main">
 
-    <!-- <div class="demo">
-      <p>Here you can reproduce any Taiga UI example</p>
-      <p>
-        <tui-input [(ngModel)]="value"> Type some value </tui-input>
-      </p>
-      <button
-        tuiButton
-        appearance="secondary"
-      >Submit</button>
-    </div> -->
-
     <nav class="t-demo__nav">
       <t-demo-nav></t-demo-nav>
     </nav>

projects/ngx-tippy-demo/src/app/app.component.scss

@@ -18,17 +18,21 @@
 }
 
 .t-demo__main {
+  display: flex;
+  justify-content: space-between;
   margin-top: $header-height;
-  margin: 140px;
 }
 
-// .t-demo__nav {
-//   background-color: chocolate;
-// }
+.t-demo__nav {
+  position: fixed;
+  top: $header-height;
+  width: 250px;
+  height: 100%;
+}
 
-// .t-demo__content {
-//   background-color: orange;
-// }
+.t-demo__content {
+  margin-left: 250px;
+}
 
 // .t-demo__footer {
 //   background-color: coral;

projects/ngx-tippy-demo/src/app/app.component.ts

@@ -1,17 +1,40 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { WINDOW } from '@ng-web-apis/common';
+import { DestroyService, SchemeService } from '@services';
+import { takeUntil } from 'rxjs';
 import { Schemes } from '../interfaces/schemes.enum';
-import { SchemeService } from '../services/scheme-service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [DestroyService],
 })
 export class AppComponent {
   protected Schemes = Schemes;
+  private readonly bodyClassList!: DOMTokenList;
 
-  constructor(protected readonly schemeService: SchemeService) {}
+  constructor(
+    @Inject(WINDOW) readonly window: Window,
+    protected readonly schemeService: SchemeService,
+    private destroy$: DestroyService
+  ) {
+    this.bodyClassList = this.window.document.body.classList;
+  }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.listenForSchemeChange();
+  }
+
+  private listenForSchemeChange() {
+    this.schemeService.scheme$.pipe(takeUntil(this.destroy$)).subscribe(scheme => {
+      this.toggleBodyClass(scheme as Schemes);
+    });
+  }
+
+  private toggleBodyClass(scheme: Schemes) {
+    this.bodyClassList.remove(scheme === Schemes.Dark ? Schemes.Light : Schemes.Dark);
+    this.bodyClassList.add(scheme);
+  }
 }

projects/ngx-tippy-demo/src/components/t-demo-content/t-demo-content.component.html

@@ -1 +1 @@
-<!-- <p>t-demo-content works!</p> -->
+<p>t-demo-content works!</p>

projects/ngx-tippy-demo/src/components/t-demo-footer/t-demo-footer.component.html

@@ -1 +1 @@
-<!-- <p>© 2023 — MIT License</p> -->
+<p>© 2023 — MIT License</p>

projects/ngx-tippy-demo/src/components/t-demo-nav/t-demo-nav.component.html

@@ -1 +1,3 @@
-<!-- <p>t-demo-nav works!</p> -->
+<ul>
+  <li><a href="#">Getting started</a></li>
+</ul>

projects/ngx-tippy-demo/src/styles/common.scss

@@ -7,3 +7,14 @@
 body {
   background-color: var(--tui-base-01);
 }
+
+.dark-scheme img {
+  filter: brightness(.8) contrast(1.2);
+}
+
+.t-root-content {
+  display: grid;
+  min-height: 100vh;
+  margin: 0;
+  grid-template-rows: auto 1fr auto;
+}

projects/ngx-tippy-demo/src/styles/variables.scss

@@ -1,3 +1,23 @@
 $header-height: 84px;
 $main-bg-color: #f9f8f5;
 $main-font-size: 18px;
+
+$sol-base0: #839496;
+
+$sol-dark-base00: #657b83;
+$sol-dark-base01: #586e75;
+$sol-dark-base02: #073642;
+$sol-dark-base03: #002b36;
+
+$sol-light-base1: #93a1a1;
+$sol-light-base2: #eee8d5;
+$sol-light-base3: #fdf6e3;
+
+$sol-yellow: #b58900;
+$sol-orange: #cb4b16;
+$sol-red: #dc322f;
+$sol-magenta: #d33682;
+$sol-violet: #6c71c4;
+$sol-blue: #268bd2;
+$sol-cyan: #2aa198;
+$sol-green: #859900;