#79 :: Filter Select :: layout.

AbsaOSS · Jun 18, 2021 · 1bb4684 · 1bb4684
1 parent c70e2c3
commit 1bb4684
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"