diff --git a/angular.json b/angular.json index 18998e3..2224c6a 100644 --- a/angular.json +++ b/angular.json @@ -28,7 +28,8 @@ "unitTestRunner": "jest" }, "@nrwl/angular:component": { - "style": "scss" + "style": "scss", + "changeDetection": "OnPush" } }, "projects": { diff --git a/apps/dafa-web/src/app/app.component.html b/apps/dafa-web/src/app/app.component.html index 1eea2f3..2cd91a3 100644 --- a/apps/dafa-web/src/app/app.component.html +++ b/apps/dafa-web/src/app/app.component.html @@ -1,11 +1,14 @@
- + -
- -
+
+ +
-
+
+ +
-
+
+ diff --git a/apps/dafa-web/src/app/app.component.scss b/apps/dafa-web/src/app/app.component.scss index e69de29..5df793f 100644 --- a/apps/dafa-web/src/app/app.component.scss +++ b/apps/dafa-web/src/app/app.component.scss @@ -0,0 +1,25 @@ +@import 'variables/gutters'; +@import 'variables/navigation'; +@import 'variables/breakpoints'; + +.dafa { + &__main { + display: grid; + grid-template-columns: 15rem 1fr; + grid-template-areas: 'sidebar content'; + } + + &__sidebar { + grid-area: sidebar; + height: calc(100vh - #{$dafa__navigation-height} - 1px); + + @media (min-width: $af__breakpoint-m) { + height: calc(100vh - #{$dafa__navigation-height-large} - 1px); + } + } + + &__content { + grid-area: content; + padding: $af__gutter-l; + } +} diff --git a/apps/dafa-web/src/app/app.module.ts b/apps/dafa-web/src/app/app.module.ts index f0f5a08..91f063c 100644 --- a/apps/dafa-web/src/app/app.module.ts +++ b/apps/dafa-web/src/app/app.module.ts @@ -4,11 +4,12 @@ import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { NavigationModule } from './components/navigation/navigation.module'; +import { SidebarModule } from './components/sidebar/sidebar.module'; import { SkipToContentModule } from './components/skip-to-content/skip-to-content.module'; @NgModule({ declarations: [AppComponent], - imports: [BrowserModule, HttpClientModule, AppRoutingModule, SkipToContentModule, NavigationModule], + imports: [BrowserModule, HttpClientModule, AppRoutingModule, SkipToContentModule, NavigationModule, SidebarModule], providers: [], bootstrap: [AppComponent], }) diff --git a/apps/dafa-web/src/app/components/navigation/navigation.component.html b/apps/dafa-web/src/app/components/navigation/navigation.component.html index 71d99f4..878aa7c 100644 --- a/apps/dafa-web/src/app/components/navigation/navigation.component.html +++ b/apps/dafa-web/src/app/components/navigation/navigation.component.html @@ -1,10 +1,10 @@
- +
-
diff --git a/apps/dafa-web/src/app/components/navigation/navigation.component.scss b/apps/dafa-web/src/app/components/navigation/navigation.component.scss index d18a8d7..3570944 100644 --- a/apps/dafa-web/src/app/components/navigation/navigation.component.scss +++ b/apps/dafa-web/src/app/components/navigation/navigation.component.scss @@ -1,24 +1,22 @@ @import 'mixins/list'; -@import 'variables/border-radius'; @import 'variables/breakpoints'; @import 'variables/colors'; @import 'variables/gutters'; @import 'variables/typography'; - -$navigation-height: 2.5rem; -$navigation-height-large: 4rem; +@import 'variables/navigation'; .navigation { - background-color: white; - border-bottom: 1px solid $af__color-background-gray; + background-color: $af__color-primary; + border-bottom: 1px solid $af__color-background-dark-gray; position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 $af__gutter-m; + height: $dafa__navigation-height; - @media (max-width: $af__breakpoint-s-below) { - flex-direction: column; + @media (min-width: $af__breakpoint-m) { + height: $dafa__navigation-height-large; } &__logo-wrapper { @@ -28,23 +26,24 @@ $navigation-height-large: 4rem; } &__logo { - height: $navigation-height / 2; + height: $dafa__navigation-height / 2.5; vertical-align: middle; @media (min-width: $af__breakpoint-m) { - height: $navigation-height-large / 2; + height: $dafa__navigation-height-large / 2.5; } } &__list { @include dafa__reset-list; display: flex; + height: 100%; } &__item { display: flex; align-items: center; - border-left: 1px solid $af__color-background-gray; + border-left: 1px solid $af__color-background-dark-gray; &--no-link { padding: 0 $af__gutter-m; @@ -56,7 +55,7 @@ $navigation-height-large: 4rem; } &:last-child { - border-right: 1px solid $af__color-background-gray; + border-right: 1px solid $af__color-background-dark-gray; } } @@ -68,20 +67,16 @@ $navigation-height-large: 4rem; align-items: center; justify-content: center; font-size: $af__font-size-xs; - color: $af__color-text; + color: $af__color-text-light; width: 7rem; - height: $navigation-height; + height: 100%; font-weight: $af__font-weight-normal; text-decoration: none; - - @media (min-width: $af__breakpoint-m) { - height: $navigation-height-large; - } } &__link { &:hover { - background-color: $af__color-background-gray; + background-color: $af__color-interactive; } &--active { @@ -92,7 +87,7 @@ $navigation-height-large: 4rem; bottom: 0; left: 0; height: 5px; - background-color: $af__color-primary; + background-color: $af__color-secondary; } } } @@ -100,17 +95,4 @@ $navigation-height-large: 4rem; &__text { margin-top: $af__gutter-xxs; } - - &__news { - display: flex; - gap: $af__gutter-xs; - padding: $af__gutter-xs $af__gutter-s; - background-color: $af__color-complementary-alt; - color: $af__color-text-light; - border-radius: $af__border-radius; - - &:hover { - background-color: darken($af__color-complementary-alt, 10%); - } - } } diff --git a/apps/dafa-web/src/app/components/sidebar/sidebar.component.html b/apps/dafa-web/src/app/components/sidebar/sidebar.component.html new file mode 100644 index 0000000..7c0cf89 --- /dev/null +++ b/apps/dafa-web/src/app/components/sidebar/sidebar.component.html @@ -0,0 +1,70 @@ + diff --git a/apps/dafa-web/src/app/components/sidebar/sidebar.component.scss b/apps/dafa-web/src/app/components/sidebar/sidebar.component.scss new file mode 100644 index 0000000..dd982a1 --- /dev/null +++ b/apps/dafa-web/src/app/components/sidebar/sidebar.component.scss @@ -0,0 +1,51 @@ +@import 'variables/colors'; +@import 'variables/gutters'; +@import 'variables/typography'; +@import 'mixins/link'; +@import 'mixins/list'; + +.sidebar { + display: flex; + height: 100%; + flex-direction: column; + background-color: $af__color-background-light-gray; + border-right: 1px solid $af__color-background-dark-gray; + + &__list { + @include dafa__reset-list; + } + + &__link { + position: relative; + display: flex; + align-items: center; + width: 100%; + padding: $af__gutter-s $af__gutter-m; + border-bottom: 1px solid $af__color-background-dark-gray; + color: $af__color-text !important; + text-decoration: none; + font-weight: $af__font-weight-normal; + + &:hover { + background-color: $af__color-background-gray; + } + + &--active { + font-weight: $af__font-weight-semi-bold; + + &::before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 5px; + background-color: $af__color-primary; + } + } + } + + &__icon { + margin-right: 0.875rem; + } +} diff --git a/apps/dafa-web/src/app/components/sidebar/sidebar.component.spec.ts b/apps/dafa-web/src/app/components/sidebar/sidebar.component.spec.ts new file mode 100644 index 0000000..e2319b2 --- /dev/null +++ b/apps/dafa-web/src/app/components/sidebar/sidebar.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { SidebarComponent } from './sidebar.component'; + +describe('SidebarComponent', () => { + let component: SidebarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [SidebarComponent], + imports: [RouterTestingModule], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SidebarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/apps/dafa-web/src/app/components/sidebar/sidebar.component.ts b/apps/dafa-web/src/app/components/sidebar/sidebar.component.ts new file mode 100644 index 0000000..044b184 --- /dev/null +++ b/apps/dafa-web/src/app/components/sidebar/sidebar.component.ts @@ -0,0 +1,12 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { IconType } from '@dafa-enums/icon-type.enum'; + +@Component({ + selector: 'dafa-sidebar', + templateUrl: './sidebar.component.html', + styleUrls: ['./sidebar.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class SidebarComponent { + iconType = IconType; +} diff --git a/apps/dafa-web/src/app/components/sidebar/sidebar.module.ts b/apps/dafa-web/src/app/components/sidebar/sidebar.module.ts new file mode 100644 index 0000000..f0be330 --- /dev/null +++ b/apps/dafa-web/src/app/components/sidebar/sidebar.module.ts @@ -0,0 +1,12 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { IconModule } from '@dafa-shared/components/icon/icon.module'; +import { SidebarComponent } from './sidebar.component'; + +@NgModule({ + declarations: [SidebarComponent], + imports: [CommonModule, RouterModule, IconModule], + exports: [SidebarComponent], +}) +export class SidebarModule {} diff --git a/apps/dafa-web/src/app/data/enums/icon-type.enum.ts b/apps/dafa-web/src/app/data/enums/icon-type.enum.ts index 8909494..06c5a54 100644 --- a/apps/dafa-web/src/app/data/enums/icon-type.enum.ts +++ b/apps/dafa-web/src/app/data/enums/icon-type.enum.ts @@ -1,5 +1,10 @@ export enum IconType { - HOME = 'home', + HOME = 'home', // Custom + SETTINGS = 'settings', // Custom USER = 'user', + USERS = 'users', BELL = 'bell', + CALENDAR = 'calendar', + ENVELOPE = 'envelope', + SOK_KANDIDAT = 'sok-kandidat', } diff --git a/apps/dafa-web/src/app/pages/start/start.component.html b/apps/dafa-web/src/app/pages/start/start.component.html index c462f75..40b1c25 100644 --- a/apps/dafa-web/src/app/pages/start/start.component.html +++ b/apps/dafa-web/src/app/pages/start/start.component.html @@ -1,5 +1,3 @@ - -
Start funkar!
- +
Start funkar!
 diff --git a/apps/dafa-web/src/app/pages/start/start.component.scss b/apps/dafa-web/src/app/pages/start/start.component.scss index 19f2ff8..e69de29 100644 --- a/apps/dafa-web/src/app/pages/start/start.component.scss +++ b/apps/dafa-web/src/app/pages/start/start.component.scss @@ -1,101 +0,0 @@ -@import 'variables/breakpoints'; -@import 'variables/colors'; -@import 'variables/gutters'; -@import 'variables/typography'; -@import 'mixins/ie11'; -@import 'mixins/typography'; - -.start { - &__header { - position: relative; - width: 100%; - margin: $af__gutter-goliath 0; - } - - &__heading { - position: absolute; - margin: 0; - bottom: $af__gutter-xxl; - left: -$af__gutter-m; - background-color: $af__color-primary; - color: $af__color-text-light; - padding: $af__gutter-m $af__gutter-xxl; - } - - &__intro { - max-width: 700px; - } - - &__subheading { - font-size: $af__font-size-h1 !important; - margin: $af__gutter-xxl 0 !important; - @include dafa__typography-ornament; - } - - &__background-image { - width: 100%; - height: 200px; - object-fit: cover; - object-position: center 33%; - - @media (min-width: $af__breakpoint-m) { - height: 250px; - } - - @media (min-width: $af__breakpoint-l) { - height: 290px; - } - - @media (min-width: $af__breakpoint-xl) { - height: 320px; - } - } - - &__cta-wrapper { - background-color: $af__color-background-alt-tertiary; - margin: $af__gutter-xxl 0; - padding: $af__gutter-xxl; - } - - &__cta { - display: flex; - gap: $af__gutter-xl; - } - - &__puff { - width: calc(100% / 3); - - @include ie11 { - &:not(:first-child) { - margin-left: $af__gutter-xl; - } - } - } - - &__footer { - margin-top: $af__gutter-goliath; - background-color: $af__color-background-light-gray; - padding: $af__gutter-xxl 0 $af__gutter-goliath; - } - - &__footer-heading { - margin-top: 0 !important; - margin-bottom: $af__gutter-l !important; - } - - &__card-wrapper { - display: flex; - align-content: stretch; - gap: $af__gutter-xxl; - } - - &__card { - max-width: 400px; - flex-basis: 100%; - } - - &__card-link { - display: inline-block; - margin-top: $af__gutter-l; - } -} diff --git a/apps/dafa-web/src/app/pages/start/start.module.ts b/apps/dafa-web/src/app/pages/start/start.module.ts index c1c4ec2..2275f2e 100644 --- a/apps/dafa-web/src/app/pages/start/start.module.ts +++ b/apps/dafa-web/src/app/pages/start/start.module.ts @@ -2,16 +2,10 @@ import { DigiNgTypographyBaseModule } from '@af/digi-ng/_typography/typography-b import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { HorizontalCenterModule } from '@dafa-shared/components/horizontal-center/horizontal-center.module'; import { StartComponent } from './start.component'; @NgModule({ declarations: [StartComponent], - imports: [ - CommonModule, - RouterModule.forChild([{ path: '', component: StartComponent }]), - DigiNgTypographyBaseModule, - HorizontalCenterModule, - ], + imports: [CommonModule, RouterModule.forChild([{ path: '', component: StartComponent }]), DigiNgTypographyBaseModule], }) export class StartModule {} diff --git a/apps/dafa-web/src/app/shared/components/icon/icon.component.html b/apps/dafa-web/src/app/shared/components/icon/icon.component.html index 1338229..8596f93 100644 --- a/apps/dafa-web/src/app/shared/components/icon/icon.component.html +++ b/apps/dafa-web/src/app/shared/components/icon/icon.component.html @@ -1,12 +1,19 @@