Новая иконка телефона в мобильном меню
This commit is contained in:
parent
ba332ca782
commit
b238967d3c
1 changed files with 45 additions and 1 deletions
|
|
@ -44,6 +44,24 @@ import { COMPANY } from "@constants";
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<a href={`tel:${COMPANY.phoneClean}`} class="mobile-phone-btn" aria-label="Позонить: {COMPANY.phone}">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<button class="burger-btn" id="burger-btn" aria-label="Открыть меню">
|
||||
<span class="burger-line"></span>
|
||||
<span class="burger-line"></span>
|
||||
|
|
@ -208,6 +226,29 @@ import { COMPANY } from "@constants";
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Мобильная кнопка телефона */
|
||||
.mobile-phone-btn {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(30, 48, 80, 0.1);
|
||||
color: #1e3050;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.mobile-phone-btn:hover {
|
||||
background-color: rgba(30, 48, 80, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.mobile-phone-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Скрытие гамбургера при открытом меню */
|
||||
.burger-btn.active {
|
||||
opacity: 0;
|
||||
|
|
@ -262,7 +303,7 @@ import { COMPANY } from "@constants";
|
|||
display: none;
|
||||
}
|
||||
.header-right {
|
||||
gap: 0.75rem;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
.header-phone {
|
||||
display: none;
|
||||
|
|
@ -270,6 +311,9 @@ import { COMPANY } from "@constants";
|
|||
.burger-btn {
|
||||
display: flex;
|
||||
}
|
||||
.mobile-phone-btn {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 993px) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue