From 41583fa8b6016fcfc845bd8827ebfae5ee9469f9 Mon Sep 17 00:00:00 2001
From: Alexander Kislov <strannik11.92@gmail.com>
Date: Wed, 30 Aug 2023 17:15:27 +0300
Subject: [PATCH] Fix header adaptive

---
 .../components/header/header.component.html   | 12 +++++++++-
 .../components/header/header.component.scss   | 24 +++++++++++++++++--
 .../src/assets/icons/coffee.svg               |  1 +
 .../assets/icons/coffee.svg:Zone.Identifier   |  3 +++
 4 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 projects/ngx-tippy-demo/src/assets/icons/coffee.svg
 create mode 100644 projects/ngx-tippy-demo/src/assets/icons/coffee.svg:Zone.Identifier

diff --git a/projects/ngx-tippy-demo/src/app/components/header/header.component.html b/projects/ngx-tippy-demo/src/app/components/header/header.component.html
index 01d088e..dd6d7f2 100644
--- a/projects/ngx-tippy-demo/src/app/components/header/header.component.html
+++ b/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>
diff --git a/projects/ngx-tippy-demo/src/app/components/header/header.component.scss b/projects/ngx-tippy-demo/src/app/components/header/header.component.scss
index 3a50693..3eb45a0 100644
--- a/projects/ngx-tippy-demo/src/app/components/header/header.component.scss
+++ b/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;
+  }
 }
 
 
diff --git a/projects/ngx-tippy-demo/src/assets/icons/coffee.svg b/projects/ngx-tippy-demo/src/assets/icons/coffee.svg
new file mode 100644
index 0000000..32905e5
--- /dev/null
+++ b/projects/ngx-tippy-demo/src/assets/icons/coffee.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-coffee"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" y1="1" x2="6" y2="4"></line><line x1="10" y1="1" x2="10" y2="4"></line><line x1="14" y1="1" x2="14" y2="4"></line></svg>
\ No newline at end of file
diff --git a/projects/ngx-tippy-demo/src/assets/icons/coffee.svg:Zone.Identifier b/projects/ngx-tippy-demo/src/assets/icons/coffee.svg:Zone.Identifier
new file mode 100644
index 0000000..cd25110
--- /dev/null
+++ b/projects/ngx-tippy-demo/src/assets/icons/coffee.svg:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=https://feathericons.com/