Новое измнений в код
This commit is contained in:
Web-serfer
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) => {
|
||||
|
|
@ -50,41 +50,41 @@ const rawLinks = navLinks.filter((link) => {
|
|||
---
|
||||
|
||||
<header
|
||||
id="main-header"
|
||||
class="sticky top-0 w-full py-4 px-4 md:px-8 lg:px-16 z-[100] bg-[#0a0f1c]/90 backdrop-blur-md border-b border-white/5 transition-all duration-300"
|
||||
id="main-header"
|
||||
class="sticky top-0 w-full py-4 px-4 md:px-8 lg:px-16 z-[100] bg-[#0a0f1c]/90 backdrop-blur-md border-b border-white/5 transition-all duration-300"
|
||||
>
|
||||
<div class="container px-4 md:px-8 mx-auto flex items-center justify-between">
|
||||
<!-- Логотип -->
|
||||
<a href="/" class="flex items-center group relative py-2">
|
||||
<div
|
||||
class="w-0 opacity-0 overflow-hidden transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:w-10 group-hover:opacity-100"
|
||||
class="w-0 opacity-0 overflow-hidden transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:w-10 group-hover:opacity-100"
|
||||
>
|
||||
<div
|
||||
class="w-10 h-10 min-w-10 bg-[#bf9b58] flex items-center justify-center rounded"
|
||||
class="w-10 h-10 min-w-10 bg-[#bf9b58] flex items-center justify-center rounded"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6 text-[#151b26]"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6 text-[#151b26]"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12c5.16-1.26 9-6.45 9-12V5zm0 4a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m5.13 12A9.7 9.7 0 0 1 12 20.92A9.7 9.7 0 0 1 6.87 17c-.34-.5-.63-1-.87-1.53c0-1.65 2.71-3 6-3s6 1.32 6 3c-.24.53-.53 1.03-.87 1.53"
|
||||
fill="currentColor"
|
||||
d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12c5.16-1.26 9-6.45 9-12V5zm0 4a3 3 0 0 1 3 3a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3m5.13 12A9.7 9.7 0 0 1 12 20.92A9.7 9.7 0 0 1 6.87 17c-.34-.5-.63-1-.87-1.53c0-1.65 2.71-3 6-3s6 1.32 6 3c-.24.53-.53 1.03-.87 1.53"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)] pl-0 group-hover:pl-3"
|
||||
class="flex flex-col transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)] pl-0 group-hover:pl-3"
|
||||
>
|
||||
<span
|
||||
class="text-xl md:text-2xl font-black tracking-tighter text-white uppercase leading-none"
|
||||
class="text-xl md:text-2xl font-black tracking-tighter text-white uppercase leading-none"
|
||||
>
|
||||
ADVOKAT<span class="text-[#bf9b58]">086</span>
|
||||
</span>
|
||||
<span
|
||||
class="text-[10px] text-gray-400 tracking-[0.2em] uppercase hidden sm:block"
|
||||
>Юридическая защита</span
|
||||
class="text-[10px] text-gray-400 tracking-[0.2em] uppercase hidden sm:block"
|
||||
>Юридическая защита</span
|
||||
>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -93,150 +93,167 @@ const rawLinks = navLinks.filter((link) => {
|
|||
<nav class="hidden lg:flex items-center gap-8 xl:gap-12">
|
||||
{
|
||||
rawLinks.map((link) => (
|
||||
<div class="relative group">
|
||||
{link.children ? (
|
||||
<>
|
||||
<button
|
||||
class={`flex items-center gap-2 text-sm md:text-base font-bold uppercase tracking-wide transition-colors duration-300 py-2 ${link.active ? "text-[#bf9b58]" : "text-gray-300 hover:text-[#bf9b58]"}`}
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
{link.name}
|
||||
<svg
|
||||
class="w-4 h-4 transition-transform duration-300 ease-out group-hover:-rotate-180"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="absolute top-full left-1/2 -translate-x-1/2 pt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 ease-out transform group-hover:translate-y-0 translate-y-2 min-w-[300px]">
|
||||
<div class="bg-[#0f1623]/95 backdrop-blur-xl border border-white/10 rounded-xl shadow-2xl shadow-black/50 overflow-hidden p-2 relative">
|
||||
<div class="absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-[#0f1623] border-l border-t border-white/10 rotate-45" />
|
||||
<div class="relative space-y-1">
|
||||
{link.children.map((child) => (
|
||||
<a
|
||||
href={child.href}
|
||||
class={`flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-all duration-200 ${pathname === child.href ? "bg-[#bf9b58]/10 text-[#bf9b58]" : "text-gray-300 hover:bg-white/5 hover:text-[#bf9b58]"}`}
|
||||
>
|
||||
{child.icon && (
|
||||
<span class="text-lg flex-shrink-0">
|
||||
{child.icon}
|
||||
</span>
|
||||
)}
|
||||
<span>{child.name}</span>
|
||||
{pathname === child.href && (
|
||||
<svg
|
||||
class="w-4 h-4 ml-auto text-[#bf9b58]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div class="mt-2 pt-2 border-t border-white/5">
|
||||
<a
|
||||
href={link.href}
|
||||
class="flex items-center justify-center gap-2 px-4 py-2 text-xs font-bold uppercase tracking-wider text-[#bf9b58] hover:text-white transition-colors duration-200"
|
||||
>
|
||||
Все услуги
|
||||
<svg
|
||||
class="w-4 h-4 transition-transform group-hover:translate-x-1"
|
||||
<div class="relative group">
|
||||
{link.children ? (
|
||||
<>
|
||||
<button
|
||||
class={`flex items-center gap-2 text-sm md:text-base font-bold uppercase tracking-wide transition-colors duration-300 py-2 ${link.active ? "text-[#bf9b58]" : "text-gray-300 hover:text-[#bf9b58]"}`}
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
{link.name}
|
||||
<svg
|
||||
class="w-4 h-4 transition-transform duration-300 ease-out group-hover:-rotate-180"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="absolute top-full left-1/2 -translate-x-1/2 pt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 ease-out transform group-hover:translate-y-0 translate-y-2 min-w-[300px]">
|
||||
<div class="bg-[#0f1623]/95 backdrop-blur-xl border border-white/10 rounded-xl shadow-2xl shadow-black/50 overflow-hidden p-2 relative">
|
||||
<div class="absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-[#0f1623] border-l border-t border-white/10 rotate-45" />
|
||||
<div class="relative space-y-1">
|
||||
{link.children.map((child) => (
|
||||
<a
|
||||
href={child.href}
|
||||
class={`flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-all duration-200 ${pathname === child.href ? "bg-[#bf9b58]/10 text-[#bf9b58]" : "text-gray-300 hover:bg-white/5 hover:text-[#bf9b58]"}`}
|
||||
>
|
||||
{child.icon && (
|
||||
<span class="text-lg flex-shrink-0">
|
||||
{child.icon}
|
||||
</span>
|
||||
)}
|
||||
<span>{child.name}</span>
|
||||
{pathname === child.href && (
|
||||
<svg
|
||||
class="w-4 h-4 ml-auto text-[#bf9b58]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div class="mt-2 pt-2 border-t border-white/5">
|
||||
<a
|
||||
href={link.href}
|
||||
class="flex items-center justify-center gap-2 px-4 py-2 text-xs font-bold uppercase tracking-wider text-[#bf9b58] hover:text-white transition-colors duration-200"
|
||||
>
|
||||
Все услуги
|
||||
<svg
|
||||
class="w-4 h-4 transition-transform group-hover:translate-x-1"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17 8l4 4m0 0l-4 4m4-4H3"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<a
|
||||
href={link.href}
|
||||
class={`text-sm md:text-base font-bold uppercase tracking-wide transition-colors duration-300 py-2 block ${link.active ? "text-[#bf9b58]" : "text-gray-300 hover:text-[#bf9b58]"}`}
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<a
|
||||
href={link.href}
|
||||
class={`text-sm md:text-base font-bold uppercase tracking-wide transition-colors duration-300 py-2 block ${link.active ? "text-[#bf9b58]" : "text-gray-300 hover:text-[#bf9b58]"}`}
|
||||
>
|
||||
{link.name}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</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
|
||||
href="/profile"
|
||||
class="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="Личный кабинет"
|
||||
href="/profile"
|
||||
class="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="Личный кабинет"
|
||||
>
|
||||
<span id="user-initial" class="text-white font-bold text-lg group-hover:text-[#bf9b58]"></span>
|
||||
</a>
|
||||
<button
|
||||
id="logout-btn"
|
||||
class="w-10 h-10 rounded-full border border-red-500/30 flex items-center justify-center hover:bg-red-500/10 transition-colors group"
|
||||
title="Выход"
|
||||
id="logout-btn"
|
||||
class="w-10 h-10 rounded-full border border-red-500/30 flex items-center justify-center hover:bg-red-500/10 transition-colors group"
|
||||
title="Выход"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 text-red-400 group-hover:text-red-300"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
class="w-5 h-5 text-red-400 group-hover:text-red-300"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</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"
|
||||
data-consultation-modal
|
||||
class="flex items-center gap-2 text-white font-bold text-lg hover:text-[#bf9b58] transition-colors cursor-pointer"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
class="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
|
||||
/>
|
||||
</svg>
|
||||
{CONTACT_CONSTANTS.phone}
|
||||
|
|
@ -253,13 +270,13 @@ 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"
|
||||
aria-label="Меню"
|
||||
aria-expanded="false"
|
||||
onclick="
|
||||
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"
|
||||
aria-label="Меню"
|
||||
aria-expanded="false"
|
||||
onclick="
|
||||
const body = document.body;
|
||||
const isOpen = body.classList.toggle('menu-open');
|
||||
this.setAttribute('aria-expanded', isOpen);
|
||||
|
|
@ -274,8 +291,8 @@ const rawLinks = navLinks.filter((link) => {
|
|||
</div>
|
||||
|
||||
<div
|
||||
id="scroll-progress"
|
||||
class="absolute bottom-0 left-0 h-0.5 bg-[#bf9b58] w-0 transition-all duration-75 ease-out z-50"
|
||||
id="scroll-progress"
|
||||
class="absolute bottom-0 left-0 h-0.5 bg-[#bf9b58] w-0 transition-all duration-75 ease-out z-50"
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -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 {
|
||||
|
|
@ -343,12 +357,12 @@ const rawLinks = navLinks.filter((link) => {
|
|||
if (progressBar) {
|
||||
const updateScrollProgress = () => {
|
||||
const scrollTop =
|
||||
document.documentElement.scrollTop || document.body.scrollTop;
|
||||
document.documentElement.scrollTop || document.body.scrollTop;
|
||||
const scrollHeight =
|
||||
document.documentElement.scrollHeight -
|
||||
document.documentElement.clientHeight;
|
||||
document.documentElement.scrollHeight -
|
||||
document.documentElement.clientHeight;
|
||||
const scrollPercent =
|
||||
scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
|
||||
scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
|
||||
progressBar.style.width = `${scrollPercent}%`;
|
||||
};
|
||||
window.addEventListener("scroll", updateScrollProgress, {
|
||||
|
|
@ -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,32 +404,28 @@ 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");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
checkAuth();
|
||||
|
||||
// Кнопка выхода
|
||||
const logoutBtn = document.getElementById("logout-btn");
|
||||
if (logoutBtn) {
|
||||
logoutBtn.classList.add("cursor-pointer");
|
||||
logoutBtn.addEventListener("click", async () => {
|
||||
console.log('[Header] Выход из системы');
|
||||
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/auth/logout', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
});
|
||||
|
||||
|
||||
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