Новые изменения
This commit is contained in:
parent
6f727aae7b
commit
b5b31f8a88
9 changed files with 600 additions and 166 deletions
|
|
@ -24,8 +24,6 @@ import { COMPANY } from "@constants";
|
|||
|
||||
<!-- Right side -->
|
||||
<div class="header-column header-right animate-load" data-delay="200">
|
||||
<div class="header-actions" id="auth-section"></div>
|
||||
|
||||
<a href={`tel:${COMPANY.phoneClean}`} class="header-phone" id="header-phone">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -45,7 +43,9 @@ import { COMPANY } from "@constants";
|
|||
</svg>
|
||||
<span class="phone-number">{COMPANY.phone}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="header-actions" id="auth-section"></div>
|
||||
</div>
|
||||
|
||||
<div class="mobile-actions">
|
||||
<a href={`tel:${COMPANY.phoneClean}`} class="mobile-phone-btn" aria-label="Позонить: {COMPANY.phone}">
|
||||
|
|
@ -127,11 +127,21 @@ import { COMPANY } from "@constants";
|
|||
.header-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.header-right {
|
||||
.header-right {
|
||||
justify-content: flex-end;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* НОМЕР ТЕЛЕФОНА В ШАПКЕ */
|
||||
.header-phone {
|
||||
display: flex;
|
||||
|
|
@ -309,29 +319,6 @@ import { COMPANY } from "@constants";
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 70px;
|
||||
}
|
||||
.header-center {
|
||||
display: none;
|
||||
}
|
||||
.header-right {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.header-phone {
|
||||
display: none;
|
||||
}
|
||||
.burger-btn {
|
||||
display: flex;
|
||||
}
|
||||
.mobile-phone-btn {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 993px) {
|
||||
.header-phone {
|
||||
display: flex;
|
||||
|
|
@ -386,8 +373,12 @@ import { COMPANY } from "@constants";
|
|||
} catch (e) {}
|
||||
localStorage.removeItem('auth_token');
|
||||
localStorage.removeItem('user');
|
||||
document.querySelector('.header-right')?.classList.remove('auth-active');
|
||||
window.location.href = '/';
|
||||
});
|
||||
|
||||
// Добавляем класс для изменения порядка
|
||||
document.querySelector('.header-right')?.classList.add('auth-active');
|
||||
} catch (e) {
|
||||
showPhone();
|
||||
}
|
||||
|
|
@ -399,10 +390,22 @@ import { COMPANY } from "@constants";
|
|||
function showPhone() {
|
||||
const authSection = document.getElementById('auth-section');
|
||||
if (authSection) authSection.innerHTML = '';
|
||||
document.querySelector('.header-right')?.classList.remove('auth-active');
|
||||
}
|
||||
|
||||
// Стили
|
||||
const authStyle = `
|
||||
.header-right.auth-active {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.header-right.auth-active .header-phone {
|
||||
order: 2;
|
||||
}
|
||||
.header-right.auth-active .header-actions {
|
||||
order: 1;
|
||||
}
|
||||
.user-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue