Новое измнений в код
This commit is contained in:
parent
f4efa8f66e
commit
5a06dfdb22
2 changed files with 172 additions and 167 deletions
|
|
@ -14,7 +14,7 @@ const yearDeclension = getYearDeclension(yearsOfPractice);
|
|||
---
|
||||
|
||||
<section
|
||||
class="group relative w-full min-h-screen flex items-center overflow-hidden bg-[var(--color-navy)]"
|
||||
class="group relative w-full min-h-[50vh] md:min-h-screen flex items-center overflow-hidden bg-[var(--color-navy)]"
|
||||
>
|
||||
<!-- 1. ФОНОВОЕ ИЗОБРАЖЕНИЕ с эффектом проявления -->
|
||||
<div class="absolute inset-0 z-0">
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ import { CONTACT_CONSTANTS } from "@constants/constants.ts";
|
|||
|
||||
const { pathname } = Astro.url;
|
||||
|
||||
// Проверка авторизации будет на клиенте
|
||||
const navLinks = [
|
||||
{ name: "Главная", href: "/" },
|
||||
{ name: "Главная", href: "/", active: pathname === "/" },
|
||||
{
|
||||
name: "Услуги",
|
||||
href: "/services",
|
||||
active: pathname.startsWith("/services"),
|
||||
children: [
|
||||
{
|
||||
name: "Административные дела",
|
||||
|
|
@ -37,10 +37,10 @@ const navLinks = [
|
|||
{ name: "Дела СВО", href: "/services/svo", icon: "🛡️" },
|
||||
],
|
||||
},
|
||||
{ name: "Кейсы", href: "/cases" },
|
||||
{ name: "Блог", href: "/blog" },
|
||||
{ name: "О Бюро", href: "/about" },
|
||||
{ name: "Контакты", href: "/contacts" },
|
||||
{ name: "Кейсы", href: "/cases", active: pathname === "/cases" },
|
||||
{ name: "Блог", href: "/blog", active: pathname === "/blog" },
|
||||
{ name: "О Бюро", href: "/about", active: pathname === "/about" },
|
||||
{ name: "Контакты", href: "/contacts", active: pathname === "/contacts" },
|
||||
];
|
||||
|
||||
const rawLinks = navLinks.filter((link) => {
|
||||
|
|
@ -187,9 +187,26 @@ const rawLinks = navLinks.filter((link) => {
|
|||
}
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center gap-6">
|
||||
<!-- Блок авторизации - показывается/скрывается через JS -->
|
||||
<div id="auth-block" class="hidden xl:flex items-center gap-3">
|
||||
<div class="flex items-center gap-4 lg:gap-6">
|
||||
<!-- Иконка телефона для мобильных (видна только на мобильных < md) -->
|
||||
<a
|
||||
href={`tel:${CONTACT_CONSTANTS.phone.replace(/[()\s-]/g, '')}`}
|
||||
class="md:hidden w-10 h-10 rounded-full bg-[#bf9b58]/20 border border-[#bf9b58]/50 flex items-center justify-center hover:bg-[#bf9b58]/30 transition-colors group"
|
||||
title="Позвонить"
|
||||
aria-label="Позвонить"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 text-[#bf9b58] group-hover:text-white transition-colors"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M6.62 10.79a15.91 15.91 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.27 11.72 11.72 0 003.64.59 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 7a1 1 0 011-1h3.5a1 1 0 011 1 11.72 11.72 0 00.59 3.64 1 1 0 01-.27 1.11z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Блок авторизации - скрыт на мобильных (< md), показывается на md и выше -->
|
||||
<!-- ВАЖНО: hidden по умолчанию, скрипт управляет видимостью внутренних блоков, но не трогает hidden у контейнера -->
|
||||
<div id="auth-block" class="hidden md:flex items-center gap-3">
|
||||
<!-- Кнопки для авторизованного пользователя -->
|
||||
<div id="auth-user-block" class="hidden items-center gap-3">
|
||||
<a
|
||||
|
|
@ -221,7 +238,7 @@ const rawLinks = navLinks.filter((link) => {
|
|||
</div>
|
||||
|
||||
<!-- Блок для неавторизованного -->
|
||||
<div id="auth-guest-block" class="flex flex-col items-end">
|
||||
<div id="auth-guest-block" class="hidden flex-col items-end">
|
||||
<button
|
||||
data-consultation-modal
|
||||
class="flex items-center gap-2 text-white font-bold text-lg hover:text-[#bf9b58] transition-colors cursor-pointer"
|
||||
|
|
@ -253,7 +270,7 @@ const rawLinks = navLinks.filter((link) => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ИЗМЕНЕНИЕ: Кнопка-бургер. Увеличена область (w-12 h-12), добавлен rounded-full -->
|
||||
<!-- Кнопка-бургер -->
|
||||
<button
|
||||
id="menu-toggle"
|
||||
class="lg:hidden relative w-12 h-12 rounded-full border border-transparent flex items-center justify-center z-[1000] cursor-pointer transition-all duration-300"
|
||||
|
|
@ -283,7 +300,6 @@ const rawLinks = navLinks.filter((link) => {
|
|||
<MobileMenu links={rawLinks} />
|
||||
|
||||
<style>
|
||||
/* Шапка становится прозрачной, чтобы просвечивал темный оверлей из меню */
|
||||
:global(body.menu-open) #main-header {
|
||||
background-color: transparent !important;
|
||||
backdrop-filter: none !important;
|
||||
|
|
@ -291,16 +307,15 @@ const rawLinks = navLinks.filter((link) => {
|
|||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
/* ИЗМЕНЕНИЕ: Стили для активной кнопки (круглая подложка) */
|
||||
#menu-toggle[aria-expanded="true"] {
|
||||
background-color: #151b26; /* Темный фон под крестиком */
|
||||
border-color: rgba(255, 255, 255, 0.1); /* Легкая граница */
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Тень для объема */
|
||||
background-color: #151b26;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.burger-line {
|
||||
position: absolute;
|
||||
width: 26px; /* Немного уменьшили ширину линий, чтобы они лучше вписывались в круг */
|
||||
width: 26px;
|
||||
height: 2px;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
|
|
@ -318,11 +333,10 @@ const rawLinks = navLinks.filter((link) => {
|
|||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
/* Крестик */
|
||||
#menu-toggle[aria-expanded="true"] .line-1 {
|
||||
transform: translateY(0) rotate(45deg);
|
||||
background-color: #bf9b58; /* Делаем крестик золотым */
|
||||
width: 22px; /* Аккуратный крестик */
|
||||
background-color: #bf9b58;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
#menu-toggle[aria-expanded="true"] .line-2 {
|
||||
|
|
@ -357,14 +371,12 @@ const rawLinks = navLinks.filter((link) => {
|
|||
updateScrollProgress();
|
||||
}
|
||||
|
||||
// Проверка авторизации
|
||||
const checkAuth = async () => {
|
||||
const authBlock = document.getElementById("auth-block");
|
||||
const authUserBlock = document.getElementById("auth-user-block");
|
||||
const authGuestBlock = document.getElementById("auth-guest-block");
|
||||
const userInitialEl = document.getElementById("user-initial");
|
||||
|
||||
if (!authBlock || !authUserBlock || !authGuestBlock) return;
|
||||
if (!authUserBlock || !authGuestBlock) return;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth/me', {
|
||||
|
|
@ -375,19 +387,16 @@ const rawLinks = navLinks.filter((link) => {
|
|||
const data = await response.json();
|
||||
|
||||
if (data.authenticated) {
|
||||
authBlock.classList.remove("hidden");
|
||||
authUserBlock.classList.remove("hidden");
|
||||
authUserBlock.classList.add("flex");
|
||||
authGuestBlock.classList.add("hidden");
|
||||
authGuestBlock.classList.remove("flex");
|
||||
|
||||
// Отображаем первую букву имени пользователя
|
||||
if (userInitialEl && data.user?.name) {
|
||||
const firstLetter = data.user.name.trim().charAt(0).toUpperCase();
|
||||
userInitialEl.textContent = firstLetter;
|
||||
}
|
||||
} else {
|
||||
authBlock.classList.remove("hidden");
|
||||
authUserBlock.classList.add("hidden");
|
||||
authUserBlock.classList.remove("flex");
|
||||
authGuestBlock.classList.remove("hidden");
|
||||
|
|
@ -395,7 +404,6 @@ const rawLinks = navLinks.filter((link) => {
|
|||
}
|
||||
} catch (error) {
|
||||
console.error('[Header] Ошибка проверки авторизации:', error);
|
||||
authBlock.classList.remove("hidden");
|
||||
authUserBlock.classList.add("hidden");
|
||||
authGuestBlock.classList.remove("hidden");
|
||||
authGuestBlock.classList.add("flex");
|
||||
|
|
@ -404,7 +412,6 @@ const rawLinks = navLinks.filter((link) => {
|
|||
|
||||
checkAuth();
|
||||
|
||||
// Кнопка выхода
|
||||
const logoutBtn = document.getElementById("logout-btn");
|
||||
if (logoutBtn) {
|
||||
logoutBtn.classList.add("cursor-pointer");
|
||||
|
|
@ -418,9 +425,7 @@ const rawLinks = navLinks.filter((link) => {
|
|||
});
|
||||
|
||||
if (response.ok) {
|
||||
// Удаляем куку на клиенте
|
||||
document.cookie = 'pb_auth=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
|
||||
// Перенаправляем на главную
|
||||
window.location.href = '/';
|
||||
}
|
||||
} catch (error) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue