fix(brand-header): make shrunk logo clickable (#276)

telekom · Apr 27, 2021 · d1f784f · d1f784f
1 parent fb6fe3b
commit d1f784f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/packages/components/src/components/telekom/app-header/app-header.css b/packages/components/src/components/telekom/app-header/app-header.css
@@ -226,6 +226,7 @@ scale-app-header {
     pointer-events: none;
   }
   .header.sticky .header__nav-logo {
+    pointer-events: all;
     margin-right: var(--scl-spacing-32);
   }
 

diff --git a/packages/components/src/components/telekom/app-header/app-header.tsx b/packages/components/src/components/telekom/app-header/app-header.tsx
@@ -340,7 +340,12 @@ export class Header {
             <span class="header__nav-after"></span>
             <div class="header__nav-content">
               <div class="header__nav-logo">
-                <app-logo color="#e20074"></app-logo>
+                <app-logo
+                  color="#e20074"
+                  href={this.logoHref}
+                  logoTitle={this.logoTitle}
+                  onClick={this.logoClick}
+                ></app-logo>
               </div>
               <div class="header__nav-menu-wrapper">
                 <div class="header__nav-menu-main">{this.menuMain()}</div>

diff --git a/packages/components/src/components/telekom/app-logo/app-logo.tsx b/packages/components/src/components/telekom/app-logo/app-logo.tsx
@@ -25,18 +25,20 @@ export class Logo {
   render() {
     if (!this.claim) {
       return (
-        <svg
-          width="51"
-          height="24"
-          viewBox="0 0 51 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M0 15.8v-4.83h4.996v4.83H0zm15.235 0v-4.83h4.997v4.83h-4.997zm14.99 0v-4.83h4.995v4.83h-4.996zm14.988 0v-4.83h4.996v4.83h-4.996zM19.984 0l.248 8.415-1.31.219c-.243-2.48-.916-4.32-2.02-5.52-1.16-1.257-2.76-1.913-4.815-1.97V18.75c0 1.538.225 2.536.689 2.997.395.392 1.062.633 2.002.723.28.023.755.034 1.428.034v1.346H4.026v-1.346c.673 0 1.148-.011 1.427-.034.94-.09 1.608-.33 2.002-.723.465-.46.687-1.46.687-2.997V1.145c-2.055.056-3.652.712-4.813 1.968-1.103 1.201-1.776 3.041-2.02 5.521L0 8.415.247 0h19.737z"
-            fill={this.color}
-            fill-rule="nonzero"
-          />
-        </svg>
+        <a href={this.href} title={this.logoTitle}>
+          <svg
+            width="51"
+            height="24"
+            viewBox="0 0 51 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 15.8v-4.83h4.996v4.83H0zm15.235 0v-4.83h4.997v4.83h-4.997zm14.99 0v-4.83h4.995v4.83h-4.996zm14.988 0v-4.83h4.996v4.83h-4.996zM19.984 0l.248 8.415-1.31.219c-.243-2.48-.916-4.32-2.02-5.52-1.16-1.257-2.76-1.913-4.815-1.97V18.75c0 1.538.225 2.536.689 2.997.395.392 1.062.633 2.002.723.28.023.755.034 1.428.034v1.346H4.026v-1.346c.673 0 1.148-.011 1.427-.034.94-.09 1.608-.33 2.002-.723.465-.46.687-1.46.687-2.997V1.145c-2.055.056-3.652.712-4.813 1.968-1.103 1.201-1.776 3.041-2.02 5.521L0 8.415.247 0h19.737z"
+              fill={this.color}
+              fill-rule="nonzero"
+            />
+          </svg>
+        </a>
       );
     }
     return (