add circle input for avatar

src/app/components/avatar.component.ts

@@ -8,7 +8,8 @@ import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
     selector: 'app-avatar',
-    template: '<img [src]="sanitizer.bypassSecurityTrustResourceUrl(src)" title="{{data}}">',
+    template: '<img [src]="sanitizer.bypassSecurityTrustResourceUrl(src)" title="{{data}}" ' +
+        '[ngClass]="{\'rounded-circle\': circle}">',
 })
 export class AvatarComponent implements OnChanges, OnInit {
     @Input() data: string;
@@ -19,6 +20,7 @@ export class AvatarComponent implements OnChanges, OnInit {
     @Input() fontSize = 20;
     @Input() fontWeight = 300;
     @Input() dynamic = false;
+    @Input() circle = false;
 
     src: string;
 

src/app/layouts/organization-layout.component.html

@@ -1,3 +1,25 @@
 <app-navbar></app-navbar>
+<div class="orgnav" *ngIf="organization">
+    <div class="container d-flex flex-column justify-content-end">
+        <div class="my-auto d-flex align-items-center pl-1">
+            <app-avatar [data]="organization.name" [width]="45" [height]="45" [circle]="true"></app-avatar>
+            <span>{{organization.name}}</span>
+        </div>
+        <ul class="nav nav-tabs">
+            <li class="nav-item">
+                <a class="nav-link active" href="#">Active</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link disabled" href="#">Disabled</a>
+            </li>
+        </ul>
+    </div>
+</div>
 <router-outlet></router-outlet>
 <app-footer></app-footer>

src/app/layouts/organization-layout.component.ts

@@ -1,9 +1,32 @@
 import {
     Component,
+    OnInit,
 } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { Organization } from 'jslib/models/domain/organization';
 
 @Component({
     selector: 'app-organization-layout',
     templateUrl: 'organization-layout.component.html',
 })
-export class OrganizationLayoutComponent { }
+export class OrganizationLayoutComponent implements OnInit {
+    organization: Organization;
+
+    private organizationId: string;
+
+    constructor(private route: ActivatedRoute, private userService: UserService) { }
+
+    ngOnInit() {
+        this.route.params.subscribe(async (params) => {
+            this.organizationId = params.organizationId;
+            await this.load();
+        });
+    }
+
+    async load() {
+        this.organization = await this.userService.getOrganization(this.organizationId);
+    }
+}

src/app/organizations/vault.component.ts

@@ -1,11 +1,19 @@
 import {
-    Component
+    Component,
+    OnInit,
 } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
     selector: 'app-org-vault',
     templateUrl: 'vault.component.html',
 })
-export class VaultComponent {
+export class VaultComponent implements OnInit {
+    constructor(private route: ActivatedRoute) { }
 
+    ngOnInit() {
+        this.route.parent.params.subscribe(async (params) => {
+
+        });
+    }
 }

src/scss/styles.scss

@@ -571,3 +571,41 @@ app-user-billing {
 .form-check-block + .form-check-block {
     @extend .mt-3;
 }
+
+.orgnav {
+    background-color: $input-bg;
+    border-bottom: 1px solid $border-color;
+    height: 100px;
+    min-height: 100px;
+
+    .container {
+        height: 100%;
+    }
+
+    .nav-tabs {
+        border-bottom: none;
+
+        a {
+            color: $body-color;
+
+            &:hover:not(.active) {
+                border-color: transparent;
+            }
+
+            &.active {
+                border-top: 3px solid theme-color("primary");
+                font-weight: bold;
+                padding-top: calc(#{$nav-link-padding-y} - 2px);
+            }
+
+            &.disabled {
+                color: $input-placeholder-color;
+            }
+        }
+    }
+
+    span {
+        font-size: $font-size-lg;
+        @extend .ml-3;
+    }
+}