inkletblot/inkletblot-com-v2
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first go of nav restyle is complete, removed blue and replaced with visual que

Browse Source
This commit is contained in:
Solomon Laing 2021-06-14 16:14:19 +09:30
parent 585826a60f
commit 86f7aa143a
4 changed files with 45 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.module.ts
View File

@ -1,5 +1,6 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@ -27,6 +28,7 @@ import { Page404Component } from './page404/page404.component';
imports: [
SharedModule,
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule
],

6
src/app/nav/nav.component.html
View File

@ -1,6 +1,6 @@
<ul>
<li><a routerLink="{{Pages.HOME}}" routerLinkActive="activeRoute">{{Pages.HOME}}</a></li>
<li><a routerLink="{{Pages.PROJECTS}}" routerLinkActive="activeRoute">{{Pages.PROJECTS}}</a></li>
<li (mouseover)="state[0] = 'bump'" (mouseout)="state[0] = 'norm'"><a [@openClose]="state[0]" routerLink="{{Pages.HOME}}" routerLinkActive="activeRoute">{{Pages.HOME}}</a></li>
<li (mouseover)="state[1] = 'bump'" (mouseout)="state[1] = 'norm'"><a [@openClose]="state[1]" routerLink="{{Pages.PROJECTS}}" routerLinkActive="activeRoute">{{Pages.PROJECTS}}</a></li>
<!-- <li><a routerLink="{{Pages.GALLERY}}" routerLinkActive="activeRoute">{{Pages.GALLERY}}</a></li> -->
<li><a routerLink="{{Pages.LINKS}}" routerLinkActive="activeRoute">{{Pages.LINKS}}</a></li>
<li (mouseover)="state[2] = 'bump'" (mouseout)="state[2] = 'norm'"><a [@openClose]="state[2]" routerLink="{{Pages.LINKS}}" routerLinkActive="activeRoute">{{Pages.LINKS}}</a></li>
</ul>

19
src/app/nav/nav.component.scss
View File

@ -12,9 +12,12 @@ li {
border-radius: 50px;
width: 100px;
height: 100px;
padding-right: 50px;
margin-right: -15px;
}
li a {
right: 0;
border-radius: 50px;
width: 100px;
height: 100px;
@ -31,13 +34,13 @@ li .activeRoute {
color: colors.$inklets-color-black;
}
li a:hover {
background-color: colors.$inklets-color-highlight-bg;
color: colors.$inklets-color-white;
}
// li a:hover {
// background-color: colors.$inklets-color-highlight-bg;
// color: colors.$inklets-color-white;
// }
li a:hover.activeRoute {
background-color: colors.$inklets-color-highlight-fg;
color: colors.$inklets-color-black;
}
// li a:hover.activeRoute {
// background-color: colors.$inklets-color-highlight-fg;
// color: colors.$inklets-color-black;
// }

34
src/app/nav/nav.component.ts
View File

@ -1,18 +1,42 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, OnInit } from '@angular/core';
import { Pages } from '../shared/models/pages.model';
import { NavService } from './nav.service';
@Component({
selector: 'app-nav',
animations: [
trigger('openClose', [
state(
'bump',
style({
'margin-left': 0
})
),
state(
'norm',
style({
'margin-left': '15px'
})
),
transition('norm => bump', [
animate(
'0.1s'
)
]),
transition('bump => norm', [
animate(
'0.1s'
)
])
])
],
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {
Pages = Pages;
state: string[] = ['norm', 'norm', 'norm'];
constructor() { }