From 1bb46846d46a3338b9ed05c755b1a2a758ed6fe7 Mon Sep 17 00:00:00 2001
From: Oleksandr Korchak <oleksandr.korchak@gmail.com>
Date: Fri, 18 Jun 2021 14:58:32 +0200
Subject: [PATCH] #79 :: Filter Select :: layout.

---
 .../layout/spline-layout-common.component.html       | 12 ++++++++----
 .../sidebar-logo/sl-sidebar-logo.component.html      |  8 ++++----
 .../sidebar-logo/sl-sidebar-logo.component.ts        |  2 ++
 .../layout/src/models/layout-section.models.ts       |  3 ++-
 ui/src/app/app.component.html                        |  6 ++++++
 5 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/ui/projects/spline-common/layout/src/components/layout/spline-layout-common.component.html b/ui/projects/spline-common/layout/src/components/layout/spline-layout-common.component.html
index 1f777370..4a3654d7 100644
--- a/ui/projects/spline-common/layout/src/components/layout/spline-layout-common.component.html
+++ b/ui/projects/spline-common/layout/src/components/layout/spline-layout-common.component.html
@@ -44,10 +44,14 @@
                      [class.sl-sidenav--expanded]="isSideNavExpanded">
 
             <div class="sl-sidenav__inner">
-
-                <sl-sidebar-logo *ngIf="noHeader"
-                                 [showOnlyLogo]="!isSideNavExpanded">
-                </sl-sidebar-logo>
+                <!-- SECTION :: SIDEBAR HEADER -->
+                <div>
+                    <ng-template *ngIf="sectionsTemplatesCollection[SectionName.sidebarHeader]"
+                                 [ngTemplateOutlet]="sectionsTemplatesCollection[SectionName.sidebarHeader]"
+                                 [ngTemplateOutletContext]="{isExpanded: isSideNavExpanded}">
+                    </ng-template>
+                </div>
+                <!-- SECTION :: ./SIDEBAR HEADER -->
 
                 <div class="flex-grow-1">
                     <!-- SECTION :: SIDEBAR -->
diff --git a/ui/projects/spline-common/layout/src/components/sidebar-logo/sl-sidebar-logo.component.html b/ui/projects/spline-common/layout/src/components/sidebar-logo/sl-sidebar-logo.component.html
index 25243d69..e76d80ae 100644
--- a/ui/projects/spline-common/layout/src/components/sidebar-logo/sl-sidebar-logo.component.html
+++ b/ui/projects/spline-common/layout/src/components/sidebar-logo/sl-sidebar-logo.component.html
@@ -18,16 +18,16 @@
     <div class="sl-sidebar-logo" [class.sl-sidebar-logo--only-logo]="showOnlyLogo">
         <div>
             <img class="sl-sidebar-logo__img"
-                 src="./assets/images/logo.png"
-                 matTooltip="Spline"
-                 alt="Spline"
+                 [src]="imageUrl"
+                 [matTooltip]="name"
+                 [alt]="name"
                  matTooltipPosition="right"
                  [matTooltipDisabled]="!showOnlyLogo"
             />
         </div>
         <div class="sl-sidebar-logo__text" *ngIf="!showOnlyLogo">
             <div class="sl-sidebar-logo__title">
-                Spline
+                {{ name }}
             </div>
         </div>
 
diff --git a/ui/projects/spline-common/layout/src/components/sidebar-logo/sl-sidebar-logo.component.ts b/ui/projects/spline-common/layout/src/components/sidebar-logo/sl-sidebar-logo.component.ts
index 8bc93b82..9aff2d38 100644
--- a/ui/projects/spline-common/layout/src/components/sidebar-logo/sl-sidebar-logo.component.ts
+++ b/ui/projects/spline-common/layout/src/components/sidebar-logo/sl-sidebar-logo.component.ts
@@ -23,6 +23,8 @@ import { Component, Input } from '@angular/core'
 })
 export class SlSidebarLogoComponent {
 
+    @Input() name = 'Spline'
+    @Input() imageUrl = './assets/images/logo.png'
     @Input() showOnlyLogo: boolean
 
 }
diff --git a/ui/projects/spline-common/layout/src/models/layout-section.models.ts b/ui/projects/spline-common/layout/src/models/layout-section.models.ts
index af4e9540..5d61169f 100644
--- a/ui/projects/spline-common/layout/src/models/layout-section.models.ts
+++ b/ui/projects/spline-common/layout/src/models/layout-section.models.ts
@@ -16,10 +16,11 @@
 
 export namespace SplineLayoutSection {
 
-    export type SectionName = 'header' | 'sidebar';
+    export type SectionName = 'header' | 'sidebar' | 'sidebarHeader'
 
     export const SectionName = {
         header: 'header' as SectionName,
         sidebar: 'sidebar' as SectionName,
+        sidebarHeader: 'sidebarHeader' as SectionName,
     }
 }
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index f5c9387b..13964ff3 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -31,6 +31,12 @@
         <!--        </ng-template>-->
         <!-- ./HEADER -->
 
+        <!-- SIDEBAR -->
+        <ng-template let-isExpanded="isExpanded" splineLayoutSection="sidebarHeader">
+            <sl-sidebar-logo [showOnlyLogo]="!isExpanded"></sl-sidebar-logo>
+        </ng-template>
+        <!-- ./SIDEBAR -->
+
         <!-- SIDEBAR -->
         <ng-template let-isExpanded="isExpanded" splineLayoutSection="sidebar">
             <spline-sidebar-menu [menuItems]="state.sidebarMenuItems"