Improve the header component

Author: MrEssex

docs/pages/components/header.md

@@ -6,17 +6,30 @@ layout: component
 ---
 
 ```html:preview
-<zn-header></zn-header>
+
+<zn-header caption="John Jones"
+           description="This is the Description of the header"
+           previous-path="#"
+           breadcrumb="[{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;Dashboard&quot;},{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;Another&quot;}]"
+           navigation="[{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;Dashboard&quot;},{&quot;path&quot;:&quot;#&quot;,&quot;title&quot;:&quot;Another&quot;}]">
+  <zn-icon round src="test1@example.com" size="36"></zn-icon>
+</zn-header>
 ```
 
 ## Examples
 
-### First Example
+### Simple Header
+
+```html:preview
 
-TODO
+<zn-header caption="John Jones"></zn-header>
+```
 
-### Second Example
+### Simple Header with description
 
-TODO
+```html:preview
+
+<zn-header caption="John Jones" description="This is the description of the header"></zn-header>
+```
 
 

src/components/header/header.component.ts

@@ -160,17 +160,18 @@ export default class ZnHeader extends ZincElement {
               ${breadcrumb}  <!--- Maybe make this into a component -->
             </div>` : null}
 
+          ${hasPreviousPath ? html`
+            <a href="${this.previousPath}" class="caption__back"
+               data-target="${this.previousTarget ? this.previousTarget : ''}">
+              <zn-button size="content" icon="arrow_back" icon-size="24" color="transparent"></zn-buttonicon>
+            </a>` : null}
+
           ${hasDefaultSlot ? html`
             <div class="actions">
               <slot></slot>
             </div>` : ''}
 
           <div class="caption">
-            ${hasPreviousPath ? html`
-              <a href="${this.previousPath}" class="caption__back"
-                 data-target="${this.previousTarget ? this.previousTarget : ''}">
-                <zn-icon src="arrow_back"></zn-icon>
-              </a>` : null}
             <div class="header__left">
               <span class="header__caption" part="header-caption">${this.caption}</span>
               <span class="header__description">${this.description}</span>

src/components/header/header.scss

@@ -9,15 +9,14 @@
 
   // This isn't correct fix this also
   .caption {
-    padding: var(--zn-spacing-small) 0;
+    //padding: var(--zn-spacing-small) 0;
   }
 
   &__caption {
     font-weight: var(--zn-font-weight-bold);
     font-size: var(--zn-font-size-medium);
     color: rgba(var(--zn-text-panel-title), 100%);
     margin: 0;
-    line-height: 35px;
   }
 
   &--has-breadcrumb {
@@ -34,6 +33,16 @@
   }
 }
 
+.caption__back {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: inherit;
+}
+
+.content {
+  padding: var(--zn-spacing-small) 0;
+}
 
 :host([transparent]) > div {
   background-color: transparent;
@@ -99,6 +108,18 @@
     padding-right: var(--zn-spacing-large);
   }
 
+  .header__left {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--zn-spacing-2x-small);
+  }
+
+  .header__description {
+    display: contents;
+    font-size: var(--zn-font-size-small);
+  }
+
   .navless {
     min-height: 10px;
   }
@@ -109,12 +130,18 @@
 
   .breadcrumb {
     flex-basis: 100%;
-    font-size: 12px;
-    line-height: 12px;
+    font-size: var(--zn-font-size-x-small);
+    font-weight: var(--zn-font-weight-semibold);
+    color: rgb(var(--zn-primary));
+
+    display: flex;
+    align-items: center;
+    gap: var(--zn-spacing-2x-small);
 
     a {
       font-size: 0.875rem;
-      color: inherit;
+      color: rgb(var(--zn-text));
+      font-weight: var(--zn-font-weight-normal);
       text-decoration: inherit;
 
       &:hover {
@@ -123,10 +150,6 @@
     }
   }
 
-  .breadcrumb:not(:empty) {
-    padding-top: 10px;
-  }
-
   .caption {
     flex-grow: 1;
     display: flex;
@@ -152,7 +175,6 @@
   h1 {
     flex-grow: 1;
     font-size: 18px;
-    line-height: 35px;
 
     overflow: hidden;
     text-overflow: ellipsis;

src/components/navbar/navbar.scss

@@ -164,6 +164,7 @@ ul {
 
       &.active, &.zn-tb-active {
         color: rgb(var(--zn-primary));
+        font-weight: var(--zn-font-weight-semibold);
       }
 
       &.active::before, &.zn-tb-active::before {