Fix header adaptive

projects/ngx-tippy-demo/src/app/components/header/header.component.html

@@ -28,14 +28,24 @@ <h2 class="header__title">ngx-tippy-wrapper</h2>
 
   <div class="header__actions">
     <div class="header__support">
+
       <a
         class="header__support-link"
         href="https://www.buymeacoffee.com/alexanderkislov"
         target="_blank"
         rel="noopener noreferrer"
       >
+        <tui-svg
+          class="icon header__support-icon--coffee"
+          src="assets/icons/coffee.svg"
+          alt="Buy Me A Coffee"
+          ngxTippy="Buy Me A Coffee ☕"
+          [tippyProps]="{
+            arrow: false
+          }"
+        ></tui-svg>
         <img
-          class="header__support-icon"
+          class="header__support-icon--standard"
           src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
           alt="Buy Me A Coffee"
         ></a>

projects/ngx-tippy-demo/src/app/components/header/header.component.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'mixins';
 
 $animation-time: 3s;
 
@@ -60,10 +61,29 @@ $animation-time: 3s;
   align-items: center;
 }
 
-.header__support-icon {
+.header__support-icon--standard {
   height: 46px;
   width: 162px;
-  border-radius: 1.5rem
+  border-radius: 1.5rem;
+
+  @include max-w($tablet) {
+    display: none;
+  }
+}
+
+.header__support-icon--coffee {
+  display: none;
+  color: var(--tui-text-02);
+  opacity: 0.8;
+  @include transition-opacity;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  @include max-w($tablet) {
+    display: block;
+  }
 }
 
 

projects/ngx-tippy-demo/src/assets/icons/coffee.svg:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=https://feathericons.com/