feat(docs): anchors component was added (#191)

packages/docs/src/app/components/anchors/anchors.component.html

@@ -0,0 +1,9 @@
+<div class="anchors-menu">
+    <div class="anchors-menu__container">
+        <div class="anchors-menu__list" >
+            <div *ngFor="let anchor of anchors; let i = index" [attr.class] = "i == activeAnchor? activeClass : inactiveClass"    >
+                <a href="{{anchor.href}}" (click)="setActiveAnchor(i)">{{anchor.name}}</a>
+            </div>
+        </div>
+    </div>
+</div>

packages/docs/src/app/components/anchors/anchors.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+    selector: 'anchors',
+    templateUrl: './anchors.component.html',
+    styleUrls: ['./anchors.scss']
+})
+export class AnchorsComponent {
+
+    activeAnchor: number = 0;
+    activeClass: string = "anchors-menu__list-element anchors-menu__list-element_active";
+    anchors: {href: string, name: string }[]  = [
+        {href: "#variants", name: "Variants"},
+        {href: "#colors", name: "Colors"},
+        {href: "#progress-indication", name: "Progress indication"},
+    ];
+    inactiveClass: string = "anchors-menu__list-element";
+
+    ngAfterViewInit() {
+        // TODO: collect real anchors data
+    }
+
+    setActiveAnchor ( index ) {
+        this.activeAnchor = index;
+    }
+}

packages/docs/src/app/components/anchors/anchors.module.ts

@@ -0,0 +1,10 @@
+import { AnchorsComponent } from "./anchors.component";
+import {CommonModule} from "@angular/common";
+import { NgModule } from '@angular/core';
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [AnchorsComponent],
+    declarations: [AnchorsComponent]
+})
+export class AnchorsModule { }

packages/docs/src/app/components/anchors/anchors.scss

@@ -0,0 +1,33 @@
+@mixin box-shadow ($shadow) {
+    -webkit-box-shadow: $shadow;
+    -moz-box-shadow: $shadow;
+    -o-box-shadow: $shadow;
+    box-shadow: $shadow;
+}
+
+.anchors-menu {
+    position: fixed;
+    top: 64px;
+    width: 350px;
+    right: 0;
+    bottom: 0;
+
+    &__list {
+        display: flex;
+        flex-direction: column;
+        margin-top: 25px;
+    }
+
+    &__list-element {
+        list-style-type: none;
+        padding: 6px 16px;
+        line-height: 20px;
+        font-size: 15px;
+        color: #2f2f33;
+
+        &:hover { @include box-shadow( inset 3px 0 0 rgba(140,148,158,0.2) ); }
+
+        &_active { @include box-shadow( inset 3px 0 0 #2f80ed ); }
+    }
+}
+

packages/docs/src/app/components/main-layout/main-layout.component.html

@@ -7,4 +7,5 @@
             <router-outlet></router-outlet>
         </div>
     </article>
+    <anchors></anchors>
 </main>

packages/docs/src/app/components/main-layout/main-layout.component.scss

@@ -7,9 +7,10 @@
 .content {
 
     margin-left: 360px;
+    margin-top: 64px;
     padding-left: 48px;
     padding-top: 20px;
-    padding-right: 300px;
+    padding-right: 350px;
 
     &__wrapper{
         padding: 10px 0;

packages/docs/src/app/components/main-layout/main-layout.module.ts

@@ -1,3 +1,4 @@
+import { AnchorsModule } from '../anchors/anchors.module';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
@@ -14,6 +15,8 @@ import { MainLayoutComponent } from './main-layout.component';
 
 @NgModule({
     imports: [
+        AnchorsModule,
+
         CommonModule,
         RouterModule,